56Implement useDebounce() for values

Implement the hook useDebounce(value, delay). It returns a copy of value that only updates after value has stopped changing for delay milliseconds.

function Search() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);
  useEffect(() => {
    if (debouncedQuery) searchApi(debouncedQuery); // runs once the user pauses typing
  }, [debouncedQuery]);
  return <input value={query} onChange={(e) => setQuery(e.target.value)} />;
}

Requirements

• Return the initial value immediately on the first render.
• Every change restarts the wait, so a burst of changes produces a single update with the last value.
• Clear any pending timer when the component unmounts.
• If delay changes, use the new delay.