How would you create a debounced search feature in React?

Debounced search is the canonical "don't fire on every keystroke" pattern. Naive onChange → fetch sends one request per character — wasted bandwidth, race conditions, flashing UI. The fix is to wait until the user pauses typing (~250–400ms) before issuing the request.

The core primitive.

function debounce<T extends (...args: any[]) => void>(fn: T, ms: number) {
  let t: ReturnType<typeof setTimeout> | undefined;
  return (...args: Parameters<T>) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), ms);
  };
}

Each call clears the previous timer; only the last call within the window fires.

**In React, debounce the value, not the handler.** A new debounced function on every render breaks the timer:

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

function Search() {
  const [query, setQuery] = useState("");
  const debounced = useDebouncedValue(query, 300);

  useEffect(() => {
    if (!debounced) return;
    const ctrl = new AbortController();
    fetch(`/api/search?q=${encodeURIComponent(debounced)}`, { signal: ctrl.signal })
      .then(r => r.json())
      .then(setResults)
      .catch(e => { if (e.name !== "AbortError") console.error(e); });
    return () => ctrl.abort();
  }, [debounced]);

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

The four details an interviewer is listening for.

1. Cancel inflight requests. Without AbortController, slow responses for stale queries can land after fresh ones and overwrite the UI. This is the "take-latest" race. Even with debounce, network latency can reorder.

1. Leading vs trailing. Default is trailing (fire after pause). Sometimes you want leading edge too (fire first call immediately, then suppress until pause) — useful for autocomplete dropdowns where the first letter shows results fast.

1. Don't debounce the empty string. Hitting the API with q="" returns garbage results or 400s. Bail early.

1. Don't debounce navigation, only the request. The input value should update instantly (controlled component). Only the effect — the request — is delayed.

Debounce vs throttle. Debounce = wait until quiet. Throttle = at most once per N ms. Search uses debounce. Scroll handlers use throttle.

When debounce is the wrong tool. For autocomplete with very fast backends, prefer useDeferredValue (React 18) — it keeps the input responsive without an arbitrary delay, and uses transition priority. For server-component routers, useTransition around a router push.