React v19 – Actions, Server Components, verbesserte Hydration-Fehler, Unterstützung für Document Metadata und mehr

Neue APIs und Funktionen

• Actions: Verarbeiten Datenänderungen und Status-Updates automatisch. Warten-Zustand, Fehler, optimistische Updates usw. werden automatisch verwaltet
• useActionState: Ein neuer Hook, der typische Anwendungsfälle von Actions einfach abwickelt
• use API: Ermöglicht das Lesen von Promises und Context während des Renderings
• useOptimistic: Erleichtert die Implementierung optimistischer UI-Updates bei asynchronen Anfragen
• ref as a prop: Das ref-Prop kann direkt in Funktionskomponenten verwendet werden (forwardRef nicht erforderlich)
• <Context> as a Provider: <Context> kann direkt anstelle von <Context.Provider> verwendet werden

Dokument- und Ressourcenverwaltung

• Unterstützung für Metadaten: Tags wie <title>, <link> und <meta> können direkt in Komponenten verwendet werden
• Unterstützung für Stylesheets: Laden von Stylesheets und Verwalten ihrer Priorität innerhalb von Komponenten
• Unterstützung für asynchrone Skripte: Asynchrone Skripte können an beliebiger Stelle im Komponentenbaum gerendert werden
• Ressourcen-Preloading: Bereitstellung der APIs prefetchDNS, preconnect, preload und preinit zur Performance-Optimierung

Verbesserungen

• Unterstützung für Custom Elements: Vollständige Unterstützung für Custom Elements hinzugefügt
• Verbesserte Fehlerbehandlung: Doppelte Fehler entfernt und Optionen für die Fehlerbehandlung hinzugefügt
• Kompatibilität mit Drittanbieter-Skripten/Erweiterungen: Verarbeitung von Inhalten von Drittanbietern während der Hydration verbessert
• Verbesserte Hydration-Fehler: Klarere Fehlermeldungen und Debugging-Informationen bereitgestellt

Server Components

• Stabilisierte Server Components: Alle Server-Component-Funktionen aus dem Canary-Kanal sind in React 19 enthalten
• Server Actions: Bieten die Möglichkeit, Serverfunktionen aus Client Components aufzurufen

Sonstiges

• useDeferredValue-Anfangswert: Option für einen Anfangswert zu useDeferredValue hinzugefügt
• ref-Bereinigungsfunktion (cleanup): Ref-Callbacks können eine Bereinigungsfunktion zurückgeben
• Neue Static APIs: Die APIs prerender und prerenderToNodeStream hinzugefügt

[carnoxen]

In React 19 wurde das umstrittene Verhalten von <Suspense> neu definiert. Bisher wurde beim Suspense einer Komponente erst bis zur nächsten Suspense-Komponente gerendert und dann der Fallback erzeugt, jetzt wird beim Suspense einer Komponente zuerst der Fallback erzeugt und danach die nächste Suspense-Komponente gerendert.

Verbesserungen an Suspense

Kurz gesagt wurde damit die Zeit bis zum ersten Rendern verkürzt. Gut, dass das sauber gelöst wurde.