122 components
Debounce value changes to reduce API calls and improve performance
Try typing quickly - the debounced value only updates 300ms after you stop typing
(empty)Updates on every keystroke
(empty)Updates 300ms after typing stops
Simulated API Calls:
Only triggers when debounced value changes
const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 300); // Default 300ms
useEffect(() => {
if (debouncedSearch) {
// API call only fires 300ms after user stops typing
fetchResults(debouncedSearch);
}
}, [debouncedSearch]);
return (
<Input
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search..."
/>
);Import