A React hook that returns a debounced version of any value. Trigger expensive effects (search, autosave, network fetches) on this value instead of the raw input.
TypeScript
import { useEffect, useState } from 'react';
export function useDebounce<T>(value: T, delay = 300): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const t = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(t);
}, [value, delay]);
return debounced;
}
// Usage in a search box:
function SearchBar() {
const [q, setQ] = useState('');
const dq = useDebounce(q, 300);
useEffect(() => {
if (dq) fetch(`/search?q=${encodeURIComponent(dq)}`);
}, [dq]);
return <input value={q} onChange={e => setQ(e.target.value)} />;
}Save your own code snippets
Create a free account and build your private vault. Share publicly whenever you want.