Use lodash.debounce inside a function component in React

This is my second post.

In this post I'll explain how to debounce a function inside a function react component using lodash.debounce. We'll create a search app that'll search only when there's a gap of 500ms.

Let's first create a basic search component.

    const [userQuery, setUserQuery] = useState("")

    const onChange = e => {
          setUserQuery(e.target.value);
    };

    return (
      <div>
         <input
             type="text"
             value={userQuery}
             onChange={onChange}
         />
      </div>
    )

We'll create a function delayedQuery that'll call the api after a gap of 500ms.

Make sure you wrap it around useCallback to update the function only when userQuery updates.

const updateQuery = () => {
    // A search query api call.
    sendQuery(userQuery)
};

const delayedQuery = useCallback(debounce(updateQuery, 500), [userQuery]);

We'll call delayedQuery inside useEffect only when the value of userQuery changes. We should also return delayedQuery.cancel to cancel previous calls during useEffect cleanup.

useEffect(() => {
   delayedQuery();

   // Cancel previous debounce calls during useEffect cleanup.
   return delayedQuery.cancel;
}, [userQuery, delayedQuery]);

So, our debounced search is now implemented. Below is the complete code. There is also a codesandbox link for you to play around.

import debounce from 'lodash.debounce'
...

function searchApp() {
const [userQuery, setUserQuery] = useState("")

const updateQuery = () => {
    // A search query api call.
    sendQuery(userQuery)
};

const delayedQuery = useCallback(debounce(updateQuery, 500), [userQuery]);

const onChange = e => {
   setUserQuery(e.target.value);
};

useEffect(() => {
   delayedQuery();

   // Cancel the debounce on useEffect cleanup.
   return delayedQuery.cancel;
}, [userQuery, delayedQuery]);

return <input onChange={onChange} value={userQuery} />
}

Comments

[Kevin Funk]

This seems like an anti-pattern for how lodash.debounce is meant to be used. Sure it 'works', but new debounce functions are constantly being run. As a side effect, the additional options don't work. Try out using {maxWait: 500} (should wait at most, 500ms before firing the callback), it doesn't work.

[Ignasius Wahyudi]

thanks, this is what i need exactly.

cheers.

[Pơ Híp]

thank u

[cameronapak]

This was very helpful. Thank you!