import { useCallback , useEffect , useState , useRef } from 'react' ; import debounce from 'lodash.debounce' ; import { Cancelable , DebounceSettings } from 'lodash' ; export function useDebouncedCallback < T extends ( ... args : any [ ] ) => any > ( callback , delay = 0 , options ? ) { return useCallback ( debounce ( callback , delay , options ) , [ callback , delay , options , ] ) ; } export function useDebounce < T > ( value , delay = 0 , options ? ) { const previousValue = useRef ( value ) ; const [ current , setCurrent ] = useState ( value ) ; const debouncedCallback = useDebouncedCallback ( ( value ) => setCurrent ( value ) , delay , options ) ; useEffect ( ( ) => { if ( value !== previousValue . current ) { debouncedCallback ( value ) ; previousValue . current = value ; return debouncedCallback . cancel ; } } , [ value ] ) ; return current ; }