React useSyncExternalStore: Die Synchronisierung externer Zustände meistern

useSyncExternalStore ist ein in React 18 eingeführter React-Hook, der es Ihnen ermöglicht, externe Datenquellen auf eine Weise zu abonnieren und auszulesen, die mit Concurrent Rendering kompatibel ist. Dieser Hook überbrückt die Lücke zwischen dem von React verwalteten Zustand und externen Zuständen, wie z.B. Daten aus Drittanbieter-Bibliotheken, Browser-APIs oder anderen UI-Frameworks. Lassen Sie uns tief in das Verständnis seines Zwecks, seiner Implementierung und seiner Vorteile eintauchen.

Die Notwendigkeit von useSyncExternalStore verstehen

Die eingebaute Zustandsverwaltung von React (useState, useReducer, Context API) funktioniert außergewöhnlich gut für Daten, die eng mit dem React-Komponentenbaum gekoppelt sind. Viele Anwendungen müssen jedoch Datenquellen integrieren, die *außerhalb* der Kontrolle von React liegen. Zu diesen externen Quellen können gehören:

• Zustandsverwaltungs-Bibliotheken von Drittanbietern: Integration mit Bibliotheken wie Zustand, Jotai oder Valtio.
• Browser-APIs: Zugriff auf Daten aus localStorage, IndexedDB oder der Network Information API.
• Vom Server abgerufene Daten: Obwohl Bibliotheken wie React Query und SWR oft bevorzugt werden, möchten Sie manchmal die direkte Kontrolle haben.
• Andere UI-Frameworks: In hybriden Anwendungen, in denen React neben anderen UI-Technologien existiert.

Das direkte Lesen von und Schreiben in diese externen Quellen innerhalb einer React-Komponente kann zu Problemen führen, insbesondere beim Concurrent Rendering. React könnte eine Komponente mit veralteten Daten rendern, wenn sich die externe Quelle ändert, während React einen neuen Bildschirm vorbereitet. useSyncExternalStore löst dieses Problem, indem es einen Mechanismus bereitstellt, mit dem React sicher mit externen Zuständen synchronisieren kann.

Wie useSyncExternalStore funktioniert

Der useSyncExternalStore-Hook akzeptiert drei Argumente:

1. subscribe: Eine Funktion, die einen Callback akzeptiert. Dieser Callback wird aufgerufen, wann immer sich der externe Store ändert. Die Funktion sollte eine weitere Funktion zurückgeben, die bei ihrem Aufruf das Abonnement des externen Stores beendet.
2. getSnapshot: Eine Funktion, die den aktuellen Wert des externen Stores zurückgibt. React verwendet diese Funktion, um den Wert des Stores während des Renderns zu lesen.
3. getServerSnapshot (optional): Eine Funktion, die den initialen Wert des externen Stores auf dem Server zurückgibt. Dies ist nur für serverseitiges Rendering (SSR) notwendig. Wenn sie nicht bereitgestellt wird, verwendet React getSnapshot auf dem Server.

Der Hook gibt den aktuellen Wert des externen Stores zurück, der von der getSnapshot-Funktion bezogen wird. React stellt sicher, dass die Komponente neu gerendert wird, wann immer sich der von getSnapshot zurückgegebene Wert ändert, was durch einen Object.is-Vergleich bestimmt wird.

Einfaches Beispiel: Synchronisation mit localStorage

Erstellen wir ein einfaches Beispiel, das useSyncExternalStore verwendet, um einen Wert mit localStorage zu synchronisieren.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

In diesem Beispiel:

• subscribe: Lauscht auf das storage-Ereignis des window-Objekts. Dieses Ereignis wird ausgelöst, wann immer localStorage durch einen anderen Tab oder ein anderes Fenster modifiziert wird.
• getSnapshot: Ruft den Wert von myValue aus dem localStorage ab.
• getServerSnapshot: Gibt einen Standardwert für das serverseitige Rendering zurück. Dieser könnte aus einem Cookie abgerufen werden, falls der Benutzer zuvor einen Wert festgelegt hat.
• MyComponent: Verwendet useSyncExternalStore, um Änderungen im localStorage zu abonnieren und den aktuellen Wert anzuzeigen.

Fortgeschrittene Anwendungsfälle und Überlegungen

1. Integration mit Zustandsverwaltungs-Bibliotheken von Drittanbietern

useSyncExternalStore glänzt bei der Integration von React-Komponenten mit externen Zustandsverwaltungs-Bibliotheken. Sehen wir uns ein Beispiel mit Zustand an:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

In diesem Beispiel wird useSyncExternalStore verwendet, um Änderungen im Zustand-Store zu abonnieren. Beachten Sie, wie wir useStore.subscribe und useStore.getState direkt an den Hook übergeben, was die Integration nahtlos macht.

2. Leistungsoptimierung mit Memoization

Da getSnapshot bei jedem Rendern aufgerufen wird, ist es entscheidend sicherzustellen, dass die Funktion performant ist. Vermeiden Sie aufwendige Berechnungen innerhalb von getSnapshot. Falls nötig, memoizen Sie das Ergebnis von getSnapshot mit useMemo oder ähnlichen Techniken.

Betrachten Sie dieses (potenziell problematische) Beispiel:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

In diesem Beispiel führt getSnapshot (die als zweites Argument an useSyncExternalStore übergebene Inline-Funktion) eine aufwendige map-Operation auf einem großen Array aus. Diese Operation wird bei *jedem* Rendern ausgeführt, auch wenn sich die zugrunde liegenden Daten nicht geändert haben. Um dies zu optimieren, können wir das Ergebnis memoizen:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

Jetzt wird die map-Operation nur noch ausgeführt, wenn sich externalStore.getState() ändert. Hinweis: Sie müssen tatsächlich einen tiefen Vergleich von `externalStore.getState()` durchführen oder eine andere Strategie anwenden, wenn der Store dasselbe Objekt mutiert. Das Beispiel ist zur Veranschaulichung vereinfacht.

3. Umgang mit Concurrent Rendering

Der Hauptvorteil von useSyncExternalStore ist seine Kompatibilität mit den Concurrent-Rendering-Funktionen von React. Concurrent Rendering ermöglicht es React, mehrere Versionen der Benutzeroberfläche gleichzeitig vorzubereiten. Wenn sich der externe Store während eines Concurrent Renders ändert, stellt useSyncExternalStore sicher, dass React beim Übertragen der Änderungen in das DOM immer die aktuellsten Daten verwendet.

Ohne useSyncExternalStore könnten Komponenten mit veralteten Daten gerendert werden, was zu visuellen Inkonsistenzen und unerwartetem Verhalten führt. Die getSnapshot-Methode von useSyncExternalStore ist so konzipiert, dass sie synchron und schnell ist, damit React schnell feststellen kann, ob sich der externe Store während des Renderns geändert hat.

4. Überlegungen zum serverseitigen Rendering (SSR)

Bei der Verwendung von useSyncExternalStore mit serverseitigem Rendering ist es unerlässlich, die getServerSnapshot-Funktion bereitzustellen. Diese Funktion wird verwendet, um den initialen Wert des externen Stores auf dem Server abzurufen. Ohne sie würde React versuchen, getSnapshot auf dem Server zu verwenden, was möglicherweise nicht möglich ist, wenn der externe Store auf browserspezifische APIs (z. B. localStorage) angewiesen ist.

Die getServerSnapshot-Funktion sollte einen Standardwert zurückgeben oder die Daten aus einer serverseitigen Quelle (z. B. Cookies, Datenbank) abrufen. Dies stellt sicher, dass das auf dem Server gerenderte initiale HTML die korrekten Daten enthält.

5. Fehlerbehandlung

Eine robuste Fehlerbehandlung ist entscheidend, insbesondere beim Umgang mit externen Datenquellen. Umschließen Sie die getSnapshot- und getServerSnapshot-Funktionen mit try...catch-Blöcken, um potenzielle Fehler abzufangen. Protokollieren Sie die Fehler entsprechend und stellen Sie Fallback-Werte bereit, um einen Absturz der Anwendung zu verhindern.

6. Custom Hooks für die Wiederverwendbarkeit

Um die Wiederverwendbarkeit von Code zu fördern, kapseln Sie die useSyncExternalStore-Logik in einem Custom Hook. Dies erleichtert das Teilen der Logik über mehrere Komponenten hinweg.

Erstellen wir zum Beispiel einen Custom Hook für den Zugriff auf einen bestimmten Schlüssel im localStorage:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

Jetzt können Sie diesen Hook einfach in jeder Komponente verwenden:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

Best Practices

• Halten Sie getSnapshot schnell: Vermeiden Sie aufwendige Berechnungen in der getSnapshot-Funktion. Memoizen Sie das Ergebnis bei Bedarf.
• Stellen Sie getServerSnapshot für SSR bereit: Stellen Sie sicher, dass das auf dem Server gerenderte initiale HTML die korrekten Daten enthält.
• Verwenden Sie Custom Hooks: Kapseln Sie die useSyncExternalStore-Logik in Custom Hooks für eine bessere Wiederverwendbarkeit und Wartbarkeit.
• Behandeln Sie Fehler ordnungsgemäß: Umschließen Sie getSnapshot und getServerSnapshot mit try...catch-Blöcken.
• Minimieren Sie Abonnements: Abonnieren Sie nur die Teile des externen Stores, die die Komponente tatsächlich benötigt. Dies reduziert unnötige Neu-Renderings.
• Ziehen Sie Alternativen in Betracht: Bewerten Sie, ob useSyncExternalStore wirklich notwendig ist. Für einfache Fälle könnten andere Zustandsverwaltungs-Techniken besser geeignet sein.

Alternativen zu useSyncExternalStore

Obwohl useSyncExternalStore ein mächtiges Werkzeug ist, ist es nicht immer die beste Lösung. Ziehen Sie diese Alternativen in Betracht:

• Eingebaute Zustandsverwaltung (useState, useReducer, Context API): Wenn die Daten eng mit dem React-Komponentenbaum gekoppelt sind, sind diese eingebauten Optionen oft ausreichend.
• React Query/SWR: Für den Datenabruf bieten diese Bibliotheken ausgezeichnete Caching-, Invalidierungs- und Fehlerbehandlungs-Funktionen.
• Zustand/Jotai/Valtio: Diese minimalistischen Zustandsverwaltungs-Bibliotheken bieten eine einfache und effiziente Möglichkeit, den Anwendungszustand zu verwalten.
• Redux/MobX: Für komplexe Anwendungen mit globalem Zustand könnten Redux oder MobX eine bessere Wahl sein (obwohl sie mehr Boilerplate-Code mit sich bringen).

Die Wahl hängt von den spezifischen Anforderungen Ihrer Anwendung ab.

Fazit

useSyncExternalStore ist eine wertvolle Ergänzung zum React-Toolkit, die eine nahtlose Integration mit externen Zustandsquellen ermöglicht und gleichzeitig die Kompatibilität mit Concurrent Rendering aufrechterhält. Indem Sie seinen Zweck, seine Implementierung und seine fortgeschrittenen Anwendungsfälle verstehen, können Sie diesen Hook nutzen, um robuste und performante React-Anwendungen zu erstellen, die effektiv mit Daten aus verschiedenen Quellen interagieren.

Denken Sie daran, die Leistung zu priorisieren, Fehler ordnungsgemäß zu behandeln und alternative Lösungen in Betracht zu ziehen, bevor Sie zu useSyncExternalStore greifen. Mit sorgfältiger Planung und Implementierung kann dieser Hook die Flexibilität und Leistungsfähigkeit Ihrer React-Anwendungen erheblich steigern.

Weiterführende Informationen

• React-Dokumentation für useSyncExternalStore
• Beispiele mit verschiedenen Zustandsverwaltungs-Bibliotheken (Zustand, Jotai, Valtio)
• Performance-Benchmarks, die useSyncExternalStore mit anderen Ansätzen vergleichen