React useSyncExternalStore: Die Synchronisierung externer Stores meistern

In modernen React-Anwendungen ist eine effektive Zustandsverwaltung entscheidend. Während React integrierte Lösungen für die Zustandsverwaltung wie useState und useReducer bereitstellt, erfordert die Integration mit externen Datenquellen oder Drittanbieter-Bibliotheken zur Zustandsverwaltung einen anspruchsvolleren Ansatz. Hier kommt useSyncExternalStore ins Spiel.

Was ist useSyncExternalStore?

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 nebenläufigem Rendering (Concurrent Rendering) kompatibel ist. Dies ist besonders wichtig beim Umgang mit Daten, die nicht direkt von React verwaltet werden, wie zum Beispiel:

• Drittanbieter-Bibliotheken zur Zustandsverwaltung: Redux, Zustand, Jotai, etc.
• Browser-APIs: localStorage, IndexedDB, etc.
• Externe Datenquellen: Server-sent Events, WebSockets, etc.

Vor useSyncExternalStore konnte die Synchronisierung externer Stores zu Tearing und Inkonsistenzen führen, insbesondere bei den nebenläufigen Rendering-Funktionen von React. Dieser Hook behebt diese Probleme, indem er eine standardisierte und performante Möglichkeit bietet, externe Daten mit Ihren React-Komponenten zu verbinden.

Warum useSyncExternalStore? Vorteile und Nutzen

Die Verwendung von useSyncExternalStore bietet mehrere entscheidende Vorteile:

• Sicherheit bei Nebenläufigkeit: Stellt sicher, dass Ihre Komponente immer eine konsistente Ansicht des externen Stores anzeigt, auch während nebenläufiger Render-Vorgänge. Dies verhindert Tearing-Probleme, bei denen Teile Ihrer Benutzeroberfläche inkonsistente Daten anzeigen könnten.
• Performance: Optimiert für hohe Leistung, minimiert unnötige Neu-Renderings. Es nutzt die internen Mechanismen von React, um Änderungen effizient zu abonnieren und die Komponente nur bei Bedarf zu aktualisieren.
• Standardisierte API: Bietet eine konsistente und vorhersagbare API für die Interaktion mit externen Stores, unabhängig von der zugrunde liegenden Implementierung.
• Reduzierter Boilerplate-Code: Vereinfacht den Prozess der Anbindung an externe Stores und reduziert die Menge an benutzerdefiniertem Code, den Sie schreiben müssen.
• Kompatibilität: Funktioniert nahtlos mit einer Vielzahl von externen Datenquellen und Zustandsverwaltungsbibliotheken.

Wie useSyncExternalStore funktioniert: Ein tiefer Einblick

Der useSyncExternalStore-Hook akzeptiert drei Argumente:

1. subscribe(callback: () => void): () => void: Eine Funktion, die einen Callback registriert, der benachrichtigt wird, wenn sich der externe Store ändert. Sie sollte eine Funktion zum Abbestellen (unsubscribe) zurückgeben. So erfährt React, wann der Store neue Daten hat.
2. getSnapshot(): T: Eine Funktion, die einen Schnappschuss (Snapshot) der Daten aus dem externen Store zurückgibt. Dieser Snapshot sollte ein einfacher, unveränderlicher Wert sein, den React verwenden kann, um festzustellen, ob sich die Daten geändert haben.
3. getServerSnapshot?(): T (Optional): Eine Funktion, die den anfänglichen Snapshot der Daten auf dem Server zurückgibt. Dies wird für serverseitiges Rendern (SSR) verwendet, um die Konsistenz zwischen Server und Client sicherzustellen. Wenn sie nicht bereitgestellt wird, verwendet React getSnapshot() während des Server-Renderings, was nicht für alle Szenarien ideal sein könnte.

Hier ist eine Aufschlüsselung, wie diese Argumente zusammenarbeiten:

1. Wenn die Komponente eingehängt (gemountet) wird, ruft useSyncExternalStore die subscribe-Funktion auf, um einen Callback zu registrieren.
2. Wenn sich der externe Store ändert, ruft er den über subscribe registrierten Callback auf.
3. Der Callback teilt React mit, dass die Komponente neu gerendert werden muss.
4. Während des Renderns ruft useSyncExternalStore getSnapshot auf, um die neuesten Daten aus dem externen Store zu erhalten.
5. React vergleicht den aktuellen Snapshot mit dem vorherigen. Wenn sie sich unterscheiden, wird die Komponente mit den neuen Daten aktualisiert.
6. Wenn die Komponente ausgehängt (unmounted) wird, wird die von subscribe zurückgegebene Abmeldefunktion aufgerufen, um Speicherlecks zu verhindern.

Grundlegendes Implementierungsbeispiel: Integration mit localStorage

Lassen Sie uns veranschaulichen, wie useSyncExternalStore mit einem einfachen Beispiel verwendet wird: dem Lesen und Schreiben eines Wertes in den localStorage.

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Behandelt potenzielle Fehler, z. B. wenn `localStorage` nicht verfügbar ist.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Oder ein Standardwert, falls für Ihr SSR-Setup geeignet

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Löst ein Storage-Event im aktuellen Fenster aus, um Updates auch im selben Fenster zu initiieren.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Hello, {name || 'World'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

Erklärung:

• getLocalStorageItem: Eine Hilfsfunktion, um den Wert sicher aus dem localStorage abzurufen und potenzielle Fehler zu behandeln.
• useLocalStorage: Ein benutzerdefinierter Hook, der die Logik für die Interaktion mit localStorage unter Verwendung von useSyncExternalStore kapselt.
• subscribe: Lauscht auf das 'storage'-Event, das ausgelöst wird, wenn localStorage in einem anderen Tab oder Fenster geändert wird. Entscheidend ist, dass wir nach dem Setzen eines neuen Wertes manuell ein Storage-Event auslösen, um Updates auch im *selben* Fenster korrekt zu initiieren.
• getSnapshot: Gibt den aktuellen Wert aus dem localStorage zurück.
• serverSnapshot: Gibt null (oder einen Standardwert) für serverseitiges Rendern zurück.
• setValue: Aktualisiert den Wert im localStorage und löst ein Storage-Event aus, um andere Tabs zu benachrichtigen.
• MyComponent: Eine einfache Komponente, die den useLocalStorage-Hook verwendet, um einen Namen anzuzeigen und zu aktualisieren.

Wichtige Überlegungen zu localStorage:

• Fehlerbehandlung: Umschließen Sie den Zugriff auf localStorage immer mit try...catch-Blöcken, um potenzielle Fehler zu behandeln, z. B. wenn localStorage deaktiviert oder nicht verfügbar ist (z. B. im privaten Browsing-Modus).
• Storage Events: Das 'storage'-Event wird nur ausgelöst, wenn localStorage in einem *anderen* Tab oder Fenster geändert wird, nicht im selben Fenster. Daher lösen wir nach dem Setzen eines Wertes manuell ein neues StorageEvent aus.
• Datenserialisierung: localStorage speichert nur Zeichenketten (Strings). Möglicherweise müssen Sie komplexe Datenstrukturen mit JSON.stringify und JSON.parse serialisieren und deserialisieren.
• Sicherheit: Seien Sie vorsichtig mit den Daten, die Sie im localStorage speichern, da sie für JavaScript-Code auf derselben Domain zugänglich sind. Sensible Informationen sollten nicht im localStorage gespeichert werden.

Fortgeschrittene Anwendungsfälle und Beispiele

1. Integration mit Zustand (oder anderen Zustandsverwaltungsbibliotheken)

Die Integration von useSyncExternalStore mit einer globalen Zustandsverwaltungsbibliothek wie Zustand ist ein häufiger Anwendungsfall. Hier ist ein Beispiel:

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Server-Snapshot, Standardzustand bereitstellen
  ).bears
  return <h1>{bears} bears around here!</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>one bear</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

Erklärung:

• Wir verwenden Zustand für die globale Zustandsverwaltung.
• useStore.subscribe: Diese Funktion abonniert den Zustand-Store und löst Neu-Renderings aus, wenn sich der Zustand des Stores ändert.
• useStore.getState: Diese Funktion gibt den aktuellen Zustand des Zustand-Stores zurück.
• Der dritte Parameter stellt einen Standardzustand für serverseitiges Rendern (SSR) bereit und stellt sicher, dass die Komponente auf dem Server korrekt gerendert wird, bevor das clientseitige JavaScript die Kontrolle übernimmt.
• Die Komponente erhält die Anzahl der Bären über useSyncExternalStore und rendert sie.
• Die Controls-Komponente zeigt, wie ein Zustand-Setter verwendet wird.

2. Integration mit Server-Sent Events (SSE)

useSyncExternalStore kann verwendet werden, um Komponenten effizient auf der Grundlage von Echtzeitdaten von einem Server mittels Server-Sent Events (SSE) zu aktualisieren.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState(null);
  const [eventSource, setEventSource] = useState(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Durch Ihren SSE-Endpunkt ersetzen

  if (!realTimeData) {
    return <p>Loading...</p>;
  }

  return <div><p>Real-time Data: {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

Erklärung:

• useSSE: Ein benutzerdefinierter Hook, der eine SSE-Verbindung zu einer gegebenen URL aufbaut.
• subscribe: Fügt dem EventSource-Objekt einen Event-Listener hinzu, um über neue Nachrichten vom Server benachrichtigt zu werden. Es verwendet useCallback, um sicherzustellen, dass die Callback-Funktion nicht bei jedem Render neu erstellt wird.
• getSnapshot: Gibt die zuletzt empfangenen Daten aus dem SSE-Stream zurück.
• serverSnapshot: Gibt null für serverseitiges Rendern zurück.
• RealTimeDataComponent: Eine Komponente, die den useSSE-Hook verwendet, um Echtzeitdaten anzuzeigen.

3. Integration mit IndexedDB

Synchronisieren Sie React-Komponenten mit in IndexedDB gespeicherten Daten unter Verwendung von useSyncExternalStore.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Ersetzen Sie dies durch Ihren Datenbanknamen und Ihre Version

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Ersetzen Sie dies durch Ihren Store-Namen
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Den Callback debouncen, um übermäßige Neu-Renderings zu verhindern.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Passen Sie die Debounce-Verzögerung nach Bedarf an
    };

    const handleVisibilityChange = () => {
      // Daten neu abrufen, wenn der Tab wieder sichtbar wird
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Die neuesten Daten aus IndexedDB bei jedem Aufruf von getSnapshot abrufen
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Loading data from IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Data from IndexedDB:</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

Erklärung:

• getAllData: Eine asynchrone Funktion, die alle Daten aus dem IndexedDB-Store abruft.
• useIndexedDBData: Ein benutzerdefinierter Hook, der useSyncExternalStore verwendet, um Änderungen in IndexedDB zu abonnieren.
• subscribe: Richtet Listener für Sichtbarkeits- und Fokusänderungen ein, um die Daten aus IndexedDB zu aktualisieren, und verwendet eine Debounce-Funktion, um übermäßige Updates zu vermeiden.
• getSnapshot: Ruft den aktuellen Snapshot ab, indem `getAllData()` aufgerufen und dann die `data` aus dem State zurückgegeben werden.
• serverSnapshot: Gibt null für serverseitiges Rendern zurück.
• IndexedDBComponent: Eine Komponente, die die Daten aus IndexedDB anzeigt.

Wichtige Überlegungen zu IndexedDB:

• Asynchrone Operationen: Interaktionen mit IndexedDB sind asynchron, daher müssen Sie die asynchrone Natur des Datenabrufs und der Aktualisierungen sorgfältig behandeln.
• Fehlerbehandlung: Implementieren Sie eine robuste Fehlerbehandlung, um potenzielle Probleme beim Datenbankzugriff, wie z. B. nicht gefundene Datenbanken oder Berechtigungsfehler, ordnungsgemäß zu behandeln.
• Datenbankversionierung: Verwalten Sie Datenbankversionen sorgfältig mit dem onupgradeneeded-Event, um die Datenkompatibilität sicherzustellen, während sich Ihre Anwendung weiterentwickelt.
• Performance: IndexedDB-Operationen können relativ langsam sein, insbesondere bei großen Datensätzen. Optimieren Sie Abfragen und Indizierungen, um die Leistung zu verbessern.

Überlegungen zur Performance

Obwohl useSyncExternalStore für die Performance optimiert ist, gibt es dennoch einige Überlegungen, die man beachten sollte:

• Minimieren Sie Snapshot-Änderungen: Stellen Sie sicher, dass die getSnapshot-Funktion nur dann einen neuen Snapshot zurückgibt, wenn sich die Daten tatsächlich geändert haben. Vermeiden Sie das unnötige Erstellen neuer Objekte oder Arrays. Erwägen Sie die Verwendung von Memoization-Techniken, um die Erstellung von Snapshots zu optimieren.
• Batch-Updates: Bündeln Sie, wenn möglich, Aktualisierungen des externen Stores, um die Anzahl der Neu-Renderings zu reduzieren. Wenn Sie beispielsweise mehrere Eigenschaften im Store aktualisieren, versuchen Sie, sie alle in einer einzigen Transaktion zu aktualisieren.
• Debouncing/Throttling: Wenn sich der externe Store häufig ändert, sollten Sie ein Debouncing oder Throttling der Updates für die React-Komponente in Betracht ziehen. Dies kann übermäßige Neu-Renderings verhindern und die Leistung verbessern. Dies ist besonders nützlich bei volatilen Stores wie der Größenänderung des Browserfensters.
• Flacher Vergleich (Shallow Comparison): Stellen Sie sicher, dass Sie in getSnapshot primitive Werte oder unveränderliche Objekte zurückgeben, damit React schnell durch einen flachen Vergleich feststellen kann, ob sich die Daten geändert haben.
• Bedingte Updates: In Fällen, in denen sich der externe Store häufig ändert, Ihre Komponente aber nur auf bestimmte Änderungen reagieren muss, sollten Sie bedingte Updates innerhalb der `subscribe`-Funktion implementieren, um unnötige Neu-Renderings zu vermeiden.

Häufige Fallstricke und Fehlerbehebung

• Tearing-Probleme: Wenn Sie nach der Verwendung von useSyncExternalStore immer noch Tearing-Probleme haben, überprüfen Sie, ob Ihre getSnapshot-Funktion eine konsistente Ansicht der Daten zurückgibt und die subscribe-Funktion React korrekt über Änderungen benachrichtigt. Stellen Sie sicher, dass Sie die Daten nicht direkt innerhalb der getSnapshot-Funktion mutieren.
• Endlosschleifen: Eine Endlosschleife kann auftreten, wenn die getSnapshot-Funktion immer einen neuen Wert zurückgibt, auch wenn sich die Daten nicht geändert haben. Dies kann passieren, wenn Sie unnötig neue Objekte oder Arrays erstellen. Stellen Sie sicher, dass Sie denselben Wert zurückgeben, wenn sich die Daten nicht geändert haben.
• Fehlendes serverseitiges Rendering: Wenn Sie serverseitiges Rendering verwenden, stellen Sie sicher, dass Sie eine getServerSnapshot-Funktion bereitstellen, damit die Komponente auf dem Server korrekt gerendert wird. Diese Funktion sollte den Anfangszustand des externen Stores zurückgeben.
• Falsches Abbestellen (Unsubscribe): Stellen Sie immer sicher, dass Sie sich korrekt vom externen Store innerhalb der von subscribe zurückgegebenen Funktion abmelden. Andernfalls kann es zu Speicherlecks kommen.
• Falsche Verwendung im Concurrent Mode: Stellen Sie sicher, dass Ihr externer Store mit dem Concurrent Mode kompatibel ist. Vermeiden Sie Mutationen am externen Store, während React rendert. Mutationen sollten synchron und vorhersagbar sein.

Fazit

useSyncExternalStore ist ein leistungsstarkes Werkzeug zur Synchronisierung von React-Komponenten mit externen Datenspeichern. Indem Sie verstehen, wie es funktioniert, und Best Practices befolgen, können Sie sicherstellen, dass Ihre Komponenten konsistente und aktuelle Daten anzeigen, selbst in komplexen Szenarien mit nebenläufigem Rendering. Dieser Hook vereinfacht die Integration mit verschiedenen Datenquellen, von Drittanbieter-Zustandsverwaltungsbibliotheken über Browser-APIs bis hin zu Echtzeit-Datenströmen, was zu robusteren und performanteren React-Anwendungen führt. Denken Sie daran, immer potenzielle Fehler zu behandeln, die Leistung zu optimieren und Abonnements sorgfältig zu verwalten, um häufige Fallstricke zu vermeiden.