useMemoのコストを心配する前に余計なdivを減らせ！

React では、useMemoやReact.memoなどが最適化の手段として知られています。

これらは最適化であるため、必要が無いのにuseMemoを使うことは無駄な最適化であるとして避けられる傾向にあります。

筆者が簡単なベンチマークを取ってみたところ、あるコンポーネントが一つ余計なuseMemoを持っているよりも、一つ余計な<div>をレンダリングする方が、パフォーマンス（レンダリングにかかる時間）をより悪化させることが分かりました。

したがって、useMemoなどを減らすことに執心する場合は、それと同等以上の熱量で余計な要素を減らすことに執心する必要があります。

ベンチマークはこちらです。

結果には当然ばらつきがありますが、筆者の環境では次のような結果が典型的なものとして現れました（Mac 上の Google Chrome・Firefox・Safari で同じような傾向）。

baseline	useMemo	div
586.69 ms	591.09 ms	647.80 ms

数値が大きいほうがレンダリングに時間がかかっていることから、余計な useMemo を含むコンポーネントよりは余計な div を含むコンポーネントのほうがレンダリング時間へのインパクトが大きいことが分かります。

なお、メモ化ということなのでメモリ使用量への影響も気になるところですが、JavaScript コードでのベンチマークではメモリ使用量をうまく測れないので今後の課題となっています。メモリ使用量のデータを提供してくださる方からの情報提供は歓迎されます。尤も、仮想 DOM の仕組みから考えて、余計な div もメモリ使用量の増加に貢献するはずですから、useMemo などが劣る結果にはならないと予想していますが。

まとめ

余計なuseMemoの心配をする前に余計なdivの心配をしてください！