2024-06-22 22:06:16 +01:00
|
|
|
import { useCallback, useEffect, useRef } from 'react';
|
|
|
|
|
import _ from 'lodash';
|
2024-06-19 21:18:35 +01:00
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Debounce hook.
|
|
|
|
|
* @param {T} callback
|
|
|
|
|
* @param {number} delay
|
|
|
|
|
* @returns {T}
|
|
|
|
|
*/
|
|
|
|
|
function useDebounce<T extends (...args: never[]) => void>(
|
|
|
|
|
callback: T,
|
2024-06-22 22:06:16 +01:00
|
|
|
delay: number
|
2024-06-19 21:18:35 +01:00
|
|
|
): T {
|
|
|
|
|
const callbackRef = useRef<T>(callback);
|
|
|
|
|
|
|
|
|
|
// Update the current callback each time it changes.
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
callbackRef.current = callback;
|
|
|
|
|
}, [callback]);
|
|
|
|
|
|
|
|
|
|
const debouncedFn = useCallback(
|
|
|
|
|
_.debounce((...args: never[]) => {
|
|
|
|
|
callbackRef.current(...args);
|
|
|
|
|
}, delay),
|
2024-06-22 22:06:16 +01:00
|
|
|
[delay]
|
2024-06-19 21:18:35 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Cleanup function to cancel any pending debounced calls
|
|
|
|
|
return () => {
|
|
|
|
|
debouncedFn.cancel();
|
|
|
|
|
};
|
|
|
|
|
}, [debouncedFn]);
|
|
|
|
|
|
|
|
|
|
return debouncedFn as unknown as T;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default useDebounce;
|