It’s #FrontendFriday – React 19 Beta: Ein erster Einblick - Business -Software- und IT-Blog

Seit dem 25.04.2024 ist die React 19 Beta verfügbar. Im heutigen #FrontendFriday schauen wir uns die wichtigsten Neuerungen an!

React 19 Beta: Ein erster Einblick

Über zwei Jahre hat es vom React 18.0 Release bis zur React 19 Beta gedauert, aber am 25. April 2024 war es endlich soweit: Meta Platforms hat offiziell die React 19 Beta vorgestellt.

Wichtig: Dieser Beta-Release ist für Library-Entwickler gedacht, um sich auf React 19 vorzubereiten. App-Entwickler sollten auf Version 18.3.0 aktualisieren und auf die stabile Version von React 19 warten.

Neue Features und Verbesserungen

useTransition

Ein häufiges Szenario im Frontend ist das Absenden eines Formulars, welches eine gewisse Zeit benötigt, um in der API verarbeitet zu werden. Während dieser Zeit zeigen wir einen „pending“ Zustand an, indem wir beispielsweise den Absenden-Button ausgrauen. Wenn die Verarbeitung erfolgreich ist, leiten wir den Nutzer weiter; bei einem Fehler zeigen wir eine Fehlermeldung an.

In React 18 musste dieser „pending“ Zustand manuell mit useState implementiert werden. Das konnte bei mehreren asynchronen Aufrufen zu Problemen führen und zu einem inkonsistenten Status führen.

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);

  const handleSubmit = async () => {
    setIsPending(true);
    const error = await updateName(name);
    setIsPending(false);
    if (error) {
      setError(error);
      return;
    } 
    redirect("/path");
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

React 19 fügt eine Unterstützung für asynchrone Funktionen in Transitions hinzu. Pending States, Fehlermeldungen und sonstige Aktualisierungen werden automatisch verarbeitet. Dafür kann man useTransition nutzen. Dies setzt den Status isPending sofort auf true, führt den API-Aufruf durch und setzt isPending nach Abschluss wieder auf false. Dadurch wird gewährleistet das im Frontend alle Änderungen konsistent und reaktionsnah angezeigt werden.

function UpdateName() {
  const [name, setName] = useState("");
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      } 
      redirect("/path");
    })
  };

  return (
    <div>
      <input value={name} onChange={(event) => setName(event.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

useActionState

Der neue useActionState Hook ist speziell für den Einsatz mit <form> gedacht. In React 19 werden die neuen Actions auch in das <form> Feature von react-dom integriert und können dort genutzt werden.

Beispiel: Ein Formular, das den Namen des Nutzers ändert. Bei Klick auf „Absenden“ wird die Anfrage verarbeitet, der Button wird ausgegraut, und bei Erfolg wird der neue Name angezeigt.

function UpdateName() {
  const [state, formAction, pending] = useActionState(
    async (prevState, formData) => {
      const {error, newName} = await updateName(formData.get('name'));
      if (error) {
        return {error, name: prevState.name};
      }
      return {error: null, name: newName};
    },
    {error: null, name: ''},
  );

  return (
    <form action={formAction}>
      {state.name && <div>Current name: {state.name}</div>}
      <input name="name" placeholder="New name" />
      <button type="submit" disabled={pending}>
        submit
      </button>
      <div>{state.error}</div>
    </form>
  );
}

useActionState gibt drei Parameter zurück:

pending (boolean): Gibt den Zustand der API-Anfrage an.
formAction: Callback zu der <form>
state: Enthält die aktuellsten Rückgabewerte von der API-Anfrage.

Wir übergeben 2 Parameter an useActionState(fn, initialState):

fn: Die Funktion, die aufgerufen wird.
initialState: Der initiale Wert, den der State haben soll.

In unserem Beispiel wird über die updateName Funktion der API-Call durchgeführt und der Name zurückgegeben. Wenn die Anfrage erfolgreich ist, wird der neue Name in den State gesetzt. Bei einem Fehler wird prevState.name in den State gesetzt und eine Fehlermeldung hinzugefügt. Damit haben wir den letzten validen Namen in unserer Ausgabe.

useFormStatus

useFormStatus liest den Status des <form>, als ob das Formular ein Context Provider ist.

useOptimistic

Mit useOptimistic können wir dem Benutzer zeigen, wie das Ergebnis eines API-Calls aussehen wird, während dieser noch verarbeitet wird.

Neue API: use

React 19 bietet eine neue Möglichkeit, Ressourcen zu rendern. use wartet, bis die Ressource verfügbar ist (bzw. der Promise resolved ist), bevor es weitergeht. Im folgenden Beispiel werden die Kommentare erst dann angezeigt sobald diese auch tatsächlich verfügbar sind.

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>
  )
}

Die use API ist noch in der Entwicklung. Es gibt noch offene Punkte, wie zum Beispiel das Error Handling und verschiedene Nutzungsmöglichkeiten.

React Server Components (RSC)

Normalerweise werden Komponenten clientseitig (CSR) gerendert, also im Browser des Nutzers. Mit den neuen React Server Components (RSC) bietet React 19 die Möglichkeit, Komponenten direkt serverseitig (SSR) zu rendern. Der größte Vorteil ist, dass die Ladezeiten extrem gesenkt werden können. Der Server übernimmt das Rendern der Komponente und sendet am Schluss nur die gerenderte Komponente als HTML an den Client. Der Nachteil ist, dass diese Komponente nicht mehr re-rendert werden kann.

Weitere Verbesserungen

React 19 bietet noch weitere Verbesserungen, die ihr im offiziellen React 19 Blog nachlesen könnt!

Fazit

Die Neuerungen in React 19 könnten ein Game Changer in der React-Entwicklung sein. Die React Server Components können zukünftige React-Anwendungen noch effizienter gestalten, und die neuen Hooks vereinfachen die Entwicklung erheblich.

Ein Release-Datum für React 19 gibt es leider noch nicht.

Quellen:

Mehr zu Softwareentwicklung erfahren