lodash debounce in React functional component not working

Question

I have a functional component built around the React Table component that uses the Apollo GraphQL client for server-side pagination and searching. I am trying to implement debou

Answer 1

You must remember the debounced function between renders.

However, you should not use useCallback to remember a debounced (or throttled) function as suggested in other answers. useCallback is designed for inline functions!

Instead use useMemo to remember the debounced function between renders:

useMemo(() => debounce(loadData, 1000), []);