【TypeScript/React.js】<form onSubmit={submit() }>【🙅‍♀️ NG】

ReactでのonSubmitの正しい使い方

誤った使い方

<form onSubmit={handleSubmit()}>

この書き方だと、handleSubmit()はコンポーネントがレンダリングされると同時にhandleSubmitが実行されてしまう

正しい使い方

1. 関数をそのまま渡す場合：

   <form onSubmit={handleSubmit}>
   

2. カスタムの送信ハンドラを使う場合：

   <form onSubmit={handleSubmit(onSubmit)}>
   

• 括弧（()）が後ろにつけない。renderされたら発火するという印である。
• handleSubmit(onSubmit)という形式では、関数はただの参照として渡され、実際の送信（onSubmit）が行われたときにのみ実行される

なぜ重要か？

• 括弧をつけてしまうと、関数はコンポーネントがレンダリングされた時点で即座に実行されてしまう＝期待しないタイミングで発火してしまう
• 正確な動作を保証するためには、関数を正しい形で渡すことが大切 🐶