Concurrent Rendering: Javascript-Bibliothek React 18 führt grundlegende Neuerung ein

React 18 ist da. (Bild: GaudiLab/Shutterstock)
React 18, die Javascript-Bibliothek für das Interface-Design, bringt optionale Concurrency an den Start. Gerade das Concurrent Rendering, das unterbrechbare Rendering, stellt eine wesentliche Neuerung dar. Die schon länger erwarteten Server Components hingegen bleiben weiterhin experimentell.
Concurrent Rendering als Feature-Fundament von React 18
Concurrent Rendering ist Teil eines größeren Konzepts, aber gleichzeitig die wesentliche Ausprägung dieses Konzepts. Das Feature dient dem gleichzeitigen Vorbereiten mehrerer Versionen einer Benutzeroberfläche unter Nutzung der Neuerung, dass das Rendering unterbrechbar ist. So könnte React beginnen, ein Update zu rendern und dieses dann pausieren, später fortsetzen oder abbrechen, ohne dass der UI (User Interface, Benutzeroberfläche) einer dieser Vorgänge anzumerken wäre.
Der Vorteil: Die UI kann auf Nutzereingaben sofort reagieren. Das Rendering wird still im Hintergrund geregelt. Das stellt eine grundsätzliche Aktualisierung des bisherigen Rendering-Modells in React dar. Auch die meisten der weiteren neuen Features setzen in unterschiedlicher Form auf dem Concurrent Rendering auf.
Reibungsloses Update von 17 trotz Breaking Change
Trotz des Umstandes, dass es sich bei dem vollkommen anderen Rendering-Modell technisch um ein sogenannten Breaking Change handelt, also eines, das Code-Anpassungen in bestehenden Programmierungen erforderlich macht, hat das React-Team sich um einen möglichst problemlosen Upgrade-Prozess bemüht – jedenfalls für Aktualisierende von React 17.
Das funktioniert so, dass das neue Rendering-Modell sich nur auf jene Teile einer App auswirkt, die mit den neuen Funktionen arbeiten soll. So können Entwickelnde ihre Apps schrittweise auf das neue Modell umstellen. Funktionieren wird es auch ohne Umstellungen, nur eben nicht mit den neuen Features.
Ebenfalls neu in React 18 ist das automatische Batching für alle Updates. Damit werden verschiedene State-Updates in ein einziges Re-Render „gestapelt“, anstatt sie jeweils direkt abzuarbeiten. Das soll die Performance erhöhen.
Auch neu: Transitions und Server Components
Neu ist ebenso die API Starttransition, die auf Concurrent Rendering basiert. Sie erlaubt die Unterscheidung zwischen dringenden und nicht dringenden Updates. Dabei gelten direkte Interaktionen wie Tippen, Klicken oder Tappen als dringend. Dringende Updates werden sofort ausgeführt. Als sogenanntes Transition-Update gilt der Wechsel von einer View zu einer anderen. Bei solchen Wechseln wird es kurze Verzögerungen geben. Entwickelnde können selbst festlegen, welche Updates sie als dringend behandelt wissen wollen.
Immer noch nicht in den Stable-Status haben es die Server Components geschafft. Sie bleiben experimentell und sollen in einem künftigen Update eher rudimentär stabil implementiert werden. Dabei ist das Feature interessant, denn es soll Anwendungen erlauben, die Interaktionsgeschwindigkeit clientseitiger Apps mit der höheren Geschwindigkeit von Server-Renderings zu verbinden.
Die vollständige Liste aller Neuerungen und Änderungen findet ihr in diesem ausführlichen Blog-Beitrag des React-Teams.