The key insight: debounce the consequence, not the typing. The input itself must stay instant; only the expensive downstream work (API call, filter) gets debounced.

Approach 1: a useDebouncedValue hook

The input stays fully controlled and responsive; a separate debounced value lags behind it and drives the effect:

function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id); // cancel on every new keystroke
  }, [value, delay]);
  return debounced;
}

function Search() {
  const [query, setQuery] = useState("");          // instant, controlled
  const debouncedQuery = useDebouncedValue(query, 300);

  useEffect(() => {
    if (!debouncedQuery) return;
    const controller = new AbortController();
    fetchResults(debouncedQuery, { signal: controller.signal });
    return () => controller.abort();               // cancel stale request
  }, [debouncedQuery]);

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

The clearTimeout cleanup is what makes it work — every keystroke cancels the pending update and reschedules.

Approach 2: a stable debounced callback

const debouncedSearch = useMemo(
  () => debounce((q) => fetchResults(q), 300),
  [] // create ONCE — never per render
);
useEffect(() => () => debouncedSearch.cancel(), [debouncedSearch]); // cleanup

The mistakes this question is checking for

1. Re-creating the debounced function every render. const debounced = debounce(fn, 300) inside the component body makes a brand-new debounced function on every render — each with its own fresh timer — so it never actually debounces. Must wrap in useMemo/useRef (or define outside the component).

2. Debouncing the input value itself. Don't delay setQuery — that makes the input feel laggy/janky. The input is controlled and immediate; the value used for the API is the debounced one.

3. No cleanup. Clear the timeout / call .cancel() on unmount, or you set state on an unmounted component.

4. Not cancelling the request. Debounce reduces frequency; AbortController kills out-of-order responses.

The framing

"I keep the input controlled and instant — never debounce setState for the field itself, that makes typing feel laggy. I debounce the derived value or callback: a useDebouncedValue hook where a setTimeout with a clearTimeout cleanup lags a second value behind the input, and that value drives the fetch effect. The classic bug is re-creating the debounced function every render so it never debounces — it has to be stabilized with useMemo/useRef. And I pair it with an AbortController to cancel stale requests and cleanup on unmount."