Reactで作った画面が遅い原因
おもに以下がパフォーマンス劣化の原因だそうです
- 無駄にたくさんレンダリングしている
- 計算処理が重い/無駄に実行されている
画面描画なのか、計算処理なのか当たりをつけるのが良さそうです
原因の調べ方
ブラウザのディベロッパーツールのパフォーマンスツールで確認します
特に遅くないサンプルなのですが、、スクリプト（計算処理）はこれくらい、レンダリング（画面描画）はこれくらいが見えますね
レンダリングが遅かったら
どのタイミングでパフォーマンスが悪くなるか？ということも確認します
- 初期表示が遅い
- 大量データをリストコンポーネントにセットして表示など描画するコンポーネントが大量にないか確認する
- イベント発火後に遅くなる
- 本来再描画しなくて良いコンポーネントが再描画されてしまい遅くなっているので再描画されている部分を調査する
再レンダリングされている部分はchrome拡張ツール「React Developer Tool」で確認します
拡張ツールをインストールしてchromeを再起動するとディベロッパーツールのタブに「Component」と「Profiler」が表示されます
Componentタブを選択後、設定ボタンを押して
Highlight updates when components render. にチェックします
この状態で問題のイベントを実行すると再レンダリングされた箇所に水色の枠がパッと出てきます
この水色枠の箇所に当たりをつけてパフォーマンスが悪くなった箇所を調査します
計算処理が遅かったら
useMemo() を使って毎回複雑な計算が実行されるのを防ぐ！（さっき教えてもらった）
あとは誰か教えて〜〜〜〜