Bouw infinite scroll in React met een kleine IntersectionObserver-hook, zonder package, en houd lange feeds daarna snel met virtualisatie. Live demo's en code om te kopiëren.
Zet een leeg sentinel-element na het laatste item en volg het met IntersectionObserver. Als het binnen een paar honderd pixels van de viewport komt, haalt u de volgende pagina op en voegt u die toe. Een hook van twintig regels doet dit zonder library. Zodra de lijst duizenden rijen bereikt, voegt u virtualisatie toe zodat alleen zichtbare rijen in de DOM bestaan.
Opties van IntersectionObserver die ertoe doen voor infinite scroll
Beide demo's hieronder draaien op deze pagina. De eerste laadt nep-pagina's met resultaten terwijl u door het paneel scrolt; de tweede scrolt door tienduizend rijen terwijl hij alleen de ongeveer twintig tekent die u kunt zien. De code voor elk staat eronder, klaar om te kopiëren.
Nee. IntersectionObserver is sinds 2019 beschikbaar in alle grote browsers, en een kleine hook dekt het gangbare geval. Een library voor data-fetching met ingebouwde hulpmiddelen voor paginering is de moeite waard als u er al een gebruikt om verzoeken te cachen.
Virtualisatie rendert alleen de rijen binnen het zichtbare venster plus een kleine buffer, gepositioneerd in een spacer met de volledige hoogte van de lijst. Gebruik het als de DOM duizenden rijen bevat en scrollen of typen begint te haperen. @tanstack/react-virtual met de hook useVirtualizer is een gangbare keuze.
Crawlers van zoekmachines scrollen niet zoals mensen, dus content die pas na scrollen verschijnt, wordt mogelijk nooit gezien. Onderbouw de feed met echte gepagineerde URL's zoals ?page=2 die op zichzelf laden, en link ernaar.
Meestal maakt het effect de observer bij elke render opnieuw aan omdat de callback een andere identiteit krijgt, of is de eerste pagina te kort om de sentinel uit beeld te duwen. Bewaar de laatste callback in een ref en zorg dat elke pagina meer dan de viewport vult.
Geeft een ref voor de sentinel terug. De laatste onLoadMore wordt in een ref bewaard, zodat de observer één keer per wijziging van enabled wordt aangemaakt en niet bij elke render.
De loading-vlag voorkomt dubbele verzoeken, en hasMore schakelt de observer aan het einde uit.
Installeer met npm install @tanstack/react-virtual. Het buitenste vak scrolt, het binnenste vak is zo hoog als de hele lijst, en elke zichtbare rij wordt met translateY op zijn plek gezet.
Alleen rijen dicht bij het zichtbare venster worden gerenderd. estimateSize is de rijhoogte in pixels.
Demo: een feed die laadt terwijl u scrolt
Scroll binnen het paneel. Telkens als de sentinel in bereik komt, verschijnt een nieuwe pagina van tien items, tot acht pagina's.
Feeddemo
Bericht {n}
Laden...
U hebt het einde bereikt.
Meer laden
{items} items, pagina {page} van {last}
Opnieuw beginnen
Demo: 10.000 rijen, alleen de zichtbare gerenderd
Scroll door de lijst en zie hoe weinig rijen er op elk moment echt in de pagina bestaan.
Demo van een virtuele lijst
Rij {n}
{shown} van {total} rijen gerenderd
Gratis beginnen · Geen creditcard nodig