はじめに
こんにちは！Halです！
今回は、Reactの初心者が100%ハマるJSXイベントハンドラの罠について徹底解説します。
「なんでボタンクリックしても動かないの？」「ページ読み込んだ瞬間にアラートが出るんだけど...」そんな経験ありませんか？
実は、JavaScript が console.log("test") を実行し、その戻り値（この場合は undefined）をイベントハンドラ onClick に設定しているために発生する挙動です。
今回は、そんなReact初心者が必ず通る道を回避するための3個の書き方をまとめました。
1. 【最重要】関数は「渡す」べし、「呼び出す」べからず
❌ 間違った例
const onClickHandler = () => {
alert('クリックされました！');
}
// これはダメ！ページ読み込み時に実行される
<button onClick={onClickHandler()}>ボタン</button>
⭕️ 正しい例
const onClickHandler = () => {
alert('クリックされました！');
}
// これが正解！関数の参照を渡す
<button onClick={onClickHandler}>ボタン</button>
なぜ括弧が不要なのか？
イベントハンドラに渡す関数は、「渡す」べきであって「呼び出す」べきではないからです。
-
onClickHandler→ 関数への参照（正解） -
onClickHandler()→ 関数の実行結果（間違い）
2. 引数を渡したい時は必ずアロー関数でラップせよ
❌ 間違った例
const deleteTask = (id) => {
console.log(`タスク${id}を削除`);
}
// これもページ読み込み時に実行される
<button onClick={deleteTask(1)}>削除</button>
⭕️ 正しい例
const deleteTask = (id) => {
console.log(`タスク${id}を削除`);
}
// アロー関数でラップする
<button onClick={() => deleteTask(1)}>削除</button>
引数がある場合は、アロー関数を使わなければならない。
3. パフォーマンス重視なら関数参照を直接渡すべし
パフォーマンスの違い
// 高パフォーマンス（推奨）
<button onClick={handleClick}>ボタン</button>
// 低パフォーマンス（再レンダリングのたびに新しい関数が作成される）
<button onClick={() => handleClick()}>ボタン</button>
レンダーのたびに新しい関数が作成されるので、React内の最適化がうまく動作しなくなる可能性があります。
使い分けのルール：
-
引数なし →
onClick={関数名} -
引数あり →
onClick={() => 関数名(引数)}
まとめ
以上の3個の書き方を全て網羅すれば、もうJSXのイベントハンドラで悩むことはありません！
参考記事
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼