Een half jaar na de eerste aankondiging, is daar React 18. Een nieuwe major versie van React. Het overkoepelende thema van React 18 is concurrency. Mijn excuses voor het Engelse woord, maar gelijktijdigheid bekt toch minder lekker.
In React 18 is er veel gewijzigd om werk te ‘plannen’ en om ontwikkelaars de kans te geven invloed uit te oefenen op dat proces. Ik zal je kort meenemen in de belangrijkste ontwikkelingen binnen deze versie.
1. Transition API, geef prioriteit aan je opdrachten
Alles wat je doet in React: invoer in een tekstveld, animaties en state updates. Het gaat allemaal door de dispatcher. De dispatcher van React bepaalt welk werk op welk moment uitgevoerd moet worden. De dispatcher kan alleen niet altijd goed inschatten welk werk belangrijk is en wat niet.
Als de dispatcher het werk verkeerd inschat, kan het zijn dat je tekstinvoer niet in beeld komt, omdat het proces bezig is met bijvoorbeeld een XHR requests of zware taken. React 18 heeft de Transition API, waarmee ontwikkelaars invloed kunnen uitoefenen op de prioriteiten in de dispatcher. Prioritering aanbrengen in React 18, doe je als volgt:
import { startTransition } from 'react';
const onInput = (event) => {
// We updaten de input waarde. Dit heeft hoge prioriteit, omdat we
// de gebruiker het gevoel willen geven dat alles soepel loopt.
setInput(event.target.value);
startTransition(() => {
// Zwaar werk, zoals het filteren waardoor een XHR request
// gestart wordt.
setFilter({
...filters,
[event.target.name]: event.target.value,
});
});
};
Er is ook de useTransition hook waarmee je een pending status ontvangt van de transition callback. Zo kun je bijvoorbeeld een laad spinner laten zien terwijl het zware werk wordt uitgevoerd.
2. Batcher, samenvoegen van state updates, consistenter
Van deze ontwikkeling ga je als ontwikkelaar minder merken. In React voor versie 18 was er al een batcher aanwezig. Je voegt de state updates samen bij de volgende code:
setInput('Mijn waarde');
setLabel('Mijn label');
setVisibility(true);
Zo worden de state updates samengevoegd in een batch. En die batch wordt in één keer uitgevoerd. Dat voorkomt dat je component meerdere keren re-rendered.
Het ‘probleem’ in React voor versie 18, was dat het niet altijd gebatched werd.
const onClick = (event) => {
// Wordt gebatched
setInput(event.target.value);
setVisibility(true);
};
const onClick = (event) => {
fetch('/api')
.then((res) => res.json())
.then((res) => {
// Wordt niet gebatched in React < 18
setInput(event.target.value);
setVisibility(true);
});
};
In React 18 worden alle opvolgende state updates gebatched. Daarmee is het een stuk consistenter geworden en komt het de snelheid van React apps ten goede.
3. Server-side rendered, laadt onderdelen van je app op een later moment
Als je React in een server-side rendered modus gebruikt, dan ontdek je nog meer verbeteringen. Zoals de Suspense API, als je het mij vraag de belangrijkste verbetering.
Voor React 18 is het server-side renderen van React alles of niets. Je hebt data en je hebt een app, die worden op de server volledig gerendeerd. Dit kan zwaar zijn, waardoor het lang kan duren voordat de server de app teruggeeft. En als de server de app teruggeeft, dan zijn alle onderdelen ingeladen.
Met de Suspense API kun je aangeven welke onderdelen van de applicatie later ingeladen kunnen worden. De Suspense API geeft de mogelijkheid om de server al de app als stream terug te geven, en de Suspense onderdelen later te sturen. Met de Suspense API is het daarbij ook mogelijk om een laad spinner te tonen waar content gaat komen. Je importeert de onderdelen als volgt in de Suspense API:
import { lazy } from 'react';
const Comments = lazy(() => import('./Comments.js'));
<Suspense fallback={<Spinner />}>
<Comments />
</Suspense>
Als je afhankelijk bent van een server-side framework voor het renderen van React, dan moet je mogelijk nog even wachten. Next.JS heeft al wel een alpha beschikbaar om de Suspense API te gebruiken.
Klaar voor de start
React 18 is beschikbaar en kan gedownload worden via je favoriete package manager. Het React team heeft verschillende handleidingen om de upgrade zo soepel mogelijk te laten verlopen. Laat het upgraden maar beginnen!
Client: https://github.com/reactwg/react-18/discussions/6
Server: https://github.com/reactwg/react-18/discussions/22
Een aantal bronnen en referenties:
