docs/hooks/useDebouncedState.ts

import { useRef, useState } from "react";

export default function useDebouncedState<T>(data?: T, delay = 1500) {
    const [state, setState] = useState<T>(data as T);
    const [queued, setQueued] = useState(false);
    const timeoutRef = useRef<NodeJS.Timeout | undefined>();

    const setDebouncedState = (newData: T) => {
        if (!queued) {
            setQueued(true);
        }

        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
            timeoutRef.current = undefined;
        }

        timeoutRef.current = setTimeout(() => {
            setState(newData);
            setQueued(false);
        }, delay);
    };

    return [state as T, queued, setDebouncedState, setState] as const;
}
1	import { useRef, useState } from "react";
2
3	export default function useDebouncedState<T>(data?: T, delay = 1500) {
4	const [state, setState] = useState<T>(data as T);
5	const [queued, setQueued] = useState(false);
6	const timeoutRef = useRef<NodeJS.Timeout \| undefined>();
7
8	const setDebouncedState = (newData: T) => {
9	if (!queued) {
10	setQueued(true);
11	}
12
13	if (timeoutRef.current) {
14	clearTimeout(timeoutRef.current);
15	timeoutRef.current = undefined;
16	}
17
18	timeoutRef.current = setTimeout(() => {
19	setState(newData);
20	setQueued(false);
21	}, delay);
22	};
23
24	return [state as T, queued, setDebouncedState, setState] as const;
25	}