I'm new with lodash and I'm trying to use it as below:

import _ from "lodash"
import SearchBar from "../ponents/UI/SearchBar"

const FaQSearchBar = () => {
  const handleOnChange = (e) => {
    console.log("pre-lodash")
    _.debounce(() => console.log("yo", e), 300)
  }

  return (
    <SearchBar
      initialWidth="204px"
      onFocusWidth="408px"
      onChange={handleOnChange}
    />
  )
}
export default FaQSearchBar

The pre lodash log pops but nothing from lodash itself. If i change the syntax for something like: _.debounce(console.log("yo", e), 300)

I have the following error Uncaught TypeError: Expected a function

I guess I'm missing a lodash principle here. Thanks

I'm new with lodash and I'm trying to use it as below:

import _ from "lodash"
import SearchBar from "../ponents/UI/SearchBar"

const FaQSearchBar = () => {
  const handleOnChange = (e) => {
    console.log("pre-lodash")
    _.debounce(() => console.log("yo", e), 300)
  }

  return (
    <SearchBar
      initialWidth="204px"
      onFocusWidth="408px"
      onChange={handleOnChange}
    />
  )
}
export default FaQSearchBar

The pre lodash log pops but nothing from lodash itself. If i change the syntax for something like: _.debounce(console.log("yo", e), 300)

I have the following error Uncaught TypeError: Expected a function

I guess I'm missing a lodash principle here. Thanks

• javascript
• reactjs
• lodash

Share Improve this question Follow asked Jun 23, 2021 at 9:19 DogeDoge 13311 gold badge33 silver badges1111 bronze badges 1

• Your creating a debounced function, but then never calling it. What you probably want to do is create your debounce function in a useMemo, – Keith Commented Jun 23, 2021 at 9:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

Because you are using debounce in the wrong way. Debounce will return a function. If handleOnChange doesnt make ponent rerender, you can use:

  const functionDebounce = _.debounce(() => console.log("yo", e), 300);
  const handleOnChange = (e) => {
    console.log("pre-lodash");
    functionDebounce(e);
  };

But in reality, we will do something and the ponent will re-render. So we need to wrap functionDebounce into useCallback to make sure it not change when ponent rerender

const functionDebounce = useCallback(
    _.debounce(() => console.log("yo", e), 300),
    []
  );