React Custom Hook: useDebounce

Search boxes that fire a request on every keystroke waste bandwidth and make results flicker. A tiny hook fixes it.

function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return debounced;
}

Why the cleanup matters

The returned function clears the previous timer, so only the last value within the delay window survives.

Pair it with AbortController

Debouncing reduces requests; aborting stale ones prevents out-of-order results. Use both.