Debounce API calls in React using lodash

See CodeSandbox here.

The key bit is here:

We wrap our debounced function which calls the API inside a useRef to ensure the debounced function is created only once and not on every render which in turn preserves the timer and internal queue managed by lodash’s debounce function..

If we don’t use a ref, the function returned by debounce() will be a new function on every render which resets the timer and internal queue of lodash’s debounce function which means we’ll just get a plain old function in the end, not the debounced version we want.