react-hook-formのhandleSubmit関数を直接呼び出す際の注意点

事象

react-hook-formを使用してフォームの送信処理を実装していた際、handleSubmit関数の末尾に()をつけ忘れたことで、フォームを送信しても指定したコールバック関数が実行されないという問題が発生しました。具体的には、送信ボタンをクリックしても何も反応がなく、ブラウザのコンソールにもエラーメッセージは表示されませんでした。初めは他の原因を疑い、コードのデバッグを試みましたが、最終的にはhandleSubmit関数の呼び出し方に問題があることを発見しました。

PaymentStatus.tsx

import { FormProvider, useForm } from "react-hook-form";

const PaymentStatus: React.FC<Props> = (props) => {
  const formMethods = useForm<{ ... }>();
  const { handleSubmit } = formMethods;

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    // フォームのデフォルトの送信動作（ページのリロードを伴う）をキャンセルします
    e.preventDefault();
    handleSubmit((params: { ... }) => {
      // ここで実際の処理を行うコールバック関数を呼び出し、その後()で関数を実行します
    })();
  };

  return (
    <FormProvider {...formMethods}>
      <form onSubmit={onSubmit}>
        ...
      </form>
    </FormProvider>
  );
};

対処法

上記のように、handleSubmit関数の後に()を追加することで、内部のコールバック関数が正しく呼び出されるようになります。

handleSubmit関数の後に()が必要な理由

handleSubmit関数は、内部でフォームのバリデーションやエラーハンドリングを行った後、指定されたコールバック関数を実行する関数を返します。したがって、handleSubmit関数を呼び出すと、新しい関数が返されます。この返された関数を実行するためには、()を使用して呼び出す必要があります。

自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！