React ist tot, lang lebe React - React 19 ist da

Die Welt der Frontend-Entwicklung hat sich erneut verändert und diesmal ist React 19 der Vorreiter. Mit dieser Version bringt React eine Vielzahl neuer Funktionen und Verbesserungen. Aber die wohl aufregendste Neuerung ist der brandneue Compiler, welcher React 19 bereits voraussetzt. In diesem Artikel werfen wir einen detaillierten Blick auf die wichtigsten Änderungen und tauchen in die Funktionen und Vorteile dieses neuen Compilers ein. Zudem wird es einen kurzen Überblick über die anderen Neuerungen geben. Bevor wir jedoch zu tief einsteigen, sei erwähnt, dass die neue Version noch als Release Candidate gekennzeichnet ist. Die neuen Features sind also alle noch mit Vorsicht zu genießen.

Was genau ist neu in React 19?

Einführung eines neuen Compilers

Ein Kernelement der neuen Version ist der neue Compiler, der neben React 19 erscheint. Er wurde entwickelt, um den kompilierten Code effizienter zu machen und so die Leistung zu optimieren. Dadurch sollen sich Entwickler zukünftig weniger Gedanken um Performance-Optimierungen machen. Der React Compiler ist das Herzstück der neuen Version und bringt viele Eigenschaften mit sich. Zum einen ist er als Open-Source-Projekt verfügbar, zum anderen arbeitet er als Build-Time-Only-Tool und benötigt daher keine Laufzeitunterstützung. Außerdem wird derzeit auch an einer Rust Version gearbeitet, welche mit Blick auf die Performance nochmal besser werden soll [1]. Um die Arbeit mit dem Compiler zu erleichtern, gibt es auch ein dazugehöriges ESLint Plugin. [2]

Der initiale Release des React Compilers konzentriert sich hauptsächlich auf die Verbesserung der Update-Performance (Re-Rendering bestehender Komponenten und Memoization von Hooks), was besonders bei komplexen Anwendungen von Vorteil ist. Bisher wurde jegliche Art von Memoizations durch Hooks, wie useMemo, useCallback und React.memo, realisiert. Mit Hilfe des Compilers werden solche Stellen im Code jetzt vollautomatisiert. Heißt konkret: Das, was nicht neu berechnet werden muss, wird auch nicht neu berechnet. [2]

React 18 ohne Compiler

const Component = () => {
  const [count, setCount] = useState(0);
  const calculation = useMemo(() => expensiveCalculation(count), [count]);

  return (
    <div>
 Calculation: {calculation}
      …
    </div>
  );
};

React 19 mit Compiler

const Component = () => {
  const [count, setCount] = useState(0);
  // memoization without useMemo
  const calculation = expensiveCalculation(count)

  return (
    <div>
 Calculation: {calculation}
      …
    </div>
  );
};

Gleiches gilt für das Re-Rendering von Komponenten. Folgendes Beispiel zeigt eine Komponente zur Anzeige von ToDos und eine Komponente, um weitere Todos hinzuzufügen. Wenn keinerlei Memoization hinzugefügt ist, wird die Komponente und all ihre Kinder-Komponenten vollständig neu gerendert, sobald sich die Liste von ToDos ändert. Mit Hilfe des React Compilers und der dazugehörigen Memoization wird automatisch erkannt, dass die Komponente zum Hinzufügen von ToDos (AddNewTodoComponent) unabhängig von den angezeigten ToDos ist und dementsprechend nicht neu gerendert werden muss.

const TodoList = () => {
  const todos = useTodos();
  return (
    <div>
      <span>{todos.length} todos</span>
      {todos.map((todo) => (
        <TodoEntry key={todo.id} todo={todo} />
      ))}
      <AddNewTodoComponent />
    </div>
  );
}

Fazit: Der neue React Compiler eliminiert die Notwendigkeit von useMemo und useCallback, was zu einer effizienteren und schlankeren Codebasis führt.

Server Components

Bisher wurden React-Komponenten lediglich clientseitig gerendert. Mit Next.js gibt es seit einiger Zeit die Möglichkeit, Anwendungen mit Server Components zu bauen. Hierbei handelt es sich um Komponenten, die lediglich auf dem Server gerendert werden. Mit React 19 werden diese nun auch voll integriert. Bei der Verwendung gilt es zwischen Server Components mit und ohne Server zu unterscheiden. Ohne Server bedeutet dabei, dass das Server Side Rendering zur Build-Time durchgeführt wird und so statische Inhalte (z.B. aus unterschiedlichen Dateien) eingelesen werden können. Im Gegensatz dazu werden die Server Components unter der Nutzung eines Web Servers bei jeder Anfrage neu gerendert. [4] Da die Ausführung auf dem Server stattfindet, können Server Actions genutzt werden und die Komponenten müssen keine zusätzliche API ansprechen. Dadurch können etwa Datenbankabfragen direkt durchgeführt werden. [3]

import db from './database';
export Todo = async ({id}) => {
  const todo = await db.todos.get(id);
  return (
    <div>
      <Author id={todo.authorId} />
      <p>{todo}</p>
    </div>
  );
}

Vorteile von Server Components:

• SEO: Bessere Sichtbarkeit in Suchmaschinen, da der Inhalt serverseitig gerendert wird.
• Performance: Schnellerer initialer Pageload und insgesamt bessere Performance durch serverseitige Ausführung.
• Server Side Execution: Bessere Handhabung von API-Calls und anderen serverseitigen Aufgaben.
• Build-Time Rendering: Komponenten können zur Build-Time gerendert und dann als statischer Content ausgeliefert werden.

Server Actions

Neben Server Components werden mit React 19 auch Server Actions eingeführt. Hierbei wird es möglich, asynchrone Funktionen auf dem Server auszuführen. Hier genügt eine Annotation mit ‘use server’, um eine Action als serverseitige Action zu definieren. Wenn eine solche Funktion aufgerufen wird, schickt React eine Anfrage an den Server, auf dem dann die Funktion aufgerufen wird. [5] Eine Server Action kann etwa wie folgt aussehen:

"use server";

export createTodoAction = async () => {
  await db.todos.create();
}

Diese Server Action kann dann sowohl bei Server Components, als auch bei Client Components (mit “use client” annotiert) eingebunden werden. So kann selbst bei einer Komponente, in welcher die Action auf dem Client getriggert werden soll, diese trotzdem server-seitig durchgeführt werden. [5]

Beispiel:

“use client”
import {createTodoAction} from './actions';

const Overview = () => {
  …
  <button onClick={createTodoAction} />
  …
}

Neue Hooks und weitere Features

React 19 bringt eine Vielzahl neuer Hooks und Features, welche die Entwicklung vereinfachen und optimieren.

Actions

Eine häufige Aufgabe in React-Apps ist die Durchführung von Datenmutationen und die anschließende Aktualisierung des Zustands. Funktionen die solche asynchronen Transitionen benutzen, werden als "Actions" bezeichnet. Bisher mussten Entwickler manuell mit Pending-Zuständen, Fehlern und optimistischen Updates umgehen. Dies konnte etwa durch useState realisiert werden. Mit React 19 wird dies durch die Einführung von Actions vereinfacht. Dies kann mit Hilfe von useTransition etwa wie folgt aussehen: [3]

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

use( ) - Die neue API für Promises und Contexts

Der use Hook stellt eine neue Schnittstelle dar und ermöglicht es, auf Ressourcen während des Renderns zuzugreifen, was weniger Bedarf an useEffect und useState bedeutet. Ressourcen können in diesem Fall etwa Promises oder Contexts sein. [3]

import { use } from 'react';

const NewsComponent = ({ newsPromise }) => {
  const news = use(newsPromise);
  const theme = use(ThemeContext);
  // ...

Weitere Features und Hooks

Ref als Prop

Zukünftig wird es nicht mehr nötigsein forwardRef zu benutzen um ein ref durchzureichen. Ref wird dementsprechend ein standard prop für Komponenten. [3]

useOptimistic

Der useOptimistic Hook ermöglicht temporäre Updates mit optimistischen Werten. Dies ist besonders nützlich, wenn man dem Benutzer sofortiges Feedback geben möchte, während die tatsächlichen Daten noch verarbeitet werden. [3]

useFormStatus

Der useFormStatus Hook kann den State des Formulars lesen und ermöglicht so eine bessere Handhabung von Formularzuständen und Validierungen in untergeordneten Komponenten. [3]

Neben den hier genannten Features gibt es noch weitere kleine Neuerungen, die für den ein oder anderen sicherlich auch interessant sind. Dafür möchte ich an dieser Stelle aber direkt auf die Release Notes(https://react.dev/blog/2024/04/25/react-19) von React 19 hinweisen.

Fazit

React 19 markiert einen bedeutenden Fortschritt in der Frontend-Entwicklung. Der neue Compiler bringt nicht nur eine drastisch verbesserte Performance, sondern auch eine Vielzahl von neuen Möglichkeiten und Optimierungen, die Entwicklern das Leben erleichtern. Mit den neuen Tools und Verbesserungen wird die Entwicklung von React-Anwendungen weitaus effizienter und leistungsfähiger als zuvor.

Quellen

[1] React Compiler Development Guide (Abrufdatum: 12.07.2024)

[2] React Compiler (Abrufdatum: 28.06.2024)

[3] React 19 RC (Abrufdatum: 28.06.2024)

[4] React Server Components (Abrufdatum: 12.07.2024)

[5] Server Actions (Abrufdatum: 28.06.2024)