javascript / expert
Snippet
Synchronisierung externer Stores mit useSyncExternalStore
Der useSyncExternalStore-Hook ist der empfohlene Weg, um externe Datenquellen (wie Browser-APIs oder globalen Zustand) in Next.js/React zu abonnieren. Er stellt sicher, dass 'Tearing' während des Concurrent Renderings vermieden wird, und liefert einen konsistenten Snapshot der Daten, einschließlich Unterstützung für Server-Side Rendering (SSR) über das getServerSnapshot-Argument.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useSyncExternalStore } from 'react';const subscribe = (callback) => {window.addEventListener('online', callback);window.addEventListener('offline', callback);return () => {window.removeEventListener('online', callback);window.removeEventListener('offline', callback);};};const getSnapshot = () => navigator.onLine;const getServerSnapshot = () => true;function useOnlineStatus() {return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);}
nextjs
Erklärung
1
useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
Verbindet einen externen Store mit React und verwaltet das Abonnement sowie die Snapshot-Konsistenz.
2
const subscribe = (callback) => { ... };
Eine Funktion, die einen Listener registriert und eine Cleanup-Funktion zum Deabonnieren zurückgibt.
3
const getSnapshot = () => navigator.onLine;
Gibt den aktuellen Wert des externen Zustands zurück, der für das Rendering verwendet wird.