Der Concurrent Mode in React

Der Concurrent Mode in React 16 entkoppelt Teile im Renderingprozess. Dadurch beschleunigt sich die Ladezeit.

Artikel verschenken
In Pocket speichern vorlesen Druckansicht 1 Kommentar lesen
Der Concurrent Mode in React
Lesezeit: 22 Min.
Von
  • Sebastian Springer
Inhaltsverzeichnis

Reconciler heißt der Algorithmus, den React verwendet, um den Unterschied zwischen dem aktuellen Zustand der Applikation und dem zukünftigen Zustand zu berechnen. Er bildet die aktualisierte Version, die anschließend im Browser erscheint. Der Fiber Reconciler ist eine der zentralen Architekturneuerungen in React 16 und die Grundlage für zahlreiche neue Features. Eines der populärsten ist die Hooks-API in Version 16.8. Mithilfe der Schnittstelle lassen sich vollwertige React-Komponenten mit eigenem State und Lifecycle Hooks als Funktionen implementieren. Im Zuge einer Minor Release hat das Team hinter React dieses Feature ohne weitere Breaking Changes integriert.

Bei der Community fand die Hooks-API schnell Gefallen. Entsprechend setzen Entwickler neue Komponenten nur noch als Funktionskomponenten um. Damit vollzieht die React-Welt derzeit einen Wandel weg von Klassen hin zu Funktionen. Daneben entfernt sie sich ebenfalls von großen zusammenhängenden Strukturen und bewegt sich hin zu Kompositionen, die aus unabhängigen kleineren Blöcken bestehen. Diese Änderungen begründen sich vor allem darin, dass der Quellcode einer Applikation so besser zu warten und zu erweitern ist.

Fast noch wichtiger als die Arbeit mit dem Quellcode ist die Performance der Bibliothek. Hierbei spielt das Benutzererlebnis eine tragende Rolle. Dieser Problemstellung widmet sich ein ganzer Satz neuer Features, den der Begriff Concurrent Mode zusammenfasst. Ziel dieser Features ist es, die Anwendung responsiver zu machen und das Beste aus den Geräten der Nutzer herauszuholen. Dazu greift der Concurrent Mode unter anderem in den Renderingprozess von React ein und ändert die bisherige blockierende Renderingstrategie, sodass sie sich unterbrechen lässt. Um die Auswirkungen des Concurrent Mode zu verstehen, ist es hilfreich zu wissen, wie das Rendering in einer React-Applikation funktioniert.