32 lines
897 B
TypeScript
32 lines
897 B
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
import { isEqual } from 'lodash';
|
|
|
|
import { DEBOUNCED_SEARCH_WAIT_TIME } from '../constants';
|
|
|
|
function useDebounce<T>(
|
|
value: T,
|
|
delay: number = DEBOUNCED_SEARCH_WAIT_TIME
|
|
): T {
|
|
const [debouncedValue, setDebouncedValue] = useState<T>(value);
|
|
|
|
useEffect(() => {
|
|
// We need to make sure that we compare-deep here as the default useEffect deps do not.
|
|
if (!isEqual(value, debouncedValue)) {
|
|
const timer = setTimeout(
|
|
() => setDebouncedValue(value),
|
|
value === '' ? 0 : delay !== undefined ? delay : 500 //If value is empty string, instantly return
|
|
);
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
};
|
|
}
|
|
// Eslint apparrently likes cyclic dependencies.
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [value, delay]);
|
|
|
|
return debouncedValue;
|
|
}
|
|
|
|
export default useDebounce;
|