De nieuwe toolbox van React 19

React 19 introduceert een reeks nieuwe functies die development eenvoudiger en efficiënter maken. De afgelopen tijd kregen we verschillende vragen over wat deze update betekent voor jou en je website of webapplicatie. Daarom leggen we in dit artikel de belangrijkste veranderingen uit en hoe je je webontwikkeling kunt verbeteren met React 19. Is React helemaal nieuw voor je, in ons artikel over NextJS en React vind je meer informatie over wat React is en wat je er mee kan.

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 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 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. Heb je vragen of tips over het upgraden naar React 19, dan horen we dat graag in de reacties hieronder.

Deel dit artikel