React 18s useSyncExternalStore eliminiert Tearing bei externem State

useSyncExternalStore ermöglicht es einer Komponente, Daten zu lesen, die außerhalb von React liegen, ohne das Risiko visueller Fehler (Glitches) einzugehen, die durch Concurrent Rendering entstehen können. Es ersetzt das alte Muster, externe Werte mittels useEffect in den lokalen State zu ziehen – ein Muster, das zu „Tearing“ führen kann, bei dem Teile der UI während desselben Render-Vorgangs unterschiedliche Werte anzeigen.

Warum das alte Muster bei Concurrency scheitert

Vor React 18 war das gängige Rezept:

const [value, setValue] = useState(initial);
useEffect(() => {
  const unsubscribe = externalSource.subscribe(v => setValue(v));
  return unsubscribe;
}, []);

Der Effect läuft, nachdem die Komponente gerendert