Etter mye venting annonserte React-teamet torsdag at React 19 endelig er klar i en stabil versjon.

Egentlig skulle React 19 vært ute for lenge siden, men lanseringen har blitt forsinket blant annet på grunn av uenigheter om hvordan <Suspense>-tagen skulle fungere. Kort fortalt så gjorde React-teamet en endring i hvordan Suspense fungerte, som de senere måtte gå ut og beklage.

Etter flere måneder med jobbing og diskusjoner om hvordan denne funksjonaliteten egentlig burde fungere, har React-teamet nå altså kommet i mål.

Det har vært skrevet mye om React 19, så vi skal ikke gjenta alt i denne artikkelen – men nøye oss med å oppsummere det viktigste her:

#1: Actions

React 19 introduserer Actions, som er en nyttig måte å håndtere innsending av data fra skjemaer på.

Med nye hooks som useActionState, useTransition og useFormStatus kan du enklere håndtere det å sende data fra et skjema (<form>) til serveren, optimistiske oppdateringer, feilhåndtering, og mye mer.

Eksempel på hvordan du kan håndtere et skjema i React 19 med useActionState:

// Using <form> Actions and useActionState
function ChangeName({ name, setName }) {
  const [error, submitAction, isPending] = useActionState(
    async (previousState, formData) => {
      const error = await updateName(formData.get("name"));
      if (error) {
        return error;
      }
      redirect("/path");
      return null;
    },
    null,
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>Update</button>
      {error && <p>{error}</p>}
    </form>
  );
}

Marcus Haaland i Bekk skrev litt om dette nylig:

Server vs. klient og framtidas skjemaer i React 19

onsdag 27. november 2024

#2: Nytt use-API

I React 19 har du fått et nytt use-API som brukes for å hente inn verdier fra en promise eller fra en React-context.

Dette kan fungere sammen med Suspense, for eksempel på denne måten der use brukes til å lese en promise – og så vil React "suspende" og vise en fallback ("Loading...") inntil promisen "resolver":

import {use} from 'react';

function Comments({commentsPromise}) {
  // `use` will suspend until the promise resolves.
  const comments = use(commentsPromise);
  return comments.map(comment => <p key={comment.id}>{comment}</p>);
}

function Page({commentsPromise}) {
  // When `use` suspends in Comments,
  // this Suspense boundary will be shown.
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Comments commentsPromise={commentsPromise} />
    </Suspense>
  )
}

Hvis du bruker use til å hente verdier fra en React-context, kan du i motsetning til om du bruker useContext gjøre dette også etter "conditionals" – noe som vil være et brudd på Reacts "Rules of Hooks".

Som i dette eksempelet der use brukes for å finne ut om brukeren har mørk eller lys modus, etter en if-sjekk som gjør at use ikke alltid kjører:

import {use} from 'react';
import ThemeContext from './ThemeContext'

function Heading({children}) {
  if (children == null) {
    return null;
  }
  
  // This would not work with useContext
  // because of the early return.
  const theme = use(ThemeContext);
  return (
    <h1 style={{color: theme.color}}>
      {children}
    </h1>
  );
}

#3: React Server Components

Serverkomponenter har vært i bruk i Next.js helt siden Next.js 13 (to versjoner siden), og man skulle kanskje tro at det er gammelt nytt.

Men serverkomponenter har altså vært eksperimentelt i React frem til nå, selv om Next.js for lengst har implementert det de mener er stabile serverkomponenter. Fra og med React 19 regner imidlertid også React-teamet serverkomponenter som stabilt.

Du kan lese mer om serverkomponenter her.

#4: Støtte for web components / custom elements

Den siste nyheten vi tar med, er at React 19 nå har full støtte for web-komponenter, en web-standard som lar deg lage såkalte "custom elements".

Custom elements ligner på vanlige HTML-elementer som for eksempel <div> eller <article> – med den forskjellen at det er du som bestemmer hva elementene skal gjøre.

React 19 klarer nå alle testene på custom-elements-everywhere.com.

Du finner en oppgraderingsguide for React 19 her.

Nytt rammeverk: «Vi har nesten glemt klienten!»

onsdag 30. oktober 2024