🤏

イベントハンドラを書くときに、関数にカッコを付けるかどうかで挙動が大きく変わる

に公開
Next.js
React
onchange
onclick
イベントハンドラ
tech

React のイベントハンドラでハマりがちな書き方の違い

React でイベントハンドラを書くときに、関数にカッコを付けるかどうかで挙動が大きく変わります。
特に <img> タグの onError などで混乱しやすいので整理します。

❌ 間違った書き方（即実行される）

<img src={imageUrl} onError={handleImageError(imageUrl)} />

この書き方だと レンダリング時にすぐ関数が実行 されてしまいます。
その結果、onError に渡るのは「関数の戻り値」であり「関数そのもの」ではありません。
つまり、実際にエラーが発生しても何も起こらないのです。

✅ 正しい書き方（エラー発生時に実行される）

<img src={imageUrl} onError={() => handleImageError(imageUrl)} />

この場合は () => ... という無名関数を渡しています。
onError に渡っているのは「関数」そのものなので、実際にエラーが発生したときだけ handleImageError(imageUrl) が実行されます。

React のイベントハンドラの仕組み

JSX では次のように書きます。

<img src={imageUrl} onError={ハンドラ} />

ここで React が期待しているのは「関数」です。
関数の戻り値 ではなく「関数そのもの」を渡す必要があります。

イメージで理解する

  • onError={関数} → リモコンそのものを渡す（押されたときに実行される）
  • onError={関数()} → リモコンをその場で押してしまう（渡すのは結果だけなので、押しても何も起こらない）

まとめ

  • onError={関数} → OK ✅（イベントが起きたときに実行される）
  • onError={関数()} → NG ❌（すぐ実行されて戻り値しか渡されない）

理由：React が期待しているのは「関数そのもの」だから。

👉 このパターンは onClick や onChange など、他のイベントハンドラでもまったく同じです。
「関数を渡す」ことを忘れないようにしましょう。

Discussion