Debounced search input (React)

12075 views

                  import { useEffect, useState } from 'react';

export function useDebouncedValue<T>(value: T, delayMs: number) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const t = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(t);
  }, [value, delayMs]);

  return debounced;
}

Search boxes are a classic place to accidentally fire a request on every keystroke. I debounce the value that triggers the query (not the input rendering) so typing stays responsive, and I cancel/ignore stale requests so results don’t arrive out of order. A small debounce window (200–300ms) usually hits the sweet spot: fewer requests without making the UI feel laggy. When I need a more responsive experience, I pair this with server-side search that’s fast enough to handle bursts. Debouncing is one of those tiny UX details users don’t notice when it works, but they absolutely feel when it doesn’t.

Mateo Rodriguez

More from Mateo Rodriguez

Debounced search input (React)

0 Comments

More from Mateo Rodriguez