Reactのイベントハンドラについて

はじめに

Reactでイベントハンドラを実行する際の書き方についてまとめました。

名前付き関数を参照した場合

function App() {
  function handleClick() {
    console.log("clicked");
  }

  return <button onClick={handleClick}>Click me</button>;
}

無名関数の場合

function App() {
return <button onClick={() => console.log("clicked")}>Click me</button>;
}

シンプルな処理であれば無名関数で処理をラップした方が可読性が上がるかと思います。

NGな記述法

• 関数を実行する

function App() {
  function handleClick() {
    console.log("clicked")
  }

  return <button onClick={handleClick()}>Click me</button>
}

なぜ上記の記法がNGなのか？
実際に上記のコードを動かしてみると、ページのレンダリングが完了した段階でconsoleにログが表示されていると思います。
これはhandleClick()と書いた場合には関数を呼び出しているのではなく、実行しているからです。

• 関数の参照

onClick={handleClick}

• 関数の実行

onClick={handleClick()}

• インラインでの書き方

function App() {
  return <button onClick={alert('clicked')}>Click me</button>;
}

こちらもページのレンダリング完了時にalertが実行されて、意図した挙動にはなりません。
インラインで処理する場合は無名関数でラップしてあげることで関数を呼び出すことができます。

公式のドキュメントに落とし穴として記載されています。
イベントへの応答

まとめ

• イベントハンドラ内では関数の実行と参照の違いを意識して書く必要がある。
• 基本的には、関数の参照(onClick={handleClick})か、無名関数でラップ{onClick={() => handleClick()}}で定義すると覚えておくといいと思います。

参考サイト

• イベントへの応答
• イベントハンドラで関数を渡す時の話（React)