フロントエンジニア必読！！Reactでイベント委譲する？しない？

こんにちは！オンサイト株式会社のリードエンジニア、Akihiro Eguchi です。
私は日ごろから弊社の第2の開発『うきはラボ』で作業をしています！
『うきはラボ』については、こちらでも紹介していますので、ぜひご覧ください。

さて本題ですが、今回は私がふと感じた「Reactでイベント委譲をする必要ある？」という疑問について調べてみましたので、ご紹介していきます。

もしイベント委譲が不要とわかれば、他の作業に時間を使うことができ、効率化が図れますね！

これまでのイベント委譲
イベント委譲「するorしない」比較
なぜイベント委譲が不要？
まとめ

これまでのイベント委譲

サイトを制作していると繰り返しでli、tdなどの要素にイベントを設置することは頻繁に発生します。
これをReactで実装すると、

const handleClick = () => {
  console.log('クリックされたよ')
}
return (
  <ul>
    {list.map((row) => (
      <li key={row} onClick={handleClick}>{row}</li>
    ))}
  </ul>
)

このように子要素にイベントリスナをそれぞれ登録する記述になるのですが、ふとイベント委譲する必要ないのかなと思ってしました。

jQueryの頃だと

<ul id="parent-node">
  <% list.map((row) => { %>
    <li class="child-node" ><%= row %></li>
  <% }) %>
</ul>

※lodashのtemplate、listを使用しています。

$('#parent-node').on('click', '.child-node', () => {
  console.log('クリックされたよ')
})

のように親要素でイベントリスナを登録し、イベント委譲する実装が行儀の良いコードでした。

イベント委譲「するorしない」比較

イベント移譲を行う理由は下記の3点にあると思います。

①パフォーマンス
②メモリの増大
③子要素を追加した時のイベントリスナが付加されない

それぞれReact的な書き方で問題ないか調べたいところですが
すでに計測されている方がおりましたのでこちらを参照させていただきましょう！
https://dev.to/thawsitt/should-i-use-event-delegation-in-react-nl0

こちらを参照させていただきながら、
イベント委譲をした場合とイベント委譲をしない場合を比較した結果
①パフォーマンス
②メモリの増大
上記2点に関してはイベント委譲をしなくても問題ないことがわかりますね！

あとは
③子要素を追加した時のイベントリスナが付加されない
こちらに問題がなければ、
敢えてイベント委譲する必要はないということになります。

なぜイベント委譲が不要？

なぜイベント委譲してないのに問題ないかと言いますと、
Reactではon***を設置した要素上にイベントリスナを登録しているように見えて、実際はReactDOM.render()の第二引数で渡した要素上（v16以下ではdocument要素）にグローバルなイベントリスナを設置していて、そこで登録されたイベント処理をイベント委譲にて捌いているのです。

加えてReactの宣言的UIのおかげで子要素の追加とイベントリスナ追加が分かれることがないので

③子要素を追加した時のイベントリスナが付加されない

も発生しません。

これによって敢えてイベント委譲する理由がなくなったことがわかると思います。