Tabel dan daftar yang sangat besar dapat memperlambat performa situs Anda secara signifikan. Virtualisasi dapat membantu!
react-window adalah
library yang memungkinkan daftar besar dirender secara efisien.
Berikut adalah contoh daftar yang berisi 1.000 baris yang dirender dengan
react-window. Coba scroll secepat mungkin.
Mengapa ini bermanfaat?
Terkadang Anda perlu menampilkan tabel atau daftar besar yang berisi banyak baris. Memuat setiap item dalam daftar tersebut dapat memengaruhi performa secara signifikan.
Virtualisasi daftar, atau "windowing", adalah konsep hanya merender apa yang terlihat oleh pengguna. Jumlah elemen yang dirender pada awalnya adalah subset yang sangat kecil dari seluruh daftar dan "jendela" konten yang terlihat bergerak saat pengguna terus men-scroll. Hal ini meningkatkan performa rendering dan scrolling daftar.