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 | 1x 6x 6x 6x 4x 2x 2x 4x 4x 6x | import { useState, useEffect } from "react";
export interface UseDebounceOptions<T> {
delay?: number;
onChange?: (val: T) => void;
}
export const useDebounce = <T>(
value: T,
options: UseDebounceOptions<T> = {}
) => {
const [debouncedValue, setDebouncedValue] = useState(value);
const { delay = 250, onChange } = options;
useEffect(() => {
// Update value after delay
const handler = setTimeout(() => {
setDebouncedValue(value);
onChange?.(value);
}, delay);
// Cancel timeout when value / delay changes
return () => {
clearTimeout(handler);
};
}, [value, delay, onChange]);
return debouncedValue;
};
|