Combinare virtualizzazione e recupero dei dati

Lo scorrimento infinito carica altri dati quando l'utente si avvicina alla fine della lista, invece di usare la paginazione con pulsanti di pagina espliciti. In combinazione con la virtualizzazione, consente di esplorare enormi quantità di dati in modo fluido.

La lista mostra solo le righe visibili, mentre i nuovi dati vengono recuperati in background poco prima che l'utente raggiunga il fondo.

I componenti lista di react-window accettano un callback onItemsRendered che comunica quali indici degli elementi sono attualmente renderizzati. Fornisce gli indici di inizio e fine degli elementi visibili e di quelli in overscan.

Questo callback è il punto di aggancio allo scorrimento e consente di rilevare quanto l'utente ha già scorso la lista senza collegare direttamente gli eventi di scorrimento.

Per sapere quando recuperare altri dati, confronti overscanStopIndex restituito da onItemsRendered con itemCount corrente. Quando la finestra renderizzata si avvicina alla fine dei dati caricati, servono altri elementi.

Usare l'indice di fine dell'overscan concede un piccolo anticipo e attiva il recupero poco prima che l'utente raggiunga effettivamente l'ultima riga.

Quando l'indice di fine supera una soglia, ad esempio quando si trova a una schermata di distanza da itemCount, chiami la funzione di recupero per la pagina successiva. La protegga per evitare di inviare più richieste sovrapposte.

Un flag di caricamento o il controllo che una richiesta sia già in corso impedisce richieste duplicate mentre l'utente scorre la zona di attivazione.

Un espediente efficace consiste nell'impostare itemCount sul numero di elementi caricati più uno finché esistono altri dati. La riga aggiuntiva visualizza uno spinner, segnalando che il recupero è in corso.

Quando arrivano nuovi dati, il conteggio aumenta e la riga con lo spinner viene sostituita dal contenuto reale, offrendo un feedback visivo fluido.

Il pacchetto complementare react-window-infinite-loader incapsula questa logica. Si forniscono isItemLoaded, loadMoreItems e itemCount e il pacchetto invoca la funzione di caricamento mentre l'utente scorre verso righe non caricate.

Gestisce il tracciamento degli intervalli già caricati e impedisce chiamate di caricamento ridondanti, semplificando la realizzazione di uno scorrimento infinito affidabile.

Per gli indici non caricati è possibile visualizzare righe segnaposto o skeleton invece di lasciare spazi vuoti. La funzione di rendering verifica se l'elemento a un determinato indice è stato caricato e, in caso contrario, mostra uno skeleton.

Gli skeleton preservano il layout e comunicano l'avanzamento, offrendo una percezione migliore rispetto a uno spazio vuoto mentre arriva la pagina successiva.

Il recupero dei dati può fallire, quindi è importante gestire gli errori con attenzione. È possibile visualizzare in fondo una riga di errore speciale con un pulsante per riprovare, che invoca nuovamente la funzione di caricamento per l'intervallo non riuscito.

In questo modo la lista resta utilizzabile dopo un inconveniente e l'utente dispone di un modo chiaro per recuperare senza ricaricare l'intera pagina.

Due stili comuni di paginazione alimentano le liste infinite. La paginazione con offset effettua richieste in base al numero di pagina o al numero di elementi da saltare, mentre quella con cursore richiede gli elementi successivi a un cursore opaco che indica l'ultimo elemento visualizzato.

La paginazione con cursore è generalmente più affidabile per dati dinamici e soggetti a modifiche, perché evita gli spostamenti e le duplicazioni che gli offset possono causare quando vengono inseriti nuovi elementi.

React Query useInfiniteQuery si abbina naturalmente alla virtualizzazione. Gestisce le pagine recuperate, il cursore successivo e gli stati di caricamento ed errore, mentre react-window esegue il rendering efficiente delle pagine appiattite.

Si appiattiscono le pagine in un unico array per la lista e si chiama fetchNextPage quando onItemsRendered raggiunge la soglia, ottenendo caching e retry senza costi aggiuntivi.

Individui quando recuperare altri dati in una lista infinita virtualizzata.

Lo scorrimento infinito carica le pagine quando l'utente si avvicina alla fine. onItemsRendered comunica gli indici e il confronto tra overscanStopIndex e itemCount indica quando effettuare il recupero, impedendo richieste duplicate.

Utilizzi righe segnaposto e di errore, react-window-infinite-loader per la gestione degli intervalli caricati e la paginazione con cursore per i dati dinamici. React Query useInfiniteQuery gestisce pagine, cursori e stati insieme al rendering di react-window.