@keitafujimoto0917

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Reactプロジェクトで大量の再レンダリングが発生し、画面のパフォーマンスが極端に低下した問題

現在、Reactで業務システムを開発しています。

画面には数百件のデータを表示するテーブルやグラフがあり、機能追加を繰り返すうちに、画面の操作が非常に重くなってしまいました。

特に検索条件の変更やフィルター操作を行うたびに、関係のないコンポーネントまで再レンダリングされ、ユーザーからも「動作が遅い」と指摘されるようになりました。

発生した問題

React DevToolsのProfilerで調査したところ、一部のstate更新によって大量のコンポーネントが再レンダリングされていることが分かりました。

React.memo や useMemo、useCallback を導入しましたが、どこまで最適化すべきか判断が難しく、コードの可読性も低下してきています。

質問

大規模なReactアプリケーションにおいて、

再レンダリングの調査方法
適切なstate管理の分割方法
React.memoやuseMemoを適用する基準

など、皆さんはどのような方針でパフォーマンス改善を行っていますか?

0 likes

No Answers yet.

Your answer might help someone💌