Reactパフォーマンス改善
この記事も良い
この記事の内容を学習用に自分のメモを追加したものです
Reactのデバッグに優れたchrome拡張機能であるreact dev toolsのprofilerを利用した調査方法
再レンダーに関するパフォーマンス観点やポイント
ボトルネックの計測から入ること
ツールを利用してボトルネック(どこが最も遅いのか)を計測し、改善したものを再計測し、改善します。1つの改善が終わると必ず次のボトルネックが見つかるので、そのボトルネックを再度つぶしにかかる…その繰り返しだなと思っています。
Reactが画面を表示する仕組みを理解すること
profiler自体には、Reactのレンダリングの仕組みを理解していないとイマイチよくわからない文脈があるなと思っています。そのため、パフォーマンスチューニングを行うことになった際には、ぜひReactはどのようにして画面を表示するのかを確認・おさらいしてみることをおすすめします。
profilerの利用方法