De nieuwe toolbox van React 19

Actions en Async Transitions:

Eén van de belangrijkste vernieuwingen in React 19 is de introductie van Actions en Async Transitions. Waar je vroeger veel handmatig moest regelen voor het afhandelen van datamutaties en update van je state, zoals je pending state en fouten, wordt dit proces flink vereenvoudigd. De nieuwe useTransition maakt het mogelijk om je data transitions eenvoudig te beheren, waardoor je React App bruikbaar blijft tijdens het ophalen en verwerken van de data.

Wat zijn actions?

Actions zijn functies die gebruik maken van async transitions. Ze beheren dus de dataverzending voor je en bieden meerdere voordelen:

• Pending State: Actions bieden een pending state, die, zoals de naam al doet vermoeden, begint bij het begin van een request en automatisch reset wanneer de uiteindelijk state van de request wordt bijgewerkt.
• Optimistic Updates: Met de nieuwe useOptimistic hook kun je gebruikers direct feedback geven terwijl HTTP-requests worden verwerkt. Wanneer de request faalt, wordt de state update automatisch teruggedraaid.
• Foutafhandeling: Actions zorgen voor foutafhandeling wanneer een HTTP-request faalt, en herstellen optimistische updates indien nodig.

Hieronder zie je een voorbeeld van hoe je een optimistic update kan uitvoeren binnen een action:

import React, { useOptimistic } from 'react';
import { updateArticleTitle } from './api';

const ChangeArticleTitle = ({ currentTitle, onUpdateTitle }) => {
  const [optimisticTitle, setOptimisticTitle] = useOptimistic(currentTitle);

  const submitAction = async formData => {
    const newTitle = formData.get("title");
    setOptimisticTitle(newTitle);
    const updatedTitle = await updateArticleTitle(newTitle);
    onUpdateTitle(updatedTitle);
  };

  return (
    <form onSubmit={submitAction}>
      <p>Current article title: {optimisticTitle}</p>
      <p>
        <label>Change Title:</label>
        <input
          type="text"
          name="title"
          disabled={currentTitle !== optimisticTitle}
        />
      </p>
      <button type="submit">Submit</button>
    </form>
  );
}

export default ChangeArticleTitle;

Andere verbeteringen

• React Compiler: React voerde voorheen geen re-renders (verversen van je pagina-output) uit als de state van je component gewijzigd werd. Met de komst van React 19 heeft het team van React een nieuwe compioler geintroduceerd die klaar is voor de toekomst. Vanaf nu is het verleden tijd om overal maar een useMemo() of useCallback() omheen te gooien, maar je state wijziging wordt direct door de nieuwe compiler opgepakt.
• Server Components: Deze nieuwe componenten worden op de server gerenderd, wat zorgt voor snellere laadtijden en betere SEO-resultaten. We kennen Server Components al als een experimentele feature van React 18, maar in React 19 zijn ze nu echt stabiel. Dat is een belangrijke stap vooruit voor websites die veel verkeer en inhoud verwerken.
• Asset Loading: Met React 19 worden assets zoals afbeeldingen en scripts op de achtergrond geladen, waardoor paginaverschuivingen (layout shifts) soepeler verlopen en de gebruikerservaring verbetert.
• Document Metadata: Met de nieuwe <DocumentHead>-component kun je eenvoudig metadata toevoegen aan je pagina's. Zo kun je vanuit je diepere componentlaag metatags plaatsen, de titel wijzigen of stylesheets laden.
• Web Components: Verbeterde compatibiliteit met Web Components betekent dat je gemakkelijker verschillende technologieën kunt combineren in je project.
• ForwardRef: Zeg gedag tegen forwardRef(), vanaf React 19 is wordt ref automatisch als prop doorgegeven aan je componenten. Dit maakt je code beter leesbaar, makkelijker te typen met typescript en vooral minder complex.

En dit zijn alleen nog maar de highlights. React 19 brengt een boel nieuwe hooks met zich mee. Een compleet overzicht zie hier hier.

Hoe maak je jouw website React 19-ready?

1. Inventariseer je app: Begin met het evalueren van je huidige online React-app om te bepalen welke onderdelen moeten worden bijgewerkt. Maak een lijst van verouderde API's en componenten die je moet moderniseren.
2. Upgrade geleidelijk: Voer de upgrade stapsgewijs uit. Begin met minder kritieke onderdelen van je app om ervaring op te doen met de nieuwe functies van React 19 zonder risico op grote verstoringen.
3. Gebruik codemods: Codemods zijn tools die grote delen van je code automatisch kunnen bijwerken naar de nieuwste React-standaarden. Dit bespaart tijd en moeite, zodat je je kunt concentreren op belangrijkere updates.
4. Maak gebruik van strict mode: Strict Mode helpt je om verouderde functies en API's te identificeren die moeten worden bijgewerkt. Los eventuele problemen die het aangeeft op voordat je live gaat.
5. Grondig testen: Voer uitgebreide tests uit in een testomgeving om ervoor te zorgen dat alles goed werkt. Test de performance, compatibiliteit met verschillende browsers en functionaliteit om bugs te voorkomen. Hoewel bugs tussen verschillende browsers nog zelden voor komen, weet je het immers nooit.

Conclusie

React 19 biedt een breed scala aan verbeteringen die het bouwen en beheren van online React-websites aanzienlijk eenvoudiger maken. Van betere prestaties en SEO tot eenvoudigere data-verwerking en compatibiliteit met Web Components, React 19 is een waardevolle upgrade voor frontend ontwikkelaars. Door de upgrade stapsgewijs en zorgvuldig te plannen, kun je profiteren van deze nieuwe, gave functies zonder grote problemen.

Lees ook: React website laten bouwen in Utrecht.

In 6 stappen je React-project upgraden naar React 19

Een upgrade naar React 19 is in de meeste projecten goed te plannen. De impact verschilt sterk per codebase, maar de volgende stappen werken in de praktijk goed.

• Stap 1: bekijk de breaking changes uit de officiële migratiegids en controleer of je nog componenten gebruikt die zijn vervallen, zoals legacy context of string refs. Deze moet je eerst opschonen.
• Stap 2: zorg dat je projectversie React 18 met de laatste minor patches draait en dat al je tests groen zijn. Een schone basis maakt de upgrade veel rustiger.
• Stap 3: upgrade je React- en React-DOM-pakketten naar versie 19 en draai daarna direct je testsuite. Eventuele fouten geven snel aan waar nog aandacht nodig is.
• Stap 4: vervang forwardRef-implementaties stapsgewijs door direct gebruik van ref als prop. Dit kun je per component doen, want beide patronen werken naast elkaar in de tussentijd.
• Stap 5: gebruik de nieuwe useActionState en useFormStatus voor formulieren en datamutaties die je nog handmatig beheerde. Dit maakt de code korter en minder foutgevoelig.
• Stap 6: test in een staging-omgeving op verschillende browsers en op echte gebruikersscenario’s, niet alleen op je laptop. Vooral interacties met formulieren en suspense-grenzen verdienen aandacht.

Wanneer kies je voor React 19 in een nieuw project?

Voor nieuwe webapplicaties is React 19 vrijwel altijd de logische keuze, vooral als je interactieve interfaces bouwt waar veel data heen en weer gaat tussen gebruiker en server. De combinatie van Actions, Async Transitions en Server Components zorgt voor minder boilerplate en snellere pagina’s. Voor zwaardere applicaties met veel formulieren of data-tabellen verdient React 19 ruimschoots zijn investering terug in onderhoudsgemak.

Voor kleinere websites met vooral statische content is React niet altijd nodig. In die gevallen kan een headless Drupal-opzet of een combinatie met Payload CMS een lichter alternatief zijn dat sneller te onderhouden is.

React 19 in combinatie met Next.js, Drupal en Payload CMS

React draait zelden alleen. In de meeste projecten zit er een framework als Next.js omheen of een CMS aan de achterkant dat de content levert. React 19 werkt goed samen met Next.js 15, dat veel van de nieuwe Server Components-functionaliteit standaard ondersteunt. De combinatie maakt het bouwen van performante, server-renderende pagina’s eenvoudiger.

Voor projecten waarin het CMS losstaat van de front-end, zoals bij een headless of decoupled opzet, past React 19 uitstekend. Drupal of Payload CMS leveren dan de content via een API, terwijl React 19 zorgt voor de interactieve schil eromheen. Op die manier krijg je de redactionele kracht van een volwassen CMS gecombineerd met de moderne front-end mogelijkheden van React 19.

Veelgestelde vragen over React 19

Is React 19 een breaking release?

Voor de meeste projecten valt het mee. React 19 heeft een aantal breaking changes, vooral rond verouderde API’s zoals legacy context en string refs, maar de meeste codebases die al op React 18 draaien kunnen met beperkte aanpassingen mee. Het is wel verstandig om voor de upgrade je test-suite op orde te hebben.

Wat zijn Server Components in React 19?

Server Components zijn React-componenten die volledig op de server worden uitgevoerd. Dat betekent dat ze geen JavaScript naar de browser sturen en dichter bij je databron werken. Voor pagina’s met veel content levert dit een aanzienlijke snelheidswinst op, omdat de browser minder werk hoeft te doen voordat de bezoeker iets ziet.

Wat is het verschil tussen useTransition en Actions?

useTransition bestond al en helpt om updates van de gebruikersinterface niet-blokkerend te houden. Actions zijn een nieuw concept dat is gebouwd op transitions en specifiek bedoeld voor het afhandelen van datamutaties, zoals het versturen van een formulier. Met useActionState combineer je de twee in een patroon dat zowel pending state als fouten netjes opvangt.

Werkt React 19 samen met TypeScript?

Ja, en de samenwerking is verder verbeterd. Doordat ref nu als gewone prop wordt doorgegeven hoef je geen aparte forwardRef-typing meer te schrijven. De nieuwe hooks komen met heldere typedefinities, waardoor je IDE je beter begeleidt en typefouten sneller naar voren komen.

Is React 19 sneller dan React 18?

In de praktijk wel, vooral bij pagina’s die met veel data werken. De combinatie van Server Components, asset loading en de nieuwe document metadata-functionaliteit zorgt voor minder werk in de browser en snellere eerste rendering. De winst hangt sterk af van hoe je applicatie is opgebouwd en welke componenten je serverside laat draaien.

Wat betekent React 19 voor SEO?

Door de volwassen Server Components en de nieuwe document metadata-component is React 19 beter geschikt voor vindbaarheid in zoekmachines. Content kan eerder en completer aan zoekmachines worden geserveerd, en metadata kun je vanuit elk component instellen. Dat is met name fijn voor productpagina’s, blogartikelen en andere pagina’s die je goed wilt laten indexeren.

Wanneer is het zinvol om naar React 19 over te stappen?

Bij een nieuw project ligt React 19 voor de hand. Bij bestaande projecten weeg je de upgrade af tegen je release-planning. Heb je veel formulieren, veel datamutaties of moeite met SEO en performance, dan is de overstap zeker de moeite waard. Loopt je applicatie stabiel en draai je nog op React 17 of ouder, plan dan eerst een upgrade naar React 18 als tussenstap.

Hulp nodig bij React 19?

We bouwen al jaren maatwerk in React, vaak in combinatie met een headless CMS. Voor projecten waarin je React 19 wilt inzetten kun je terecht bij onze React development-pagina. Wil je weten of React 19 voor jouw applicatie de juiste keuze is, of zoek je een team dat je bestaande front-end onder handen kan nemen? We kijken graag met je mee. Lees ook onze andere artikelen over moderne front-ends en headless setups, of bekijk hoe wij Payload CMS inzetten als content-laag onder een React-applicatie.

Deel dit artikel