javascript / expert
Snippet
Synchronisation mit externen Stores via useSyncExternalStore
Der Hook useSyncExternalStore ist der empfohlene Weg, um externe Datenquellen in React 18+ zu abonnieren. Er verhindert 'Tearing' beim nebenläufigen Rendering, indem er sicherstellt, dass die UI während des gesamten Render-Zyklus synchron mit dem externen Status bleibt, was Standard-useEffect-Muster nicht garantieren können.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const store = {state: { count: 0 },listeners: new Set(),subscribe(cb) {this.listeners.add(cb);return () => this.listeners.delete(cb);},getSnapshot() { return this.state; },increment() {this.state = { count: this.state.count + 1 };this.listeners.forEach(l => l());}};function useExternalCounter() {return useSyncExternalStore(store.subscribe.bind(store),store.getSnapshot.bind(store));}
react
Erklärung
1
subscribe(cb) { ... }
Registriert einen Callback, den der Store bei jeder Statusänderung aufruft.
2
getSnapshot() { ... }
Gibt den aktuellen Wert des Stores zurück; muss bei unverändertem Store denselben Wert liefern.
3
useSyncExternalStore(...)
Abonniert den Store und gibt den Snapshot zurück; löst ein Re-Render nur bei Snapshot-Änderungen aus.