useDebouncedEffect to delay the React.useEffect to immediately being executed. It is useful to save some performance while user changing the state of the component.

use-debounced-effect.ts

import { DependencyList, useEffect } from 'react';

export function useDebouncedEffect(
  fn: () => void,
  deps: DependencyList,
  delay: number
) {
  useEffect(() => {
    const timer = setTimeout(() => {
      fn();
    }, delay);
    return () => {
      clearTimeout(timer);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, deps);
}