Lazyloading is een techniek die je kunt gebruiken om de prestaties van je React-applicatie te verbeteren. In plaats van alle componenten in één keer te laden wanneer de applicatie start, met lazyloading laad je alleen de componenten die nodig zijn voor het huidige weergave. Dit kan de laadtijd van je app aanzienlijk verminderen, vooral als je app veel grote componenten heeft.
Hier zijn de stappen om lazy loading in een React-applicatie te implementeren:
1. Begin door React’s ingebouwde lazy() functie te importeren samen met Suspense.
```
import React, { lazy, Suspense } from ‘react’;
```
1. Gebruik de React.lazy() functie om de componenten die je wilt lazyload te definiëren. Merk op dat je dit moet doen buiten je functionele component.
```
const LazyComponent = lazy(() => import(‘./ComponentPath’));
```
De lazy functie neemt een functie die een dynamische import retourneert. Hiermee wordt de LazyComponent pas geladen als deze voor het eerst wordt gerenderd.
1. In je rendermethode, gebruik je de Suspense-component van React om het laden van je lazy component aan te geven. De fallback prop is wat er gerenderd wordt terwijl de lazy component laadt.
```
En dat is alles, je hebt lazy loading geïmplementeerd.
Merk op dat dit slechts een basisimplementatie is. In een echte wereld applicatie wil je misschien een mooie loader of een placeholdercomponent tonen terwijl je component laadt.
Hier is een compleet voorbeeld van hoe je het zou kunnen implementeren:
``` import React, { lazy, Suspense } from ‘react’;
const LazyComponent = lazy(() => import(‘./ComponentPath’)); function MyComponent() { return (Zorg er ook voor dat je webserver correct is geconfigureerd. Wanneer je deze techniek gebruikt, zal webpack je code opsplitsen in verschillende bundels, dus je moet ervoor zorgen dat je server deze bestanden correct kan serveren.
Als je Create React App gebruikt, is dit al voor je geconfigureerd. Als je je eigen bouwsysteem instelt, moet je ervoor zorgen dat je het correct configureert.
