DEV Community

Cover image for Use lodash.debounce inside a function component in React
Joel D Souza
Joel D Souza

Posted on • Updated on

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>
    )
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

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} />
}
Enter fullscreen mode Exit fullscreen mode

Top comments (4)

Collapse
 
kfunk profile image
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.

Collapse
 
ace3 profile image
Ignasius Wahyudi

thanks, this is what i need exactly.

cheers.

Collapse
 
huydzzz profile image
Pơ Híp

thank u

Collapse
 
cameronapak profile image
cameronapak

This was very helpful. Thank you!