Overview
The useDebounce hook delays updating a value until after a specified delay has passed since the last change. This is particularly useful for search inputs, form validation, and preventing excessive API calls.
Hooks
useDebounce
Delays updating a value until the specified delay has elapsed.
function useDebounce<T>(value: T, delay: number): T
Parameters
Delay in milliseconds before updating the value
Returns
The debounced value that updates only after the delay period
useDebouncedCallback
Returns a debounced version of the provided callback function.
function useDebouncedCallback<T extends (...args: unknown[]) => void>(
callback: T,
delay: number
): (...args: Parameters<T>) => void
Parameters
Delay in milliseconds before invoking the callback
Returns
A debounced callback that resets the timer on every call
Examples
Basic search debouncing
import { useState, useEffect } from 'react';
import { useDebounce } from '@kivora/react';
function SearchComponent() {
const [searchQuery, setSearchQuery] = useState('');
const debouncedSearch = useDebounce(searchQuery, 300);
useEffect(() => {
if (debouncedSearch) {
fetchResults(debouncedSearch);
}
}, [debouncedSearch]);
return (
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search..."
/>
);
}
Debouncing a callback
import { useDebouncedCallback } from '@kivora/react';
function FormComponent() {
const saveChanges = useDebouncedCallback((formData) => {
// This will only fire 500ms after the last call
api.saveForm(formData);
}, 500);
return (
<form onChange={(e) => saveChanges(new FormData(e.currentTarget))}>
{/* Form fields */}
</form>
);
}
Window resize handler
import { useEffect } from 'react';
import { useDebouncedCallback } from '@kivora/react';
function ResponsiveComponent() {
const handleResize = useDebouncedCallback(() => {
console.log('Window resized to:', window.innerWidth);
}, 250);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, [handleResize]);
return <div>Resize the window</div>;
}
Use Cases
- Search inputs: Delay API calls until the user stops typing
- Form validation: Validate fields only after the user has finished editing
- Auto-save: Save changes after a period of inactivity
- Scroll/resize handlers: Prevent excessive event handler calls
- API rate limiting: Reduce the frequency of API requests