web / lib/hooks/use-debounce / useDebounce
Function: useDebounce()
useDebounce<
T>(value,delay):T
Custom hook to debounce a value
Useful for preventing excessive API calls during rapid value changes like map panning/zooming, search input, or filter changes.
Type Parameters
T
T
Parameters
value
T
The value to debounce
delay
number
Delay in milliseconds. Recommended values:
- 300ms for map interactions (pan/zoom)
- 500ms for search inputs
- 150ms for filter changes
Returns
T
The debounced value
Example
const [searchTerm, setSearchTerm] = useState('');
const debouncedSearchTerm = useDebounce(searchTerm, 500);
useEffect(() => {
// This will only run 500ms after the user stops typing
searchAPI(debouncedSearchTerm);
}, [debouncedSearchTerm]);