The value to debounce
The debounce delay in milliseconds
The debounced value
This hook delays updating the returned value until after the specified delay has passed since the last change. Useful for search inputs, filter inputs, and other scenarios where you want to avoid excessive API calls or re-renders.
function SearchComponent() {
const [searchInput, setSearchInput] = useState('');
const debouncedSearch = useDebounce(searchInput, 300);
useEffect(() => {
// This only runs 300ms after the user stops typing
performSearch(debouncedSearch);
}, [debouncedSearch]);
return (
<input
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
/>
);
}
Debounces a value by the specified delay.