Het probleem van grote lijsten renderen

Stel dat u een array met tienduizend items doorloopt en voor elk item een li rendert. React maakt dan plichtsgetrouw tienduizend DOM-knooppunten, ook al passen er tegelijk maar een paar dozijn op het scherm.

De meeste van die knooppunten staan buiten beeld en zijn onzichtbaar, maar de browser moet ze allemaal aanmaken, indelen en bijhouden.

Grote DOM-bomen kosten de browser daadwerkelijk veel werk. De indeling, het opnieuw berekenen van stijlen en het geheugengebruik nemen allemaal toe met het aantal knooppunten, waardoor een enorme lijst de eerste render vertraagt en meer geheugen gebruikt.

Zelfs eenvoudige interacties kunnen haperen wanneer de engine tienduizenden knooppunten moet bijhouden en opnieuw moet indelen.

Bij een enorme lijst merken gebruikers de problemen vooral tijdens het scrollen. De browser tekent het scherm opnieuw en berekent de indeling mogelijk opnieuw terwijl de inhoud verschuift. Bij te veel knooppunten daalt de beeldsnelheid onder het niveau van vloeiende weergave.

Het resultaat is schokkerig en vertraagd scrollen, waardoor de interface niet reageert, hoe snel de rest van de app ook is.

U kunt het probleem bevestigen in het geheugenpaneel van de browser-DevTools, dat het aantal DOM-knooppunten op de pagina weergeeft. Een lijst die duizenden knooppunten aanmaakt, valt hier duidelijk op.

Als u ziet hoe dat aantal snel oploopt wanneer u meer items rendert, hebt u concreet bewijs dat de DOM-grootte het knelpunt is.

Virtualisatie, ook wel venstering genoemd, rendert alleen de items die momenteel zichtbaar zijn, plus een kleine buffer, in plaats van de hele lijst. Terwijl u scrollt, worden items die in beeld komen aan de DOM toegevoegd en items die uit beeld verdwijnen verwijderd.

Daardoor blijft de actieve DOM klein, ongeacht hoeveel items de gegevens bevatten, en staat de DOM-grootte los van de grootte van de gegevensset.

Het zichtbare venster wordt afgeleid van de scrollpositie, de hoogte van de container en de hoogte van een item. Als u de hoogte van het weergavegebied deelt door de itemhoogte, weet u ongeveer hoeveel rijen erin passen; de scrollverschuiving geeft aan om welke rijen het gaat.

De bibliotheek gebruikt deze getallen om op elk moment precies te bepalen welk deel van de items moet worden gerenderd.

Verschillende bibliotheken implementeren venstering. react-virtualized biedt veel functies maar is groter, react-window is een kleinere, gerichte herschrijving door dezelfde auteur en TanStack Virtual is een moderne optie zonder ingebouwde gebruikersinterface.

Voor de meeste lijsten biedt react-window een uitstekende balans tussen eenvoud en prestaties. Daarom richt deze cursus zich daarop.

Virtualisatie levert voordeel op bij lange lijsten, grofweg enkele honderden rijen of meer, of wanneer rijen veel afbeeldingen en geneste componenten bevatten. In die gevallen vormt de DOM-grootte echt een probleem.

Oneindige feeds, grote gegevenstabellen en chatgeschiedenissen zijn typische situaties waarin venstering noodzakelijk en niet langer optioneel is.

Voor korte lijsten met enkele tientallen eenvoudige items voegt virtualisatie complexiteit toe zonder merkbaar voordeel. De overhead van absolute positionering en metingen kan zelfs per saldo nadelig zijn.

Gebruik venstering alleen voor echt grote gegevenssets; voor kleine gegevenssets is een gewone map eenvoudiger en snel genoeg.

Met venstering houdt een lijst met honderdduizend items alleen de paar zichtbare items in de DOM. Daardoor is de eerste render snel, blijft het geheugengebruik laag en verloopt het scrollen vloeiend.

U ruilt wat extra complexiteit bij het instellen in voor prestaties die niet langer afhangen van de hoeveelheid gegevens. Dat is de kernbelofte van virtualisatie.

Het renderen van duizenden DOM-knooppunten verhoogt de kosten voor de indeling, het geheugengebruik en schokkerig scrollen. U kunt dit bevestigen via het aantal knooppunten in DevTools. Virtualisatie rendert alleen het zichtbare venster plus een buffer, zodat de DOM klein blijft.

react-window is een gerichte, lichte keuze naast react-virtualized en TanStack Virtual. Gebruik het voor grote of zware lijsten en laat het achterwege voor korte, eenvoudige lijsten.