Combiner virtualisation et récupération de données

Le défilement infini charge davantage de données lorsque l’utilisateur approche de la fin de la liste, au lieu d’utiliser une pagination avec des boutons de page explicites. Associé à la virtualisation, il permet de parcourir fluidement d’immenses ensembles de données.

La liste affiche uniquement les lignes visibles, tandis que les nouvelles données sont récupérées en arrière-plan juste avant que l’utilisateur n’atteigne le bas.

Les composants de liste de react-window acceptent un rappel onItemsRendered qui indique quels indices d’éléments sont actuellement rendus. Il fournit les indices de début et de fin de la zone visible ainsi que ceux du sur-rendu.

Ce rappel vous permet de vous connecter au défilement et de déterminer jusqu’où l’utilisateur a parcouru la liste sans configurer vous-même des événements bruts de défilement.

Pour savoir quand charger des données, comparez overscanStopIndex, fourni par onItemsRendered, à la valeur actuelle de itemCount. Lorsque la fenêtre rendue approche de la fin des données chargées, il faut en charger davantage.

Utiliser l’indice de fin du sur-rendu vous donne un peu d’avance et déclenche le chargement légèrement avant que l’utilisateur n’atteigne réellement la toute dernière ligne.

Lorsque l’indice de fin franchit un seuil, par exemple lorsqu’il se trouve à moins d’un écran de itemCount, appelez votre fonction de chargement pour la page suivante. Protégez cet appel afin de ne pas lancer plusieurs requêtes simultanées.

Un indicateur de chargement ou la vérification qu’un chargement est déjà en cours empêche les requêtes en double lorsque l’utilisateur fait défiler la zone de déclenchement.

Une astuce élégante consiste à définir itemCount comme le nombre d’éléments chargés plus un tant qu’il reste des données à charger. La ligne supplémentaire affiche un indicateur de chargement, signalant qu’une récupération est en cours.

Lorsque les nouvelles données arrivent, le nombre d’éléments augmente et la ligne de chargement est remplacée par du contenu réel, ce qui fournit un retour visuel fluide.

Le module complémentaire react-window-infinite-loader prend cette logique en charge pour vous. Vous lui fournissez isItemLoaded, loadMoreItems et itemCount, puis il appelle votre chargeur lorsque l’utilisateur fait défiler la liste vers des lignes non chargées.

Il gère le suivi des plages chargées et empêche les appels de chargement redondants, ce qui simplifie la mise en place d’un défilement infini fiable.

Pour les indices non chargés, vous pouvez afficher des lignes d’attente ou des lignes squelettes plutôt que des espaces vides. La fonction de rendu vérifie si l’élément correspondant à un indice est chargé et affiche un squelette dans le cas contraire.

Les squelettes préservent la mise en page et indiquent la progression, ce qui est plus agréable qu’un espace vide pendant l’arrivée de la page suivante.

Les chargements peuvent échouer : gérez donc les erreurs avec élégance. Vous pouvez afficher à la fin une ligne d’erreur spéciale contenant un bouton de nouvelle tentative qui rappelle la fonction de chargement pour la plage ayant échoué.

La liste reste ainsi utilisable après un incident et l’utilisateur dispose d’un moyen clair de reprendre la navigation sans recharger toute la page.

Deux styles de pagination courants alimentent les listes infinies. La pagination par décalage effectue les requêtes par numéro de page ou par nombre d’éléments à ignorer, tandis que la pagination par curseur demande les éléments qui suivent un curseur opaque pointant vers le dernier élément consulté.

La pagination par curseur est généralement plus fiable pour les données dynamiques, car elle évite les décalages et les doublons que les décalages peuvent provoquer lorsque des éléments sont insérés.

React Query useInfiniteQuery s’associe naturellement à la virtualisation. Il gère les pages récupérées, le curseur suivant ainsi que les états de chargement et d’erreur, tandis que react-window affiche efficacement les pages aplaties.

Aplatissez les pages en un seul tableau pour la liste et appelez fetchNextPage depuis le seuil défini avec onItemsRendered : vous bénéficiez ainsi gratuitement de la mise en cache et des nouvelles tentatives.

Déterminez quand charger davantage de données dans une liste infinie virtualisée.

Le défilement infini charge les pages lorsque l’utilisateur approche de la fin. onItemsRendered indique les indices, et comparer overscanStopIndex à itemCount vous permet de savoir quand charger des données, tout en empêchant les requêtes en double.

Utilisez des lignes d’attente et des lignes d’erreur, react-window-infinite-loader pour le suivi, et la pagination par curseur pour les données dynamiques. React Query useInfiniteQuery gère les pages, les curseurs et les états en parallèle de l’affichage avec react-window.