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} /> }
Top comments (4)
This seems like an anti-pattern for how
lodash.debounceis meant to be used. Sure it 'works', but newdebouncefunctions 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.thanks, this is what i need exactly.
cheers.
This was very helpful. Thank you!
thank u