Reactパフォーマンス・チューニングチートシート
0
Kazuki Moriyama (森山 和樹)
基本
- 最低限下の記事は呼んでおきましょう
お前らのReactは遅い
パフォーマンス最適化(React公式)
差分検出処理(React公式)
フック API リファレンス
- 以下はこれを読んだ前提で書いていきます
プロファイリング
- パフォーマンス・チューニングにおいて一番大事なのは計測すること
- パフォーマンス・チューニングを行いたいときには必ずまずプロファイリングを行う
ReactDevTool: Profiling
- reactのchromeプラグイン
- できることは
- reactツリーのどこの部分が再レンダーされかの確認
- 再レンダーが何によって起きたかの確認
- 特に何が原因で再レンダーが起きたかを確認できるのが神
- propsの変化、hooksの変化などボトルネックの要因が特定できる
- とりあえずreact依存の遅さはこれ使っておけばいい
ChromeDevTool: Profiling
- chromeに組み込みで入ってる
- ネットワーキングやjsスクリプティング、レンダリングなどどこの部分でボトルネックが発生しているかがわかる
- react依存というより、jsのコードレベルまでプロファイルできるため、コードのどこの部分がボトルネックになるかを調べたりするときに使える
Reactの遅さの原因とその改善戦略
- 基本的にReact依存の遅さは不要な再レンダーが走りすぎること
- なのでまず再レンダーが走りすぎている箇所となぜ再レンダーが起きているかを特定するのが一番重要
- これはReactDevTool使っておけば特定できる
listのitemはに必ずdeterministicなkeyをつける
- reactは差分検知のためにkeyを見ている
- 同じならコンポーネントに変化が無いときにはレンダーは走らない
- ただし毎回同じコンポーネントには同じkeyが振られる必要がある(ランダム値じゃだめ)
親の再レンダー依存の子コンポーネントのレンダーを防ぎたいときにはReact.memo
- 親が再レンダーされると子も問答無用でレンダーがかかる
- 子が多いとき、子のレンダーが重いときはmemo化したほうがいい
- React.memo使うとpropが同じならコンポーネントが再レンダーされない
- 結構脳死でmemo使いまくる事もできるが、その分キャッシュが増えるので考えて使ったほうがいい
