Hook for a react effect that is debounced.

useDebounceEffect.ts

// inspired by https://github.com/bellawatt/use-debounce-effect

import { DependencyList, useEffect, useRef } from 'react'

export default function useDebounceEffect(cb: () => void, delay: number, values: DependencyList, runOnInit = false) {
  const didMountRef = useRef<boolean>(false);

  useEffect(() => {
    if (!runOnInit && !didMountRef.current) {
      didMountRef.current = true;
      return;
    }

    const handler = setTimeout(cb, delay);

    return () => clearTimeout(handler)
  }, values)
};