Mengapa Aplikasi React Saya Menjadi Perlahan dengan 5,000 Rekod

Saya membina satu ciri React dengan dropdown yang boleh dicari dan jadual data.

Segalanya berjalan lancar semasa pembangunan. Kemudian, saya memuatkan data pengeluaran yang sebenar. Aplikasi tersebut menjadi perlahan.

Dropdown mengambil masa beberapa saat untuk dibuka. Menaip dalam kotak carian terasa lembap. Aplikasi menggunakan terlalu banyak memori.

Saya perlu mengendalikan 5,000 rekod pengguna. Saya memerlukan carian segera dan skrol yang lancar.

Berikut adalah cara saya menyelesaikannya.

  1. Gunakan useMemo untuk pengiraan Saya berhenti menapis data pada setiap render. Saya menggunakan useMemo untuk menyimpan senarai yang telah ditapis. Ini mengelakkan kerja yang tidak perlu bagi CPU.

  2. Tambah Debouncing Setiap tekanan kekunci sebelum ini mencetuskan carian. Ini membebankan bagi senarai yang besar. Saya menambah debounce selama 300ms. Kini, aplikasi hanya melakukan carian selepas pengguna berhenti menaip.

  3. Laksanakan Virtualization Ini adalah penyelesaian terbesar. Daripada melakukan render terhadap 5,000 elemen DOM, saya menggunakan react-window. Pelayar kini hanya melakukan render terhadap 20 atau 30 baris yang kelihatan di skrin. Ini menjadikan skrol lebih lancar dan mengurangkan penggunaan memori.

  4. Cegah Re-renders Saya menggunakan React.memo pada komponen baris. Saya juga menggunakan useCallback untuk pengendali acara (event handlers). Ini menghalang komponen anak daripada dikemas kini apabila datanya tidak berubah.

  5. Gunakan Paginasi di Pihak Pelayan (Server-side Pagination) Saya berhenti mengambil semua pengguna sekaligus. Saya beralih kepada pengambilan halaman kecil yang mengandungi 50 rekod. Ini menghasilkan respons API yang lebih pantas dan muatan data yang lebih kecil.

  6. Optimumkan Material UI MUI Autocomplete sangat bagus, tetapi ia sukar mengendalikan senarai yang sangat besar. Saya mengehadkan pilihan yang dipaparkan kepada 100 keputusan pertama untuk mengekalkan kepantasan.

Keputusannya:

• Kelajuan dropdown: Daripada 5 saat kepada bawah 500ms. • Respons carian: Daripada lembap kepada segera. • Penggunaan memori: Pengurangan yang ketara.

Masalah prestasi sering tersembunyi semasa pembangunan. Ia hanya muncul apabila data sebenar sampai kepada pengguna anda.

Ukur kekangan (bottlenecks) anda terlebih dahulu. Selesaikan masalah terbesar dengan memoization, virtualization, dan debouncing.

Pengoptimuman apakah yang paling membantu aplikasi React anda? Beritahu saya di ruangan komen.

Sumber: https://dev.to/sharma572/why-my-react-app-became-slow-at-5000-records-and-how-i-fixed-it-3hl9