React hook for debouncing value

useDebounced.tsx

import React from 'react';

export const useDebounced = <T extends unknown>(value: T, debounceDelay: number) => {
    const [debouncedValue, setDebouncedValue] = React.useState(value);

    React.useEffect(() => {
        const timeout = setTimeout(() => setDebouncedValue(value), debounceDelay);
        return () => clearTimeout(timeout);
    }, [value, debounceDelay]);

    return debouncedValue;
};

useDebouncedState.tsx

import React from 'react';
import { useDebounced } from './useDebounced';

export type TDebouncedStateResult<T> = [T, (value: T) => void];

export const useDebouncedState = <T extends unknown>(initialState: T, debounceDelay: number) => {
    const [state, setState] = React.useState(initialState);
    const debouncedState = useDebounced(state, debounceDelay);

    const handleSetState = (value: T) => {
        setState(value);
    }
    return [debouncedState, handleSetState] as TDebouncedStateResult<T>;
};