React useSyncExternalStore: Die Integration externer Zustände meistern

Der useSyncExternalStore-Hook von React, eingeführt in React 18, bietet eine leistungsstarke und effiziente Möglichkeit, externe Datenquellen und Zustandsverwaltungsbibliotheken in Ihre React-Komponenten zu integrieren. Dieser Hook ermöglicht es Komponenten, Änderungen in externen Stores zu abonnieren, um sicherzustellen, dass die Benutzeroberfläche immer die neuesten Daten widerspiegelt und gleichzeitig die Leistung optimiert wird. Dieser Leitfaden bietet einen umfassenden Überblick über useSyncExternalStore und behandelt seine Kernkonzepte, Anwendungsmuster und Best Practices.

Die Notwendigkeit von useSyncExternalStore verstehen

In vielen React-Anwendungen werden Sie auf Szenarien stoßen, in denen der Zustand außerhalb des Komponentenbaums verwaltet werden muss. Dies ist häufig der Fall, wenn es sich um Folgendes handelt:

• Bibliotheken von Drittanbietern: Integration mit Bibliotheken, die ihren eigenen Zustand verwalten (z. B. eine Datenbankverbindung, eine Browser-API oder eine Physik-Engine).
• Geteilter Zustand über Komponenten hinweg: Verwaltung von Zuständen, die zwischen nicht direkt verwandten Komponenten geteilt werden müssen (z. B. Benutzerauthentifizierungsstatus, Anwendungseinstellungen oder ein globaler Event-Bus).
• Externe Datenquellen: Abrufen und Anzeigen von Daten aus externen APIs oder Datenbanken.

Traditionelle Lösungen zur Zustandsverwaltung wie useState und useReducer eignen sich gut für die Verwaltung des lokalen Komponentenzustands. Sie sind jedoch nicht dafür ausgelegt, externe Zustände effektiv zu handhaben. Ihre direkte Verwendung mit externen Datenquellen kann zu Leistungsproblemen, inkonsistenten Updates und komplexem Code führen.

useSyncExternalStore begegnet diesen Herausforderungen, indem es eine standardisierte und optimierte Methode zum Abonnieren von Änderungen in externen Stores bereitstellt. Es stellt sicher, dass Komponenten nur dann neu gerendert werden, wenn sich die relevanten Daten ändern, was unnötige Updates minimiert und die Gesamtleistung verbessert.

Kernkonzepte von useSyncExternalStore

useSyncExternalStore akzeptiert drei Argumente:

1. subscribe: Eine Funktion, die einen Callback als Argument entgegennimmt und den externen Store abonniert. Der Callback wird aufgerufen, wann immer sich die Daten des Stores ändern.
2. getSnapshot: Eine Funktion, die einen Snapshot der Daten aus dem externen Store zurückgibt. Diese Funktion sollte einen stabilen Wert zurückgeben, den React verwenden kann, um festzustellen, ob sich die Daten geändert haben. Sie muss rein und schnell sein.
3. getServerSnapshot (optional): Eine Funktion, die den initialen Wert des Stores während des serverseitigen Renderings zurückgibt. Dies ist entscheidend, um sicherzustellen, dass das initiale HTML mit dem clientseitigen Rendering übereinstimmt. Es wird NUR in serverseitigen Rendering-Umgebungen verwendet. Wenn es in einer clientseitigen Umgebung weggelassen wird, wird stattdessen getSnapshot verwendet. Es ist wichtig, dass sich dieser Wert nach dem erstmaligen Rendern auf der Serverseite niemals ändert.

Hier ist eine Aufschlüsselung der einzelnen Argumente:

1. subscribe

Die subscribe-Funktion ist für den Aufbau einer Verbindung zwischen der React-Komponente und dem externen Store verantwortlich. Sie erhält eine Callback-Funktion, die sie aufrufen sollte, wann immer sich die Daten des Stores ändern. Dieser Callback wird typischerweise verwendet, um ein erneutes Rendern der Komponente auszulösen.

Beispiel:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

In diesem Beispiel fügt store.addListener den Callback zur Liste der Listener des Stores hinzu. Die Funktion gibt eine Bereinigungsfunktion zurück, die den Listener entfernt, wenn die Komponente unmounted wird, um Speicherlecks zu verhindern.

2. getSnapshot

Die getSnapshot-Funktion ist für das Abrufen eines Snapshots der Daten aus dem externen Store verantwortlich. Dieser Snapshot sollte ein stabiler Wert sein, den React verwenden kann, um festzustellen, ob sich die Daten geändert haben. React verwendet Object.is, um den aktuellen Snapshot mit dem vorherigen Snapshot zu vergleichen. Daher muss sie schnell sein, und es wird dringend empfohlen, dass sie einen primitiven Wert (String, Zahl, Boolean, Null oder Undefined) zurückgibt.

Beispiel:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

In diesem Beispiel gibt store.getData die aktuellen Daten aus dem Store zurück. React vergleicht diesen Wert mit dem vorherigen Wert, um zu bestimmen, ob die Komponente neu gerendert werden muss.

3. getServerSnapshot (Optional)

Die getServerSnapshot-Funktion ist nur relevant, wenn serverseitiges Rendering (SSR) verwendet wird. Diese Funktion wird während des initialen Server-Renderings aufgerufen, und ihr Ergebnis wird als initialer Wert des Stores verwendet, bevor die Hydration auf dem Client stattfindet. Die Rückgabe konsistenter Werte ist für ein erfolgreiches SSR entscheidend.

Beispiel:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

In diesem Beispiel gibt `store.getInitialDataForServer` die für das serverseitige Rendering geeigneten initialen Daten zurück.

Grundlegendes Anwendungsbeispiel

Betrachten wir ein einfaches Beispiel, bei dem wir einen externen Store haben, der einen Zähler verwaltet. Wir können useSyncExternalStore verwenden, um den Zählerwert in einer React-Komponente anzuzeigen:

            // Externer Store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-Komponente
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={increment}>Erhöhen</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

In diesem Beispiel erstellt createStore einen einfachen externen Store, der einen Zählerwert verwaltet. Die Counter-Komponente verwendet useSyncExternalStore, um Änderungen im Store zu abonnieren und den aktuellen Zählerstand anzuzeigen. Wenn auf die Schaltfläche zum Inkrementieren geklickt wird, aktualisiert die setState-Funktion den Wert des Stores, was ein erneutes Rendern der Komponente auslöst.

Integration mit Zustandsverwaltungsbibliotheken

useSyncExternalStore ist besonders nützlich für die Integration mit Zustandsverwaltungsbibliotheken wie Zustand, Jotai und Recoil. Diese Bibliotheken bieten ihre eigenen Mechanismen zur Zustandsverwaltung, und useSyncExternalStore ermöglicht es Ihnen, sie nahtlos in Ihre React-Komponenten zu integrieren.

Hier ist ein Beispiel für die Integration mit Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand-Store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React-Komponente
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={increment}>Erhöhen</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand vereinfacht die Erstellung des Stores. Seine internen subscribe- und getSnapshot-Implementierungen werden implizit verwendet, wenn Sie einen bestimmten Zustand abonnieren.

Hier ist ein Beispiel für die Integration mit Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai-Atom
const countAtom = atom(0)

// React-Komponente
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={() => setCount(count + 1)}>Erhöhen</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai verwendet Atome zur Zustandsverwaltung. useAtom kümmert sich intern um das Abonnieren und das Erstellen von Snapshots.

Leistungsoptimierung

useSyncExternalStore bietet mehrere Mechanismen zur Leistungsoptimierung:

• Selektive Updates: React rendert die Komponente nur dann neu, wenn sich der von getSnapshot zurückgegebene Wert ändert. Dies stellt sicher, dass unnötige Neu-Renderings vermieden werden.
• Bündelung von Updates: React bündelt Updates von mehreren externen Stores in einem einzigen Neu-Rendering. Dies reduziert die Anzahl der Neu-Renderings und verbessert die Gesamtleistung.
• Vermeidung von veralteten Closures: useSyncExternalStore stellt sicher, dass die Komponente immer Zugriff auf die neuesten Daten aus dem externen Store hat, auch bei asynchronen Updates.

Um die Leistung weiter zu optimieren, beachten Sie die folgenden Best Practices:

• Minimieren Sie die von getSnapshot zurückgegebene Datenmenge: Geben Sie nur die Daten zurück, die von der Komponente tatsächlich benötigt werden. Dies reduziert die Datenmenge, die verglichen werden muss, und verbessert die Effizienz des Update-Prozesses.
• Verwenden Sie Memoisierungstechniken: Memoisieren Sie die Ergebnisse teurer Berechnungen oder Datentransformationen. Dies kann unnötige Neuberechnungen verhindern und die Leistung verbessern.
• Vermeiden Sie unnötige Abonnements: Abonnieren Sie den externen Store nur, wenn die Komponente tatsächlich sichtbar ist. Dies kann die Anzahl der aktiven Abonnements reduzieren und die Gesamtleistung verbessern.
• Stellen Sie sicher, dass getSnapshot nur dann ein neues *stabiles* Objekt zurückgibt, wenn sich die Daten geändert haben: Vermeiden Sie das Erstellen neuer Objekte/Arrays/Funktionen, wenn sich die zugrunde liegenden Daten nicht tatsächlich geändert haben. Geben Sie wenn möglich dasselbe Objekt per Referenz zurück.

Serverseitiges Rendering (SSR) mit useSyncExternalStore

Bei der Verwendung von useSyncExternalStore mit serverseitigem Rendering (SSR) ist es entscheidend, eine getServerSnapshot-Funktion bereitzustellen. Diese Funktion stellt sicher, dass das auf dem Server gerenderte initiale HTML mit dem clientseitigen Rendering übereinstimmt, was Hydrationsfehler verhindert und die Benutzererfahrung verbessert.

Hier ist ein Beispiel für die Verwendung von getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Wichtig für SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-Komponente
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Zähler: {count}</p>
      <button onClick={increment}>Erhöhen</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

In diesem Beispiel gibt getServerSnapshot den initialen Wert des Zählers zurück. Dies stellt sicher, dass das auf dem Server gerenderte initiale HTML mit dem clientseitigen Rendering übereinstimmt. Der `getServerSnapshot` sollte einen stabilen und vorhersagbaren Wert zurückgeben. Er sollte auch die gleiche Logik wie die getSnapshot-Funktion auf dem Server ausführen. Vermeiden Sie den Zugriff auf browserspezifische APIs oder globale Variablen in getServerSnapshot.

Fortgeschrittene Anwendungsmuster

useSyncExternalStore kann in einer Vielzahl von fortgeschrittenen Szenarien verwendet werden, einschließlich:

• Integration mit Browser-APIs: Abonnieren von Änderungen in Browser-APIs wie localStorage oder navigator.onLine.
• Erstellen von Custom Hooks: Kapselung der Logik zum Abonnieren eines externen Stores in einem Custom Hook.
• Verwendung mit der Context API: Kombination von useSyncExternalStore mit der React Context API, um einen geteilten Zustand für einen Komponentenbaum bereitzustellen.

Schauen wir uns ein Beispiel für die Erstellung eines Custom Hooks zum Abonnieren von localStorage an:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Fehler beim Abrufen des Werts aus dem localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Manuelles Auslösen des Storage-Events für Updates auf derselben Seite
    } catch (error) {
      console.error("Fehler beim Setzen des Werts im localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

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

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

In diesem Beispiel ist useLocalStorage ein Custom Hook, der Änderungen im localStorage abonniert. Er verwendet useSyncExternalStore, um das Abonnement zu verwalten und den aktuellen Wert aus dem localStorage abzurufen. Er löst auch korrekt ein Storage-Event aus, um sicherzustellen, dass Updates auf derselben Seite widergespiegelt werden (da `storage`-Events nur in anderen Tabs ausgelöst werden). Der serverSnapshot stellt sicher, dass initiale Werte in Server-Umgebungen korrekt bereitgestellt werden.

Best Practices und häufige Fallstricke

Hier sind einige Best Practices und häufige Fallstricke, die bei der Verwendung von useSyncExternalStore zu vermeiden sind:

• Vermeiden Sie die direkte Mutation des externen Stores: Verwenden Sie immer die API des Stores, um die Daten zu aktualisieren. Die direkte Mutation des Stores kann zu inkonsistenten Updates und unerwartetem Verhalten führen.
• Stellen Sie sicher, dass getSnapshot rein und schnell ist: getSnapshot sollte keine Nebeneffekte haben und schnell einen stabilen Wert zurückgeben. Teure Berechnungen oder Datentransformationen sollten memoisiert werden.
• Stellen Sie bei Verwendung von SSR eine getServerSnapshot-Funktion bereit: Dies ist entscheidend, um sicherzustellen, dass das auf dem Server gerenderte initiale HTML mit dem clientseitigen Rendering übereinstimmt.
• Behandeln Sie Fehler ordnungsgemäß: Verwenden Sie Try-Catch-Blöcke, um potenzielle Fehler beim Zugriff auf den externen Store zu behandeln.
• Bereinigen Sie Abonnements: Melden Sie sich immer vom externen Store ab, wenn die Komponente unmounted wird, um Speicherlecks zu verhindern. Die subscribe-Funktion sollte eine Bereinigungsfunktion zurückgeben, die den Listener entfernt.
• Verstehen Sie die Auswirkungen auf die Leistung: Obwohl useSyncExternalStore für Leistung optimiert ist, ist es wichtig, die potenziellen Auswirkungen des Abonnierens externer Stores zu verstehen. Minimieren Sie die von getSnapshot zurückgegebene Datenmenge und vermeiden Sie unnötige Abonnements.
• Testen Sie gründlich: Stellen Sie sicher, dass die Integration mit dem Store in verschiedenen Szenarien korrekt funktioniert, insbesondere beim serverseitigen Rendering und im Concurrent Mode.

Fazit

useSyncExternalStore ist ein leistungsstarker und effizienter Hook zur Integration externer Datenquellen und Zustandsverwaltungsbibliotheken in Ihre React-Komponenten. Durch das Verständnis seiner Kernkonzepte, Anwendungsmuster und Best Practices können Sie den geteilten Zustand in Ihren React-Anwendungen effektiv verwalten und die Leistung optimieren. Egal, ob Sie Drittanbieter-Bibliotheken integrieren, den geteilten Zustand über Komponenten hinweg verwalten oder Daten von externen APIs abrufen – useSyncExternalStore bietet eine standardisierte und zuverlässige Lösung. Nutzen Sie ihn, um robustere, wartbarere und performantere React-Anwendungen für ein globales Publikum zu erstellen.

Weiterführende Ressourcen

• React-Dokumentation zu useSyncExternalStore
• React 18 Pull Request zur Einführung von useSyncExternalStore
• Zustand State Management Library
• Jotai State Management Library