Code Quiz

Debounce Hook Stale Closure

A custom debounced-callback hook silently calls an outdated version of the callback.

Codejavascript

function useDebouncedCallback(callback, delay) {
  const timer = useRef(null);

  return useCallback((...args) => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      callback(...args);
    }, delay);
  }, [delay]);
}

// Usage
function SearchBox() {
  const [query, setQuery] = useState('');
  const [count, setCount] = useState(0);

  const debouncedLog = useDebouncedCallback(() => {
    console.log(query, count);
  }, 500);

  return (
    <input
      value={query}
      onChange={e => { setQuery(e.target.value); debouncedLog(); }}
    />
  );
}

What is the bug in this custom hook?

← PrevioususeMemo vs useCallback Next →Stable Values with useRef vs useMemo