Créez un infinite scroll en React avec un petit hook IntersectionObserver, sans aucun package, puis gardez les longs flux rapides grâce à la virtualisation. Démos en direct et code à copier.
Placez un élément sentinelle vide après le dernier élément et surveillez-le avec IntersectionObserver. Quand il arrive à quelques centaines de pixels du viewport, récupérez la page suivante et ajoutez-la. Un hook d'une vingtaine de lignes fait cela sans bibliothèque. Quand la liste atteint des milliers de lignes, ajoutez la virtualisation pour que seules les lignes visibles existent dans le DOM.
Les options d'IntersectionObserver qui comptent pour l'infinite scroll
Les deux démos ci-dessous tournent sur cette page. La première charge de fausses pages de résultats pendant que vous faites défiler son panneau ; la seconde fait défiler dix mille lignes tout en n'affichant que la vingtaine que vous voyez. Le code de chacune se trouve en dessous, prêt à copier.
Non. IntersectionObserver est disponible dans tous les grands navigateurs depuis 2019, et un petit hook couvre le cas courant. Une bibliothèque de récupération de données avec des aides à la pagination intégrées vaut le coup si vous en utilisez déjà une pour la mise en cache des requêtes.
La virtualisation n'affiche que les lignes de la fenêtre visible plus une petite marge, positionnées dans un espaceur qui fait toute la hauteur de la liste. Utilisez-la quand le DOM contient des milliers de lignes et que le défilement ou la saisie commencent à ramer. @tanstack/react-virtual et son hook useVirtualizer sont un choix courant.
Les robots d'exploration ne font pas défiler les pages comme les humains, un contenu qui n'apparaît qu'après défilement risque donc de ne jamais être vu. Adossez le flux à de vraies URL paginées comme ?page=2 qui se chargent seules, et créez des liens vers elles.
En général, l'effet recrée l'observer à chaque rendu parce que le callback change d'identité, ou la première page est trop courte pour pousser la sentinelle hors de l'écran. Gardez le dernier callback dans une ref et assurez-vous que chaque page dépasse la hauteur du viewport.
Renvoie une ref pour la sentinelle. Le dernier onLoadMore est conservé dans une ref, l'observer n'est donc créé qu'à chaque changement de enabled, pas à chaque rendu.
Le drapeau loading empêche les doubles requêtes, et hasMore désactive l'observer à la fin.
Installez-le avec npm install @tanstack/react-virtual. La boîte extérieure défile, la boîte intérieure fait la hauteur de toute la liste, et chaque ligne visible est mise en place avec translateY.
Seules les lignes proches de la fenêtre visible sont affichées. estimateSize est la hauteur d'une ligne en pixels.
Démo : un flux qui se charge pendant le défilement
Faites défiler le panneau. Une nouvelle page de dix éléments arrive chaque fois que la sentinelle entre dans la zone, jusqu'à huit pages.
Démo de flux
Publication {n}
Chargement...
Vous êtes arrivé à la fin.
Charger plus
{items} éléments, page {page} sur {last}
Réinitialiser
Démo : 10 000 lignes, seules les visibles sont affichées
Faites défiler la liste et regardez combien peu de lignes existent réellement dans la page à chaque instant.
Démo de liste virtuelle
Ligne {n}
{shown} lignes affichées sur {total}
Commencer gratuitement · Sans carte bancaire