Debounce a search input

Mode: Balanced

You said

How do I debounce a search input in React? Right now it calls our API on every keystroke.
Lumora AI said
Debounce the value, not the handler. Keep the input instant, and let an effect wait until typing pauses before it calls the API.

A useDebounce hook
jsx
```
import { useEffect, useState } from "react";

export function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    // Restart the timer on every change; only the last one fires.
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);

  return debounced;
}
```
Then search with the debounced value instead of the raw one:
jsx
```
const [query, setQuery] = useState("");
const search = useDebounce(query, 300);

useEffect(() => {
  if (search) loadResults(search);
}, [search]);
```
Why it works
- Typing stays instant: query changes on every key.
- Each change clears the last timer, so the API sees one request per pause.
- 300 ms suits most search boxes. Try 150–200 ms for short, local lists.
React's guide Synchronizing with Effects explains why the cleanup runs before the next timer starts.

Lumora AI can make mistakes. Check important information.

You said