React based debounce hook

debounce.ts

import { MutableRefObject, useMemo, useRef } from 'react';

export const useDebounce = (milliseconds: number) => {
  const clearable: MutableRefObject<number | undefined> = useRef();

  const debounce = useMemo(
    () => (fn: () => Promise<void>) => {
      if (clearable.current !== undefined) {
        clearTimeout(clearable.current);
      }
      clearable.current = window.setTimeout(fn, milliseconds);
    },
    [milliseconds],
  );

  return debounce;
};

To use in your component:

const debounce = useDebounce(400);
debounce(() => callSomeFunction());