Menggabungkan Virtualisasi dengan Pengambilan Data

Gulir tak terbatas memuat lebih banyak data saat pengguna mendekati akhir daftar, alih-alih menggunakan paginasi dengan tombol halaman yang eksplisit. Jika digabungkan dengan virtualisasi, pola ini memungkinkan Anda menjelajahi kumpulan data yang sangat besar dengan lancar.

Daftar hanya menampilkan baris yang terlihat, sementara data baru diambil di latar belakang tepat sebelum pengguna mencapai bagian bawah.

Komponen daftar react-window menerima panggilan balik onItemsRendered yang melaporkan indeks elemen yang sedang ditampilkan. Panggilan ini menyediakan indeks awal dan akhir yang terlihat serta indeks awal dan akhir area pramuat.

Panggilan balik ini menjadi penghubung Anda dengan pengguliran, sehingga Anda dapat mendeteksi seberapa jauh pengguna telah menggulir daftar tanpa menghubungkan peristiwa gulir mentah.

Untuk mengetahui kapan harus mengambil data, bandingkan overscanStopIndex dari onItemsRendered dengan itemCount saat ini. Saat jendela yang ditampilkan mendekati akhir data yang telah dimuat, data tambahan diperlukan.

Menggunakan indeks akhir area pramuat memberi sedikit waktu persiapan, sehingga pengambilan data dipicu sesaat sebelum pengguna benar-benar mencapai baris terakhir.

Saat indeks akhir melewati ambang batas, misalnya ketika jaraknya kurang dari satu layar dari itemCount, panggil fungsi pengambilan data untuk halaman berikutnya. Lindungi pemanggilan ini agar tidak memicu beberapa permintaan yang tumpang tindih.

Penanda pemuatan atau pemeriksaan apakah pengambilan data sedang berlangsung mencegah permintaan duplikat saat pengguna menggulir melalui area pemicu.

Trik yang rapi adalah menetapkan itemCount sebagai jumlah elemen yang telah dimuat ditambah satu selama masih ada data tambahan. Baris tambahan tersebut menampilkan roda pemuatan untuk menandakan bahwa pengambilan data sedang berlangsung.

Setelah data baru tiba, jumlahnya bertambah dan baris roda pemuatan digantikan oleh konten nyata, sehingga umpan balik visual terasa lancar.

Paket pendamping react-window-infinite-loader membungkus logika ini untuk Anda. Anda menyediakan isItemLoaded, loadMoreItems, dan itemCount, lalu paket tersebut memanggil fungsi pemuat saat pengguna menggulir menuju elemen yang belum dimuat.

Paket ini menangani pencatatan rentang yang telah dimuat dan mencegah pemanggilan pemuatan yang tidak perlu, sehingga pengguliran tak terbatas yang andal menjadi lebih sederhana.

Untuk indeks yang belum dimuat, Anda dapat menampilkan baris pengganti atau kerangka alih-alih ruang kosong. Fungsi penampil memeriksa apakah elemen pada suatu indeks telah dimuat dan menampilkan kerangka jika belum.

Kerangka mempertahankan tata letak dan menyampaikan kemajuan, sehingga terasa lebih baik daripada ruang kosong saat halaman berikutnya sedang diambil.

Pengambilan data dapat gagal, jadi tangani kesalahan dengan baik. Anda dapat menampilkan baris kesalahan khusus di bagian akhir, lengkap dengan tombol percobaan ulang yang memanggil kembali fungsi pemuatan untuk rentang yang gagal.

Hal ini menjaga daftar tetap dapat digunakan setelah gangguan dan memberi pengguna cara yang jelas untuk memulihkan keadaan tanpa memuat ulang seluruh halaman.

Ada dua gaya paginasi umum yang memasok data ke daftar tak terbatas. Paginasi berbasis pergeseran meminta data berdasarkan nomor halaman atau jumlah lompatan, sedangkan paginasi berbasis kursor meminta elemen setelah kursor buram yang menunjuk ke elemen terakhir yang terlihat.

Paginasi berbasis kursor umumnya lebih andal untuk data langsung yang berubah-ubah karena menghindari pergeseran dan duplikasi yang dapat ditimbulkan oleh posisi awal saat elemen disisipkan.

useInfiniteQuery dari React Query berpadu secara alami dengan virtualisasi. Fitur ini mengelola halaman yang telah diambil, kursor berikutnya, serta status pemuatan dan kesalahan, sementara react-window menampilkan halaman-halaman yang telah digabung secara efisien.

Anda menggabungkan halaman-halaman tersebut menjadi satu larik untuk daftar dan memanggil fetchNextPage dari ambang batas onItemsRendered, sehingga mendapatkan penyimpanan sementara dan percobaan ulang secara otomatis.

Tentukan kapan harus mengambil lebih banyak data dalam daftar tak terbatas yang divirtualisasi.

Gulir tak terbatas memuat halaman saat pengguna mendekati akhir. onItemsRendered melaporkan indeks, dan membandingkan overscanStopIndex dengan itemCount memberi tahu kapan harus mengambil data, dengan perlindungan terhadap permintaan duplikat.

Gunakan baris pengganti dan baris kesalahan, react-window-infinite-loader untuk pencatatan, serta paginasi berbasis kursor untuk data langsung. React Query useInfiniteQuery mengelola halaman, kursor, dan status bersamaan dengan penampilan melalui react-window.