UseDebounceState

1'use client';
2 
3import {
4  SetStateAction,
5  useCallback,
6  useEffect,
7  useRef,
8  useState,
9} from 'react';
10 
11interface UseDebouncedStateOptions {
12  leading?: boolean;
13}
14 
15export function useDebouncedState<T>(
16  defaultValue: T,
17  delay: number = 500,
18  options: UseDebouncedStateOptions = {},
19) {
20  const [value, setValue] = useState<T>(defaultValue);
21  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
22  const leadingRef = useRef(true);
23 
24  const clearDebounceTimeout = useCallback(() => {
25    if (timeoutRef.current !== null) {
26      clearTimeout(timeoutRef.current);
27      timeoutRef.current = null;
28    }
29  }, []);
30 
31  useEffect(() => {
32    return () => {
33      clearDebounceTimeout();
34    };
35  }, [clearDebounceTimeout]);
36 
37  useEffect(() => {
38    leadingRef.current = true;
39  }, [defaultValue]);
40 
41  const debouncedSetValue = useCallback(
42    (newValue: SetStateAction<T>) => {
43      clearDebounceTimeout();
44      if (leadingRef.current && options.leading) {
45        setValue(newValue);
46      } else {
47        timeoutRef.current = setTimeout(() => {
48          leadingRef.current = true;
49          setValue(newValue);
50        }, delay);
51      }
52      leadingRef.current = false;
53    },
54    [clearDebounceTimeout, delay, options.leading],
55  );
56 
57  return [value, debouncedSetValue] as const;
58}