portainer/app/react/hooks/useDebounce.ts

23 lines
606 B
TypeScript

import _ from 'lodash';
import { useState, useRef, useCallback, useEffect } from 'react';
export function useDebounce(value: string, onChange: (value: string) => void) {
const [debouncedValue, setDebouncedValue] = useState(value);
const onChangeDebounces = useRef(_.debounce(onChange, 300));
const handleChange = useCallback(
(value: string) => {
setDebouncedValue(value);
onChangeDebounces.current(value);
},
[onChangeDebounces, setDebouncedValue]
);
useEffect(() => {
setDebouncedValue(value);
}, [value]);
return [debouncedValue, handleChange] as const;
}