useDebouncedValue

Returns a copy of the value that only updates once it has stopped changing for delay milliseconds. Use it to keep an input responsive while throttling whatever the input drives — a search request, an expensive filter, a URL update.

import { useDebouncedValue } from "@/hooks/use-debounced-value";

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

  React.useEffect(() => {
    void search(debouncedQuery);
  }, [debouncedQuery]);

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

The input stays bound to query, so typing never feels laggy. Only debouncedQuery is throttled.

Knowing when it is pending

The hook deliberately returns just the value. Compare it against the source to derive the pending state, rather than tracking a second piece of state:

const isPending = query !== debouncedQuery;

Notes

• The timer resets on every change and is cleared on unmount, so a value that never settles never fires.
• A delay of 0 or less updates synchronously on the next effect, which is useful for turning debouncing off behind a flag.
• Works with any value type. Non-primitive values are compared by identity, so memoize objects before passing them in.