Back to Resources
Snippet· 1 min
Debounce that survives React strict mode
A drop-in useDebounced that's correct under double-invocation.
React 18+ strict mode double-invokes effects in dev, which breaks naive debounce hooks. The version below cleans up its own timer on every value change.
export function useDebounced<T>(v: T, ms = 200) {
const [d, setD] = useState(v);
useEffect(() => {
const id = setTimeout(() => setD(v), ms);
return () => clearTimeout(id);
}, [v, ms]);
return d;
}