React 19 Actions in der Praxis: Welchen Zweck haben useActionState, use() und der Compiler Retire?

Viele Teams haben die React-Version erhöht und alles andere unverändert gelassen. Die Ladenindikatoren, Fehlerbehandlung und optimistischen Aktualisierungen, die sie vor Jahren geschrieben haben, befinden sich weiterhin im Codebase – schließlich haben die Upgrade-Operationen sie nie beeinträchtigt. Sie wurden lediglich überflüssig. Dies ist eine Übersicht über den manuell geschriebenen Code, den React 19 nun für Sie übernimmt.

Das immer wieder auftretende Muster

Öffnen Sie fast jedes Formkomponente in einem React 19-Projekt, und Sie finden immer das gleiche Muster. Es gibt drei Zustände: einen für das Laden, einen für Fehler und einen für Erfolg. Es gibt einen asynchronen Submit-Handler, der e.preventDefault() aufruft, den Ladenzustand aktiviert, den alten Fehler löscht, auf die Anfrage wartet, im try-Blöck den Erfolgszustand aktiviert, im catch-Blöck die Fehlermeldung in den Fehlerzustand kopiert und schließlich im finally-Blöck den Ladenzustand deaktiviert.

Das Rezept gilt seit der Popularisierung von React als Standard und funktioniert. In React 19 ist es außerdem überflüssig. Ein einziger Hook übernimmt nun die Handhabung von Pending-, Fehler- und Ergebnisfällen, einschließlich der Reihenfolge von sequenziellen Anfragen. Die meisten Teams haben es nie bemerkt, da ein Upgrade keine Änderung erzwang.

Was ist stabil und was nicht

Zuerst eine kurze Übersicht, denn einige Artikel beschreiben Funktionen als bereits verfügbar, obwohl das nicht der Fall ist.

In der stabilen Version React 19.x verfügbar:

• Aktionen sowie die darauf basierenden Hooks: useActionState, useFormStatus und useOptimistic.
• Die use() API zum Lesen von Promises und Context während des Renderns.
• ref als gewöhnlicher Prop, wodurch forwardRef veraltet wird.
• Einheimische Dokumentmetadaten: <title>, <meta> und <link>-Tags, die aus Komponenten generiert werden.
• Der React Compiler, der im Oktober 2025 Version 1.0 erreichte und Versionen bis React 17 unterstützt.
• Zusätzliche Funktionen ab Version 19.2 wie <Activity> und useEffectEvent.

Zum Zeitpunkt der Erstellung sind der <ViewTransition>-Komponente sowie die Fragment Refs noch in der Canary- oder Experimentierphase. Betrachten Sie alle Funktionen, die diese bereits nutzen, als veraltet und prüfen Sie die Veröffentlichungshinweise für die von Ihnen tatsächlich installierte Version.

Aktionen: Das neue Modell für asynchrone Zustände

Die zentrale Idee von React 19 ist die Action – eine asynchrone Funktion, die an eine Übertragung übergeben wird. React übernimmt alles, was damit zusammenhängt: den ausstehenden Zustand, die Fehlerbehandlung, optimistische Aktualisierungen sowie das Zurücksetzen von Formularen – all das, was Teams früher manuell schreiben mussten.

useActionState, useFormStatus und useOptimistic sind keine drei unabhängigen Funktionen. Es handelt sich dabei um drei Perspektiven auf denselben Mechanismus.

useActionState ersetzt das Drei-Flaggen-Muster

Anstelle des Trios „Laden“, „Fehler“ und „Erfolg“ schreibt man eine Action-Funktion, die den vorherigen Zustand sowie die Formulardaten erhält und den nächsten Zustand zurückgibt. Diese Funktion wird zusammen mit einem initialen Zustand an useActionState übergeben. Der Hook gibt drei Dinge zurück: den aktuellen Zustand, eine Funktion für das Formular sowie ein boolesches Wertemerkmal isPending.

Die Komponente führt anschließend drei einfache Aufgaben aus. Das action-Attribut des Formulars erhält die zurückgegebene Funktion direkt. Die Schaltfläche wird deaktiviert, solange isPending wahr ist. Zudem wird jede Nachricht aus dem zurückgegebenen Zustand gelesen. Es gibt keinen Ladezustand, keinen Fehlerzustand, weder try, catch noch finally, weder preventDefault noch eine manuelle Zurücksetzung.

Die Übermittlung einer Funktion an action ist beabsichtigt. HTML-Formulare hatten schon immer ein action-Attribut, und React 19 hat es wieder eingeführt. Dadurch wird ein schrittweiser Verbesserungsansatz ermöglicht, bei dem ein Formular auch ohne JavaScript gesendet werden kann, während React das Verhalten nach dem Laden der Skripte verbessert.

useFormStatus informiert eine Schaltfläche über ihr Formular

Die sauberste Verwendung von useFormStatus ist ein wiederverwendbarer Absenden-Button. Darin gibt der Hook ein pending-Flag zurück, das das übergeordnete Formular beschreibt, ohne dass Eigenschaften weitergeleitet werden. Der Button deaktiviert sich selbst und wechselt seine Beschriftung in etwas wie „Speichern“, solange das Formular noch bearbeitet wird. Man kann dieses Komponente überall innerhalb eines Formulars einfügen – es funktioniert einfach, was das Problem der Eigenschaftsweitergabe für einen sehr häufigen Anwendungsfall beseitigt. Eine Einschränkung besteht darin, dass der Hook den Status des Formulars liest, das die Komponente umschließt; daher muss diese innerhalb des Formulars rendern und nicht daneben.

useOptimistic macht sofortige Rückmeldungen handhabbar

Optimistische Aktualisierungen zeigen dem Benutzer das erwartete Ergebnis sofort an, noch bevor der Server es bestätigt, und korrigieren sich selbst, falls die Anfrage fehlschlägt. Bei manueller Umsetzung sind temporäre IDs, eine separate Liste der ausstehenden Elemente, eine Verschmelzungslogik sowie Rollback-Code in einem Fehlerzweig erforderlich. Dabei ist es leicht, unsichtbare Fehler zu machen.

Mit useOptimistic geben Sie dem Hook die echte Liste zusammen mit einem kleinen Reducer, der beschreibt, wie ein Element mit einem Ausstehungszeichen hinzugefügt werden soll. Innerhalb der Action des Formulars rufen Sie den zurückgegebenen Setter auf und warten anschließend auf die Speicherung. Die Benutzeroberfläche zeigt das neue Element sofort an, eventuell mit reduzierter Transparenz, solange es noch aussteht. Wenn die Action abgeschlossen ist, ersetzt die echte Datenmenge die optimistische Kopie, und falls die Speicherung fehlschlägt, kehrt React automatisch in den vorherigen Zustand zurück. Es sind weder Catch-Blöcke noch manuelle Umkehrungen erforderlich.

use(): Bedingte Lektüre von Ressourcen

use() ist eine neue API, die während der Darstellung eine Ressource wie eine Promise oder einen Context liest. Im Gegensatz zu allen anderen Hooks kann sie bedingungsweise aufgerufen werden. Ein Komponent kann einen Benutzer lesen, frühzeitig zurückgeben, wenn die Details versteckt sind, und erst danach die Präferenzen abrufen. Umhüllen Sie den Baum mit einer Suspense-Grenze zusammen mit einem Ersatzwert, wodurch React die Ausführung bis zum Eintreffen der Daten aussetzt.

Es gibt eine wichtige Einschränkung: Promises, die an use() übergeben werden, müssen über mehrere Render-Zyklen hinweg stabil bleiben. Erstellen Sie sie daher außerhalb der Komponente oder nutzen Sie eine Caching-Schicht wie React Query oder SWR, oder sogar ein einfaches Modul-Ebene-Map, das nach ID sortiert ist. Eine bei jedem Render neu erstellte Promise sorgt dafür, dass der Ersatzwert dauerhaft auf dem Bildschirm angezeigt wird.

ref als Eigenschaft

Diese Änderung ist einfach. Funktionskomponenten erhalten nun ref als normales Prop, sodass Sie es direkt an die zugrunde liegende Eingabe weitergeben können, ohne die Komponente in forwardRef zu packen. Das Verhalten bleibt unverändert – es fehlt lediglich ein Wrapper sowie eine Import-Anweisung. Bestehender forwardRef-Code funktioniert weiterhin, da die Abschaffung schrittweise und ohne Auswirkungen erfolgt, neue Komponenten sollten ihn jedoch nicht verwenden.

Der React Compiler

Der Compiler stellt den leisesten aller Updates dar. Er analysiert die Komponenten zur Zeit der Kompilierung und wendet die Memoisierung an, die Entwickler normalerweise entweder inkonsistent mit useMemo, useCallback und React.memo selbst umsetzen oder ganz weglassen. Sie schreiben einfache Komponenten, und der Compiler fügt die richtige Caching-Funktion hinzu.

Um es auszuprobieren, installieren Sie das Babel-Plugin babel-plugin-react-compiler und fügen Sie es zu den Plugins in Ihrer Babel-Konfiguration hinzu. Da es auch React 17 und 18 unterstützt, können Sie es ohne vorherige Aktualisierung von React einsetzen – das hilft Teams, die bei einer Versionserhöhung stecken bleiben, aber die Leistungsvorteile nutzen möchten.

Sicherheitshinweis für Server Components

Sicherheitshinweise bezüglich Dienstverweigerungen und der Offenlegung von Quellcode betrafen die react-server-dom-*-Pakete gegen Ende des Jahres 2026, und für jede unterstützte Version wurden gepatchte Versionen veröffentlicht. Wenn Sie React Server Components verwenden, überprüfen Sie Ihre installierte Version gegenüber den aktuellen Hinweisen und wenden Sie eine gepatchte oder neuere Version an. Verlassen Sie sich nicht auf Ihr Gedächtnis bezüglich der sicheren Version.

Was Sie diese Woche tun sollten

• Neue Formulare: Nutzen Sie ab dem ersten Tag useActionState, definieren Sie eine Aktion, übergeben Sie sie an den Hook und lesen Sie isPending aus dem Rückgabewert ab – ohne jegliche manuell erstellten Flags.
• Bestehende Handler: Schreiben Sie nicht alles auf einmal um. Wählen Sie einen aus, konvertieren Sie ihn in eine Action und prüfen Sie, wie er funktioniert. Der Gewinn an Lesbarkeit ist in der Regel deutlich genug, um die Priorität der Migration selbst zu bestimmen.
• Der Compiler: Fügen Sie ihn Ihrer Build-Konfiguration hinzu. Es handelt sich um eine kleine Änderung, die mit bestehendem Code funktioniert und keine Umschreibungen erfordert – was sie zum einfachsten Vorteil der React 19-Ära mit dem größten Einfluss macht.
• Server-Komponenten: Überprüfen Sie Ihre Version hinsichtlich der Sicherheitskorrekturen.

Die Schlagzeilen erregten bei der Veröffentlichung Aufmerksamkeit. Der größere Wandel liegt darunter: Actions als Standardmodell für jede asynchrone Zustandsänderung, was stillschweigend einen großen Teil des Codes beseitigt, den React-Entwickler täglich schreiben. Viele Teams haben dies umgesetzt, doch der Code wartet noch darauf, genutzt zu werden.