useDebounceHook.jsx

import { useCallback, useRef } from "react";

const useDebounceHook = (fn, delay, immediate = false) => {
  const timerId = useRef();
  const debounce = useCallback(
    function () {
      let context = this;
      let args = arguments;
      //check if immediate flag is true so invoke the debounce immediately
      let callNow = immediate && !timerId.current;

      // base case
      // clear the timeout to assign the new timeout to it.
      // when event is fired repeatedly then this helps to reset
      clearTimeout(timerId.current);

      timerId = setTimeout(function () {
        // Inside the timeout function, clear the timeout variable
        // which will let the next execution run when in 'immediate' mode
        timerId.current = null;

        // check if the function already ran with the immediate flag
        if (!immediate) {
          fn.apply(context, args);
        }
      }, delay);

      // immediate mode and no wait timer? Execute the function immediately
      if (callNow) fn.apply(context, args);
    },
    [fn, delay, immediate]
  );

  return debounce;
};

export default useDebounceHook;