useDebounce.js

import { useEffect } from "react";

/**
 * Just like useEffect but it delays execution and debounces by the given delay
 *
 * @param {import("react").EffectCallback} effect
 * @param {Number} delay
 * @param {import("react").DependencyList} deps
 */
export default function useDebounce(effect, delay, deps) {
  return useEffect(() => {
    let destructor = noop;
    const timeout = setTimeout(() => {
      destructor = effect() || noop;
    }, delay);

    return () => {
      clearTimeout(timeout);
      destructor();
    };
  }, [effect, delay, ...deps]);
}

function noop() {}