score:2

Accepted answer

You need to wrap the _.throttle() in a useCallback() hook.

In react functional components, the function body is called on every render so the line const throttledOnKeyDown = _.throttle(handleOnKeyDown, 1000); gets called every render and creates a new instance of the _.throttle() function so it can never reach its settling time. useCallback memoizes the function so that you get the same instance from one render to the next.

See this blog post about using _.debounce() in react. The same concept applies to throttle: https://nodeployfriday.com/posts/react-debounce/


Related Query

More Query from same tag