@mantine/hooks/esm/use-debounced-callback/use-debounced-callback.mjs

A collection of 50+ hooks for state and UI management

'use client';
import { useRef, useMemo, useEffect } from 'react';
import { useCallbackRef } from '../utils/use-callback-ref/use-callback-ref.mjs';

function useDebouncedCallback(callback, options) {
  const { delay, flushOnUnmount, leading } = typeof options === "number" ? { delay: options, flushOnUnmount: false, leading: false } : options;
  const handleCallback = useCallbackRef(callback);
  const debounceTimerRef = useRef(0);
  const lastCallback = useMemo(() => {
    const currentCallback = Object.assign(
      (...args) => {
        window.clearTimeout(debounceTimerRef.current);
        const isFirstCall = currentCallback._isFirstCall;
        currentCallback._isFirstCall = false;
        if (leading && isFirstCall) {
          handleCallback(...args);
          return;
        }
        function clearTimeoutAndLeadingRef() {
          window.clearTimeout(debounceTimerRef.current);
          debounceTimerRef.current = 0;
          currentCallback._isFirstCall = true;
        }
        const flush = () => {
          if (debounceTimerRef.current !== 0) {
            clearTimeoutAndLeadingRef();
            handleCallback(...args);
          }
        };
        const cancel = () => {
          clearTimeoutAndLeadingRef();
        };
        currentCallback.flush = flush;
        currentCallback.cancel = cancel;
        debounceTimerRef.current = window.setTimeout(flush, delay);
      },
      { flush: () => {
      }, cancel: () => {
      }, _isFirstCall: true }
    );
    return currentCallback;
  }, [handleCallback, delay, leading]);
  useEffect(
    () => () => {
      if (flushOnUnmount) {
        lastCallback.flush();
      } else {
        lastCallback.cancel();
      }
    },
    [lastCallback, flushOnUnmount]
  );
  return lastCallback;
}

export { useDebouncedCallback };
//# sourceMappingURL=use-debounced-callback.mjs.map