Better than
coding
is delegating.
Write code when it matters. Delegate to autonomous workflows when it doesn't. From your laptop or your phone.
The IDE for engineers who direct.
Press
⌘K
anywhere to dispatch a task
~/noztos/session.04a
live
JD
you· 09:42
How do I debounce a search input in React without firing a request on every keystroke?
N
noztos· 09:42●
Wrap the input value in a useEffect with a setTimeout cleanup. The cleanup cancels the previous timer every time the value changes, so the request only fires after the user pauses typing.
tsx
use-debounced-search.tsx
const [query, setQuery] = useState(""); const [debounced, setDebounced] = useState(""); useEffect(() => { const t = setTimeout(() => { setDebounced(query); }, 300); return () => clearTimeout(t); }, [query]); // then fetch on `debounced`, not `query`
For production, swap the inline timeout for a small hook like useDebouncedValue so you can reuse it across the app.
▸
Ask anything, or describe a task
↵ send