-
Notifications
You must be signed in to change notification settings - Fork 0
/
use-debounce.ts
36 lines (29 loc) · 885 Bytes
/
use-debounce.ts
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
import { useEffect, useRef, useState } from 'react';
import { useUpdateEffect } from './use-update-effect';
import { noop } from './utils';
/**
* Get debounced value.
*
* •
*
* @param value Value to be debounced.
* @param {number} delay Delay in milliseconds.
* @param {Function} callbackFn Callback function after debounced.
*/
export function useDebounce<T>(value: T, delay: number, callbackFn: (value: T) => void = noop): T {
const [debouncedValue, setDebouncedValue] = useState(value);
const callbackFnRef = useRef(callbackFn);
useEffect(() => {
callbackFnRef.current = callbackFn;
}, [callbackFn]);
useUpdateEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
callbackFnRef.current(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}