Masalah Rendering Daftar Besar

Misalkan Anda memetakan array yang berisi sepuluh ribu elemen dan merender satu elemen li untuk masing-masing elemen. React akan membuat sepuluh ribu simpul DOM, meskipun hanya sekitar dua lusin yang dapat terlihat di layar pada satu waktu.

Sebagian besar simpul tersebut berada di luar layar dan tidak terlihat, tetapi peramban tetap harus membuat, menata letak, dan memelihara semuanya.

Peramban menanggung biaya nyata untuk pohon DOM yang besar. Tata letak, penghitungan ulang gaya, dan penggunaan memori semuanya meningkat seiring jumlah simpul, sehingga daftar yang sangat besar memperlambat perenderan awal dan memperbesar penggunaan memori.

Bahkan interaksi sederhana dapat tersendat ketika mesin harus melacak dan menata ulang puluhan ribu simpul.

Pengguliran daftar yang sangat besar adalah bagian yang paling dirasakan pengguna. Peramban menggambar ulang tampilan dan mungkin menghitung ulang tata letak saat konten bergerak, dan terlalu banyak simpul dapat menurunkan laju bingkai hingga tidak lagi mulus.

Hasilnya adalah pengguliran yang tersendat dan lambat, sehingga antarmuka terasa tidak responsif, secepat apa pun bagian aplikasi lainnya.

Anda dapat mengonfirmasi masalah ini di panel Memori DevTools peramban, yang melaporkan jumlah simpul DOM pada halaman. Daftar yang membuat ribuan simpul akan terlihat jelas di sini.

Mengamati jumlah tersebut membengkak saat Anda merender lebih banyak elemen memberikan bukti konkret bahwa ukuran DOM adalah hambatannya.

Virtualisasi, yang terkadang disebut teknik jendela, hanya merender elemen yang sedang terlihat beserta sedikit penyangga, bukan seluruh daftar. Saat Anda menggulir, elemen yang memasuki tampilan dipasang dan elemen yang meninggalkan tampilan dilepas.

Dengan demikian, DOM aktif tetap kecil terlepas dari jumlah elemen dalam kumpulan data, sehingga ukuran DOM tidak bergantung pada ukuran kumpulan data.

Jendela yang terlihat diturunkan dari posisi gulir, tinggi wadah, dan tinggi elemen. Membagi tinggi area pandang dengan tinggi elemen memberikan perkiraan jumlah baris yang dapat ditampung, sedangkan offset gulir menunjukkan baris mana yang dimaksud.

Pustaka menggunakan angka-angka ini untuk menentukan bagian elemen yang tepat untuk dirender pada setiap saat.

Beberapa pustaka menerapkan teknik jendela. react-virtualized kaya fitur tetapi berukuran lebih besar, react-window adalah penulisan ulang yang lebih kecil dan terfokus dari penulis yang sama, sedangkan TanStack Virtual adalah opsi modern tanpa antarmuka.

Untuk sebagian besar daftar, react-window menawarkan keseimbangan yang sangat baik antara kesederhanaan dan kinerja, itulah sebabnya kursus ini berfokus padanya.

Virtualisasi memberikan manfaat ketika daftar berukuran panjang, kira-kira beberapa ratus baris atau lebih, atau ketika baris berisi banyak gambar dan komponen bertingkat. Dalam kasus-kasus inilah ukuran DOM benar-benar menimbulkan masalah.

Umpan tanpa akhir, tabel data besar, dan riwayat percakapan adalah contoh situasi ketika teknik jendela menjadi penting, bukan sekadar pilihan.

Untuk daftar pendek yang hanya berisi beberapa lusin elemen sederhana, virtualisasi menambah kerumitan tanpa manfaat yang berarti. Beban tambahan dari pemosisian absolut dan pengukuran bahkan dapat menghasilkan dampak keseluruhan yang negatif.

Simpan teknik jendela untuk kumpulan data yang benar-benar besar; untuk kumpulan data kecil, pemetaan biasa lebih sederhana dan sudah cukup cepat.

Dengan teknik jendela, daftar berisi seratus ribu elemen hanya menyimpan segelintir elemen yang terlihat di DOM, sehingga perenderan awal berlangsung cepat, penggunaan memori tetap rendah, dan pengguliran terasa mulus.

Anda menukar sedikit kerumitan dalam penyiapan dengan kinerja yang tidak lagi bergantung pada jumlah data, dan inilah janji utama virtualisasi.

Tentukan kapan virtualisasi layak digunakan.

Merender ribuan simpul DOM memperbesar biaya tata letak, penggunaan memori, dan kegagapan saat menggulir, yang dapat Anda konfirmasi melalui jumlah simpul di DevTools. Virtualisasi hanya merender jendela yang terlihat beserta penyangga, sehingga DOM tetap kecil.

react-window adalah pilihan yang terfokus dan ringan di antara react-virtualized dan TanStack Virtual. Gunakan untuk daftar besar atau berat, dan jangan gunakan untuk daftar pendek dan sederhana.