React: onClick={handleClick} と onClick={() => handleClick()} の違い

Reactでイベントハンドラーを書く際、よく見かける2つのパターンの違いを整理しました。一見似ていますが、**「関数の渡し方」と「引数の扱い」**に明確な差があります。

onClick={handleClick}

• 関数リファレンスを渡す
• 関数の名前のみイベントリスナーに登録する方式
• 動作
  • クリック時にReactがその関数を実行
• 特徴
  • レンダーリング時に関数は実行されません
  • イベントオブジェクトが自動的にeventを第1引数を渡す
  • 追加引数を渡すことは出来ない
• メリット
  • レンダリングのたびに新しい関数が生成されないため、パフォーマンスに優しい

onClick={() => handleClick()}

• アロー関数で呼び出す
• 新しい匿名関数を作成してそのなかで関数を「直接呼び出す」
• 動作
  • クリック時にアロー関数が実行され、そのなかの「handleClick」が動作する。
• 特徴
  • 引数の受け渡しが可能
    • onClick={() => handleClick(argument)}
  • レンダーリングのたびに新しい関数インスタンスが生成される
• 注意
  • onClcik={handleClick()}のよに書かないようにしよう！
    • レンダーリング時に即時実行されたしまう

まとめ