@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を適用する基準

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

1 likes

1Answer

自分の経験だと、一番効果があったのは「なぜその state 更新でそこまで再レンダリングが広がっているのか」を調べることでした。まず Profiler で原因を特定して、その後で state を必要な場所の近くに移すようにしています。React.memo や useMemo、useCallback は実際にボトルネックになっていると分かった場合だけ使うことが多いです。何でも付けると可読性が落ちる割に、そこまで効果が出ないケースも多い印象です。

1Like

Comments

  1. ご回答ありがとうございます。

    私もProfilerで調査を進めているのですが、やはり最初に再レンダリングの原因を正確に特定することが重要なのですね。

    これまでは React.memo や useMemo、useCallback を広く適用して改善しようとしていましたが、かえってコードが複雑になりつつあったので、「実際にボトルネックになっている箇所だけを最適化する」という考え方はとても参考になりました。

    また、state を必要なコンポーネントの近くに配置するという点も見直してみようと思います。

    実務経験に基づくアドバイスを共有していただき、ありがとうございました。

Your answer might help someone💌