Delay reactions to rapidly changing values.
Section: Forms and Event Patterns
Debounced input value
tsx
tsx
function useDebouncedValue<T>(value: T, delay: number) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);
return debounced;
}Explanation
Useful for search, auto-save, analytics, and expensive derived computations.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Forms and Event Patterns
Complex form with useReducer
Use a reducer when form behavior becomes more complex.
Custom hook with options object
Prefer options objects for extensible APIs.