useSubmit hook to make sure you don't call onSubmit twice

useSubmit.tsx

import { useState, useRef, useCallback } from 'react';

export const useSubmit = (fun: Function) => {
  const [isPending, setIsPending] = useState<boolean>(false);
  const pendingRef = useRef(null);

  const submit = useCallback((...args) => {
    if (pendingRef.current) {
      return;
    }

    pendingRef.current = true;
    setIsPending(true);
    fun.apply(this, args)

    setIsPending(false);
    pendingRef.current = false;
  }, []);

  return [
    submit,
    isPending,
  ];
};

useSubmitUsage.tsx

const [onSubmit, pending] = useSubmit(() => console.log('submit'));