JavaScript-Bibliothek: React 18 erscheint mit Concurrent Rendering

Das Major Release React 18 bringt eine größere Neuerung mit: Die JavaScript-Bibliothek zum Erstellen von User Interfaces (UI) erlaubt nun Concurrent Rendering. Das bedeutet ein grundsätzliches Update des Rendering-Modells von React. Auf Concurrent Rendering setzen zudem die meisten weiteren neuen Features in Version 18 auf. Dennoch hat das React-Team daran gearbeitet, den Upgrade-Prozess von React 17 möglichst reibungslos zu gestalten.

Rendering im Hintergrund

Concurrency in React soll kein Feature darstellen, das Entwicklerinnern und Entwickler aktiv nutzen, sondern vielmehr hinter den Kulissen arbeiten. Es erlaubt das gleichzeitige Vorbereiten mehrerer Versionen eines UI. Dahinter steht das Konzept, dass Rendering im neuen sogenannten Concurrent React unterbrechbar ist: Beispielsweise kann React beginnen, ein Update zu rendern, das Update dann pausieren und später fortsetzen oder sogar ganz abbrechen. Dem UI soll nicht anzumerken sein, ob ein Render-Vorgang unterbrochen wurde, da DOM-Mutationen erst dann ablaufen, wenn ein kompletter Tree evaluiert wurde. Somit kann React nun im Hintergrund neue Screens vorbereiten, ohne den Main Thread zu blockieren. Das UI kann daher auf User-Eingaben sofort reagieren, selbst wenn im Hintergrund eine größere Rendering-Aufgabe abläuft.

Auch Reusable State ist dank dem neuen Concurrent Rendering möglich: Abschnitte des UI lassen sich vom Bildschirm entfernen und später wieder hinzufügen, wenn der vorherige State wiederhergestellt wird.

Sanfter Upgrade-Prozess

Obwohl Concurrency laut dem React-Team technisch gesehen einen Breaking Change darstellt, soll ein Upgrade auf React 18 möglich sein, ohne bestehenden Code zu beeinflussen. Stattdessen ist das neue Rendering-Verhalten in Version 18 nur in den Teilen einer App vorhanden, die die neuen Funktionen nutzen, und ist demnach als Opt-in-Funktion zu sehen. Dahinter steht der Gedanke, zunächst eine Anwendung auf die neue React-Version aktualisieren und anschließend schrittweise Concurrent-Funktionen einfügen zu können. Per <StrictMode> sollen sich die gängigsten mit Concurrency in Zusammenhang stehenden Bugs aufdecken lassen.

Nach dem Upgrade auf React 18 stehen Concurrent-Features wie startTransition zum Navigieren zwischen Screens ohne das Blockieren von User-Eingaben sowie useDeferredValue zum Drosseln kostenintensiver Re-Rendering-Vorgänge bereit. Auf lange Sicht gesehen werden Entwickler dem React-Team zufolge voraussichtlich auf eine Concurrent-fähige Bibliothek oder Framework zurückgreifen, um eine Anwendung mit Concurrent-Funktionen auszustatten.

Weitere Informationen zum Upgrade-Prozess lassen sich einem eigenen Blogeintrag entnehmen.

Automatisches Batching und Priorisierung von User-Eingaben

Zu den weiteren neuen Funktionen in React 18 zählt automatisches Batching. Als Batching bezeichnet das React-Team, wenn React verschiedene State-Updates in ein einziges Re-Render gruppiert, um eine erhöhte Performance zu erreichen.

Ohne automatisches Batching geschah das bisher nur für Updates innerhalb von React-Event-Handlern, nicht aber in Promises, setTimeout, nativen Event-Handlern und anderen Events, die in React standardmäßig nicht gebatcht wurden. Für alle diese Fälle führt React 18 automatisches Batching für Updates ein:

// Before: only React events were batched.
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will render twice, once for each state update (no batching)
}, 1000);

// After: updates inside of timeouts, promises,
// native event handlers or any other event are batched.`
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React will only re-render once at the end (that's batching!)
}, 1000);

Als neues Konzept haben Transitions in React 18 Einzug gehalten, in Form der oben erwähnten API startTransition, die auf Concurrent React basiert. Damit lässt sich zwischen dringenden und nicht dringenden Updates unterscheiden. Als dringend gelten direkte Interaktionen wie Tippen, Klicken oder Drücken. Als Transition Update gilt dagegen, wenn das UI von einer View zu einer anderen wechselt. So dürften Nutzer eine sofortige Reaktion erwarten, wenn sie in einem Dropdown-Menü einen Filter auswählen, aber mit einer leichten Verzögerung für das Anzeigen der Ergebnisse rechnen.

Mithilfe von startTransition lässt sich nun festlegen, welche Updates dringend sind, und welche nicht. Typischerweise soll eine einzige User-Eingabe beide Fälle auslösen.

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
  // Transition: Show the results
  setSearchQuery(input);
});

Weitere Neuerungen

Die seit längerer Zeit geplanten Server Components befinden sich weiterhin in Entwicklung und gelten als experimentell. In einem künftigen Minor Release von React 18 soll eine initiale Version an Bord sein. Das Feature soll Entwicklern ermöglichen, Anwendungen zu erstellen, die die Interaktivität von clientseitigen Apps mit der erhöhten Performance von traditionellen Server-Renderings verbinden. Zu den weiteren Änderungen in React 18 zählen neue APIs zum Rendering auf Client und Server sowie neue Hooks, Fehlerbehebungen und das Entfernen veralteter Funktionen wie der unstable_changedBits-API.

React 18 lässt sich mittels npm (npm install react react-dom) oder yarn (yarn add react react-dom) installieren.

Lesen Sie auch

JavaScript: Die Rendering-Engines von React, Angular und Ember im Vergleich

Eine Übersicht der Neuerungen inklusive Changelog ist in der Ankündigung im React-Blog zu finden.

(mai)