Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | 1x 1x 33x 33x 24x 9x 24x 24x 24x 24x 33x 33x 33x | import { useEffect, useState } from 'react';
/**
* Hook that debounces a value by delaying updates until after `delay` milliseconds
* have passed since the value was last changed. Useful for optimizing expensive operations
* like search filtering, API calls, or complex computations.
*
* @param value - The value to debounce
* @param delay - The delay in milliseconds (recommended: 300-500ms for search, 100-200ms for typing feedback)
* @returns The debounced value
*
* @example
* ```typescript
* const [searchQuery, setSearchQuery] = useState('');
* const debouncedSearchQuery = useDebounce(searchQuery, 300);
*
* // Expensive filtering only happens 300ms after user stops typing
* const filteredResults = useMemo(() => {
* return data.filter(item => item.name.includes(debouncedSearchQuery));
* }, [data, debouncedSearchQuery]);
* ```
*/
export function useDebounce<T>(value: T, delay: number): T {
const [debouncedValue, setDebouncedValue] = useState<T>(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
|