Reactアプリが5,000件のデータで重くなった理由

Translated for your language. 原文を読む.

AI-assisted draft.

GyaanSetu Editorial2 週間前2分で読めます

なぜ私のReactアプリは5,000件のレコードで遅くなったのか

検索可能なドロップダウンとデータテーブルを備えたReactの機能を構築しました。

開発中はすべて順調に動作していました。しかし、実際のプロダクションデータを読み込んだ途端、アプリが重くなりました。

ドロップダウンを開くのに数秒かかり、検索ボックスへの入力はラグを感じるほどでした。また、アプリのメモリ使用量も膨大になりました。

5,000件のユーザーレコードを扱う必要があり、即時の検索とスムーズなスクロールが求められていました。

以下に、その解決策を紹介します。

レンダリングのたびにデータをフィルタリングするのをやめ、useMemo を使ってフィルタリング済みのリストを保持するようにしました。これにより、CPUの不要な負荷を防ぐことができます。

以前はキー入力のたびに検索が実行されていました。これは大規模なリストではコストが高い処理です。そこで300msのデバウンスを追加しました。これにより、ユーザーがタイピングを止めた後にのみ検索が実行されるようになりました。

これが最大の改善策でした。5,000個のDOM要素をすべてレンダリングする代わりに、react-window を使用しました。ブラウザは現在、画面に表示されている20〜30行のみをレンダリングします。これにより、スクロールがスムーズになり、メモリ使用量も抑えられます。

行コンポーネントに React.memo を使用しました。また、イベントハンドラーには useCallback を使用しました。これにより、データが変わらない場合に子コンポーネントが更新されるのを防げます。

全ユーザーを一括で取得するのをやめ、50件ずつの小さなページ単位で取得するように切り替えました。これにより、APIのレスポンスが速くなり、データペイロードも小さくなりました。

MUIのAutocompleteは素晴らしいですが、膨大なリストでは動作が重くなります。高速性を維持するため、表示されるオプションを最初の100件に制限しました。

結果:

• ドロップダウンの速度: 5秒から500ms未満へ。 • 検索のレスポンス: ラグありから即時へ。 • メモリ使用量: 大幅に削減。

パフォーマンスの問題は、開発中には隠れていることがよくあります。それらは、実際のデータがユーザーに届いたときに表面化します。

まずはボトルネックを測定してください。メモ化、仮想化、デバウンスを用いて、最も大きな問題から解決していきましょう。

あなたのReactアプリで最も効果があった最適化は何ですか？ぜひコメントで教えてください。