Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

How to add debounce to useEffect() in React

In the case where we want to build a React search box, or autocomplete text input, a debounce functionality comes very handy as we don't want to have an API called for each keystroke of the user.

So, instead of having something like this:

useEffect(() => {
    doApiCall(query)
}, [query]);

We want to have something like this:

useEffect(() => {
    (doApiCall(query)
}, [waitForTheTypingToStop(query)]);

In this example, we will use the debounce function from lodash, but if you want to add your own I've written a post on how to make a debouncing function in Javascript.

Below is the full code of the solution:

const App = ({wait}) => {
  const [query, setQuery] = useState("abc");
  const ref = useRef();

  const onChange = () => console.log("query = ", query)

  useEffect(() => {
    ref.current = onChange
  }, [onChange]);

  const doCallbackWithDebounce = useMemo(() => {
    const callback = () => ref.current?.()
    return lodash.debounce(callback, wait);
  }, []);

  return (<>
    <p>Input debounced for {wait} ms:</p>
    <input
      value={query}
      onChange={(e) => {
        doCallbackWithDebounce();
        setQuery(e.target.value);
      }}
    />
</>);
}

It will debounce the action previously used in useEffect() for a given number of milliseconds thus limiting the number of API calls:
screenshot of search debounced component in React

You can checkout the full working codepen here.

Home Screencasts Best of Newsletter Search X