@winglet/react-utils/dist/hooks/useDebounce.mjs

React utility library providing custom hooks, higher-order components (HOCs), and utility functions to enhance React application development with improved reusability and functionality

import { useRef, useEffect } from 'react';
import { useHandle } from './useHandle.mjs';
import { useTimeout } from './useTimeout.mjs';

const useDebounce = (callback, dependencyList, ms, options) => {
    const optionsRef = useRef({ immediate: options?.immediate ?? true });
    const isScheduled = useRef(false);
    const handleCallback = useHandle(callback);
    const debouncedCallback = useHandle(() => {
        if (optionsRef.current.immediate) {
            if (isScheduled.current) {
                isScheduled.current = false;
                handleCallback();
            }
        }
        else
            handleCallback();
    });
    const { isIdle, schedule, cancel } = useTimeout(debouncedCallback, ms);
    useEffect(() => {
        if (optionsRef.current.immediate) {
            if (isIdle()) {
                handleCallback();
                isScheduled.current = false;
            }
            else
                isScheduled.current = true;
        }
        schedule();
    }, dependencyList);
    useEffect(() => cancel, [cancel]);
    return {
        isIdle,
        cancel,
    };
};

export { useDebounce };