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 | 1x 1x 1x 1x 1x 1x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 1x 3x 3x | import { useRef } from 'react';
import { useDebouncedValue } from '../use-debounced-value/useDebouncedValue';
import { useUpdateEffect } from '../use-update-effect/useUpdateEffect';
export const useDebouncedOnChange = <TValue>(
value: TValue,
onChange?: (value: TValue) => void,
delayMs: number = 300,
) => {
const debouncedValue = useDebouncedValue<TValue>(value, delayMs);
// Save callback to ref to avoid infinite loop on the useUpdateEffect.
const onChangeRef = useRef(onChange);
onChangeRef.current = onChange;
// Update the content when the value changes.
useUpdateEffect(() => {
onChangeRef.current?.(debouncedValue);
}, [debouncedValue]);
};
|