1  import { useState, useEffect } from 'react';
 2  import debounce from 'lodash/debounce';
 3  
 4  export function useDebounce<T>(value: T, delay: number = 300): T {
 5    const [debouncedValue, setDebouncedValue] = useState<T>(value);
 6  
 7    useEffect(() => {
 8      const handler = debounce(() => {
 9        setDebouncedValue(value);
10      }, delay);
11  
12      handler();
13  
14      return () => {
15        handler.cancel();
16      };
17    }, [value, delay]);
18  
19    return debouncedValue;
20  }