Reactプロジェクトで大量の再レンダリングが発生し、画面のパフォーマンスが極端に低下した問題
Q&A
現在、Reactで業務システムを開発しています。
画面には数百件のデータを表示するテーブルやグラフがあり、機能追加を繰り返すうちに、画面の操作が非常に重くなってしまいました。
特に検索条件の変更やフィルター操作を行うたびに、関係のないコンポーネントまで再レンダリングされ、ユーザーからも「動作が遅い」と指摘されるようになりました。
発生した問題
React DevToolsのProfilerで調査したところ、一部のstate更新によって大量のコンポーネントが再レンダリングされていることが分かりました。
React.memo や useMemo、useCallback を導入しましたが、どこまで最適化すべきか判断が難しく、コードの可読性も低下してきています。
質問
大規模なReactアプリケーションにおいて、
再レンダリングの調査方法
適切なstate管理の分割方法
React.memoやuseMemoを適用する基準
など、皆さんはどのような方針でパフォーマンス改善を行っていますか?
0 likes