useDebouncedSubmit

useDebouncedSubmit.ts

import { useCallback, useEffect, useRef } from "react";

export const useDebouncedSubmit = <TArgs extends Array<any>>(onSubmit: (...args: TArgs) => Promise<any> | void, delay = 400) => {
  const timeoutRef = useRef<number | null>(null)
  useEffect(() => {
    return () => {
      if (timeoutRef.current !== null) clearTimeout(timeoutRef.current)
    }
  }, [])

  return useCallback(async(...args: TArgs) => {
    if (timeoutRef.current !== null) clearTimeout(timeoutRef.current)
    timeoutRef.current = setTimeout(() => {
      onSubmit(...args)
    }, delay)
  }, [onSubmit, delay])
}