Welches Problem löst useSyncExternalStore gegenüber useState + useEffect?

Dass zwei Komponenten im selben Bild unterschiedliche Werte anzeigen (Fachbegriff: Tearing) — Beim unterbrechbaren Rendern kann ein Effect zu spät kommen. Dieser Hook liest den Wert genau dann, wenn React ihn braucht.

Warum führt getSnapshot: () => ({ breite: window.innerWidth }) zu einer Endlosschleife?

Jeder Aufruf liefert ein neues Objekt – React hält das für eine Änderung. — React vergleicht das Ergebnis mit Object.is. Gib einen primitiven Wert zurück oder speichere das Objekt zwischen und erzeuge es nur bei echten Änderungen neu.

Wozu dient der dritte Parameter getServerSnapshot?

Er liefert den Wert beim Server-Rendering, wo Browser-APIs fehlen. — Ohne ihn stürzt das Rendern auf dem Server ab, sobald getSnapshot auf window oder navigator zugreift.

← Zur Übersicht

Fortgeschritten 9 Min Lesezeit

useSyncExternalStore

React an etwas anschließen, das außerhalb von React lebt

Baut auf: useEffect

In einem Satz

Der offizielle Weg, React an etwas anzuschließen, das außerhalb von React lebt – zum Beispiel „ist der Browser online?“.

Gut zu wissen Den brauchst du selten selbst

Er ist vor allem für Bibliotheken gedacht. Trotzdem lohnt sich der Blick: Er erklärt, wie Zustand, Redux und ähnliche Werkzeuge heute an React andocken – und für Browser-Werte ist er die sauberste Lösung.

Es gibt Werte, die React nicht gehören: ob der Browser online ist, wie breit das Fenster ist, was in einem eigenen Datenspeicher steht. React erfährt von deren Änderungen nur, wenn ihm jemand Bescheid sagt. Genau das regelt dieser Hook.

signatur.ts

const wert = useSyncExternalStore(
  subscribe,        // (aufwachen) => aufräumen   – meldet Änderungen an React
  getSnapshot,      // () => aktueller Wert       – im Client
  getServerSnapshot // () => Wert beim SSR        – optional, aber in Next.js wichtig
);

online.tsx

function subscribe(aufwachen: () => void) {
  window.addEventListener("online", aufwachen);
  window.addEventListener("offline", aufwachen);
  return () => {
    window.removeEventListener("online", aufwachen);
    window.removeEventListener("offline", aufwachen);
  };
}

export function useOnline() {
  return useSyncExternalStore(
    subscribe,
    () => navigator.onLine,   // Client
    () => true                // Server: nimm "online" an
  );
}

Warum nicht einfach useState + useEffect?

✕ kann kurz veraltet sein (Tearing)

const [online, setOnline] = useState(navigator.onLine);

useEffect(() => {
  const f = () => setOnline(navigator.onLine);
  window.addEventListener("online", f);
  window.addEventListener("offline", f);
  return () => { … };
}, []);

✓ immer konsistent

const online = useSyncExternalStore(
  subscribe,
  () => navigator.onLine,
  () => true
);

Beim unterbrechbaren Rendern (Transitions, Suspense) kann die Effect-Variante dazu führen, dass zwei Komponenten im selben Bild verschiedene Werte anzeigen. Genau das verhindert dieser Hook.

Stolperstein getSnapshot muss stabile Werte liefern

Gibt die Funktion bei jedem Aufruf ein neues Objekt zurück (() => ({ x: w.innerWidth })), rendert React endlos. Liefere primitive Werte oder halte das Objekt zwischengespeichert.

Nimm es, wenn …

+
Browser-Werte abonnieren: navigator.onLine, matchMedia, localStorage
+
Eine eigene Store-Datei außerhalb von React anbinden
+
Wenn du eine State-Bibliothek baust

Lass es, wenn …

−
Normalen Komponenten-State – dafür ist useState da
−
Serverdaten – dafür gibt es Query-Bibliotheken

Sitzt das schon?

3 Fragen zu dieser Lektion. Falsche Antworten landen in deiner Statistik.

Sitzt das schon?

Ihr braucht React-Verstärkung im Team?