【JavaScript】onClick= () => hoge()とonClick={hoge}の違い

業務の中で、以下の2つの書き方の違いに疑問を感じたので調べてみた。

onClick= () => openDialog();

onClick={openDialog};

2つの違い

新しい関数の作成

onClick= () => openDialog()	onClick={openDialog}
コンポーネントが再レンダリングされるたびに新しい関数を作成する。	新しい関数は作成されない。openDialogへの直接の参照が渡される。

関数の引数

onClick= () => openDialog()	onClick={openDialog}
openDialog関数イベントオブジェクトを受け取らないことが保証される。	openDialog関数はクリックイベントオブジェクトを引数として受け取る。

パフォーマンス

onClick= () => openDialog()	onClick={openDialog}
新しい関数が再レンダリングの度に作成されるので、特に大きなリストや頻繁な再レンダリングが発生する場面ではパフォーマンスの問題が起きる可能性がある。	左のようなパフォーマンスの懸念はない。

可読性と拡張性

onClick= () => openDialog()	onClick={openDialog}
将来的にこの関数呼び出しに引数を追加したり、このクリックハンドラ内で複数の操作を行いたくなった場合、この書き方の方が変更しやすい.	シンプルで直接的です。ただし、上記のような変更を行う場合は、関数定義自体を変更するか、新しいラッパー関数を作成する必要がある。