React 19

 (github.com/facebook)
2 Punkte von GN⁺ 2024-12-06 | 1 Kommentare | Auf WhatsApp teilen

19.0.0 (5. Dezember 2024)

Neue Funktionen

React
  • Actions: startTransition kann jetzt asynchrone Funktionen annehmen. Diese Funktionen werden als „Actions“ bezeichnet, aktualisieren den Status im Hintergrund und committen die UI in einem Schritt. Actions können Nebenwirkungen wie asynchrone Requests ausführen und warten auf deren Abschluss, bevor die Transition beendet wird.
  • useActionState: Ein neuer Hook, der Actions innerhalb einer Transition sequenziert und Zugriff auf den Status ermöglicht. Er nimmt einen Initialzustand und einen Reducer entgegen.
  • useOptimistic: Ein neuer Hook zum Aktualisieren des Status, während eine Transition läuft. Nach Abschluss der Transition wird der Status auf den neuen Wert aktualisiert.
  • use: Eine neue API zum Lesen von Ressourcen während des Renderns. Sie akzeptiert ein Promise oder Context; wird ein Promise übergeben, wird die Ausführung angehalten, bis der Wert aufgelöst ist.
  • ref als Prop verwenden: ref kann jetzt als Prop verwendet werden, ohne dass forwardRef erforderlich ist.
  • Suspense-Sibling-Prewarming: Wenn eine Komponente suspendiert wird, committet React sofort den Fallback der nächstgelegenen Suspense-Grenze.
React DOM Client
  • <form> action-Prop: Form Actions verwalten Formulare automatisch und sind in useFormStatus integriert. Bei Erfolg wird das Formular automatisch zurückgesetzt.
  • Unterstützung für Dokument-Metadaten: Dokument-Metadaten-Tags können nativ aus Komponenten heraus gerendert werden.
  • Stylesheet-Unterstützung: Stylesheets werden in das <head> des Clients eingefügt, bevor Inhalte innerhalb einer Suspense-Grenze sichtbar gemacht werden.
  • Unterstützung für asynchrone Skripte: Asynchrone Skripte können überall im Komponentenbaum gerendert werden.
React DOM Server
  • prerender- und prerenderToNodeStream-API hinzugefügt: APIs für die Generierung statischer Websites, entwickelt für Streaming-Umgebungen wie Node.js-Streams und Web Streams.
React Server Components
  • RSC-Funktionen: Direktiven, Server Components und Server Functions sind jetzt stabil. Bibliotheken mit Server Components können React 19 nun als Peer Dependency adressieren.

Veraltet

  • Zugriff auf element.ref: Der Zugriff auf element.ref wird zugunsten von element.props.ref als veraltet markiert.
  • react-test-renderer: In React 19 protokolliert react-test-renderer eine Deprecation-Warnung und wechselt für die Web-Nutzung auf Concurrent Rendering.

Wichtige Änderungen

React
  • Neue JSX-Transformation erforderlich: Eine neue JSX-Transformation ist notwendig, um die Bundle-Größe zu verbessern und JSX ohne Import von React zu ermöglichen.
  • Rendering-Fehler werden nicht erneut geworfen: Wenn ein Fehler nicht von einer Error Boundary abgefangen wird, wird er an window.reportError gemeldet.
  • propTypes entfernt: Die Verwendung von propTypes wird stillschweigend ignoriert. Eine Migration zu TypeScript wird empfohlen.
  • defaultProps für Funktionen entfernt: Stattdessen können ES6-Default-Parameter verwendet werden.
  • String-Refs entfernt: Die Verwendung von String-Refs sollte auf Ref-Callbacks migriert werden.
React DOM
  • react-dom/test-utils entfernt: act wurde von react-dom/test-utils nach react verschoben. Andere Utilities wurden entfernt.
  • ReactDOM.render, ReactDOM.hydrate entfernt: Ersetzt durch ReactDOM.createRoot und ReactDOM.hydrateRoot für Concurrent Rendering.

Erwähnenswerte Änderungen

React
  • <Context> als Provider verwenden: <Context> kann jetzt als Provider gerendert werden statt <Context.Provider>.
  • Unterstützung für Custom Elements: React 19 besteht alle Tests für Custom Elements.
  • StrictMode-Änderungen: useMemo und useCallback verwenden das Memoization-Ergebnis des ersten Renderings erneut.
React DOM
  • Diffs bei Hydration-Fehlern: Bei einem Mismatch protokolliert React 19 einen einzelnen Fehler, der die Unterschiede im nicht übereinstimmenden Inhalt enthält.

TypeScript-Änderungen

  • Keine impliziten Rückgaben erlaubt: Refs akzeptieren jetzt nur noch Cleanup-Funktionen. Implizite Rückgaben führen zu einem Fehler.
  • Initiales Argument für useRef erforderlich: Das Initialargument ist jetzt verpflichtend.
  • Strikteres ReactElement-Typing: Props von React-Elementen sind nun standardmäßig unknown statt any.

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-12-06
Meinungen auf Hacker News

  • Es gibt die Meinung, dass es möglich ist und Spaß macht, mit React skalierbare Apps zu entwickeln

    • Dank TS-Unterstützung und Community-Bibliotheken lasse sich leicht entwickeln und skalieren
    • Es sei unverständlich, warum die neuen Funktionen den Leuten Angst machen
    • Es gibt die Ansicht, dass Jetpack Compose und Swift UI von React inspiriert wurden
    • Es wird infrage gestellt, ob es früher wirklich Freude gemacht hat, große Web-Apps mit jQuery oder plain JS zu bauen

  • Zur neuen React-Version gibt es eine positive Meinung, zugleich aber die Sorge, dass der Einstieg für Anfänger schwierig sein könnte

    • React sei weiterhin ein hervorragendes Framework, und diese Version bringe Verbesserungen
    • Die Kritik richte sich eher gegen die Frontend-Entwicklung insgesamt als gegen React selbst

  • Es gibt die Meinung, dass die Komplexität von Client-Side-Frameworks zunimmt

    • Es wird empfunden, dass die Komplexität überall zunimmt, etwa im Backend, Frontend und DevOps-Stack

  • Positiv bewertet wird, dass in der neuen Version die Funktion ref as a prop hinzugekommen ist und forwardRef dadurch nicht mehr nötig ist

  • Statt Redux wird Jotai, ein Recoil-Klon, erwähnt, der mit React 19 kompatibel sei

    • Es wird angenommen, dass ein weiterer State-Manager angesichts der Frontend-Komplexität eher hinderlich sein könnte

  • Es gibt den Wunsch, die use-API umzubenennen

    • Es wird vermutet, dass Menschen, die React Hooks zum ersten Mal begegnen, dadurch verwirrt sein könnten

  • Positiv bewertet wird, dass die Version verschoben wurde, um das Problem mit parallelem Suspense zu lösen

  • Es gibt die Frage, ob sich der Hook useActionState auf Basis der vorhandenen eingebauten Hooks nachbauen lässt

  • Positiv bewertet wird, dass Funktionen hinzugekommen sind, die die Nutzung standardisierter Web-Technologien fördern und die Lebensqualität verbessern

    • Es ist enttäuschend, dass das Auslösen von Suspense weiterhin Framework-Unterstützung benötigt
    • Es wurde versucht, den Suspense-Mechanismus über TanStack Query zu verstehen, jedoch ohne Erfolg