Debounced React useEffect with a wait time in milliseconds

useLazyEffect.ts

// https://stackoverflow.com/a/67504622/51500
import {
  DependencyList,
  EffectCallback,
  useCallback,
  useEffect,
  useRef,
} from "react";
import { debounce } from "lodash";

export function useLazyEffect(
  effect: EffectCallback,
  deps: DependencyList = [],
  wait = 300
) {
  const cleanUp = useRef<void | (() => void)>();
  const effectRef = useRef<EffectCallback>();
  effectRef.current = useCallback(effect, deps);
  const lazyEffect = useCallback(
    debounce(() => (cleanUp.current = effectRef.current?.()), wait),
    []
  );
  useEffect(lazyEffect, deps);
  useEffect(() => {
    return () =>
      cleanUp.current instanceof Function ? cleanUp.current() : undefined;
  }, []);
}

Nice! one thing - the original useEffect is cleaning up on every new invocation. (happens if the dependency array is not empty, and a value changes)
i suggest replacing those lines:

const lazyEffect = useCallback(
    debounce(() => (cleanUp.current = effectRef.current?.()), wait),
    []
  );

With those:

const lazyEffect = useCallback(
    debounce(() => {
      if(cleanUp.current instanceof Function) {
        cleanUp.current();
      }
      cleanUp.current = effectRef.current?.()
    }, wait),
    []
  );

thank you for this, it saved my bacon today with a tricky debounce setup I was working on