Das Problem bei Subscriptions auf externe Stores

Ein externer Store ist jede Zustandsquelle, die außerhalb des React-Baums lebt, etwa ein Redux-Store, eine Browser-API wie matchMedia oder ein einfaches Objekt auf Modulebene mit eigener subscribe-Mechanik.

React besitzt diesen Zustand nicht. Daher muss es Änderungen abonnieren und Snapshots lesen, damit die Komponenten mit dem aktuellen Inhalt des Stores synchron bleiben.

Ein verbreiteter Ansatz liest den Store-Wert in useState ein und verwendet anschließend useEffect, um eine Subscription einzurichten und bei jeder Änderung setState aufzurufen. Auf den ersten Blick scheint die Komponente dadurch aktuell zu bleiben.

Für einfaches synchrones Rendern funktioniert das, aber es hat einen subtilen Fehler, der sichtbar wird, sobald React nebenläufig rendert und die Arbeit mittendrin pausieren oder neu starten kann.

Tearing tritt auf, wenn verschiedene Teile der Benutzeroberfläche während eines einzigen Renderdurchlaufs unterschiedliche Werte desselben Stores anzeigen. Nebenläufiges Rendern kann die Arbeit unterbrechen und fortsetzen, während sich der Store dazwischen ändert.

Das Ergebnis ist ein inkonsistenter Bildschirm: Eine Komponente zeigt den alten Wert und eine andere den neuen. Vor den Concurrent-Features war diese Inkonsistenz praktisch unmöglich.

Stellen Sie sich vor, dass viele Komponenten während eines nebenläufigen Renderns einen Theme-Store lesen. Wenn die Benutzerin oder der Benutzer mittendrin den Dark Mode aktiviert, zeigen die vor dem Umschalten gerenderten Komponenten das helle Theme und die danach gerenderten das dunkle.

Für einen Frame sehen Sie dadurch einen halb hellen, halb dunklen Bildschirm, weil sich der Store-Wert während eines Renderns geändert hat, das React nicht atomar behandelt hat.

Effekte laufen, nachdem das Renderergebnis committed wurde. Eine auf useEffect basierende Subscription kann daher nicht garantieren, dass der während des Renderns gelesene Wert beim Commit noch mit dem Store übereinstimmt. Die Subscription wird zu spät ausgelöst, um eine inkonsistente Darstellung zu verhindern.

Wenn der Effekt die Subscription erneut einrichtet und den Zustand aktualisiert, wurde der inkonsistente Frame möglicherweise bereits angezeigt.

Eine frühere experimentelle API namens useMutableSource sollte nebenläufigkeitssichere Lesezugriffe auf externe Zustände ermöglichen. Ihre API erwies sich jedoch als schwierig korrekt zu verwenden und wurde nie als stabile Version veröffentlicht.

Das React-Team ersetzte sie durch ein einfacheres, ergonomischeres Primitiv, das dieselben Konsistenzgarantien ohne diese Fehlerquellen bietet.

useSyncExternalStore ist der offizielle Hook, um nebenläufigkeitssicher externe Stores zu abonnieren. Er koordiniert sich mit React, sodass Lesezugriffe während eines Renderns konsistent bleiben und kein Tearing in Komponenten auftritt.

Er wurde zum empfohlenen Primitiv für Bibliotheksautoren, die externen Zustand beim nebenläufigen Rendern zuverlässig in React einbinden müssen.

State-Bibliotheken, die externe Stores abonnieren, waren direkt betroffen, darunter Redux, MobX und Valtio. Jede von ihnen musste das neue Primitiv übernehmen, um nach der Einführung der Concurrent-Features sicher zu bleiben.

Deshalb wurden ihre React-Bindings aktualisiert und rufen intern useSyncExternalStore auf, statt sich auf das ältere Muster mit useState plus useEffect zu verlassen.

Der Hook garantiert, dass jede Komponente, die den Store während eines Render-Vorgangs liest, denselben Snapshot sieht, und erzwingt ein synchrones erneutes Rendern, wenn sich der Store auf eine Weise ändert, die sonst zu Tearing führen würde.

Diese Kombination aus konsistentem Snapshot und Sicherheit bei nebenläufigem Rendering ist der zentrale Mehrwert, den der Hook gegenüber selbst implementierten Subscriptions bietet.

Indem Sie useSyncExternalStore verwenden, bleiben Ihre Subscriptions korrekt, während React sein Rendering-Modell weiterentwickelt. Sie nutzen die Garantien des Frameworks, statt sie unvollkommen neu zu implementieren.

Das macht ihn zur dauerhaften, empfohlenen Methode, jede externe Quelle der Wahrheit mit React-Komponenten zu verbinden.

Bestätigen Sie, was Tearing beim nebenläufigen Rendering bedeutet.

Externe Stores befinden sich außerhalb von React, und die naive Subscription mit useState und useEffect kann Tearing nicht verhindern, sobald das Rendering nebenläufig erfolgt. Effekte werden zu spät ausgeführt, um konsistente Lesevorgänge innerhalb eines Render-Vorgangs sicherzustellen.

useSyncExternalStore ersetzt das abgekündigte useMutableSource und liefert einen konsistenten Snapshot mit Sicherheit bei nebenläufigem Rendering. Bibliotheken wie Redux, MobX und Valtio haben es als zukunftssichere Grundlage für Store-Subscriptions übernommen.