javascript / intermediate
Snippet
Abonnieren externer Daten mit useSyncExternalStore
Dieser Hook ist der empfohlene Weg, um externe Datenquellen (wie Browser-APIs oder Nicht-React-Stores) so zu abonnieren, dass sie mit dem Concurrent-Rendering von React kompatibel sind.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { useSyncExternalStore } from 'react';const isOnline = useSyncExternalStore((onStoreChange) => {window.addEventListener('online', onStoreChange);window.addEventListener('offline', onStoreChange);return () => {window.removeEventListener('online', onStoreChange);window.removeEventListener('offline', onStoreChange);};},() => navigator.onLine);
react
Erklärung
1
useSyncExternalStore(subscribe, getSnapshot)
Akzeptiert eine Abonnement-Funktion und eine Funktion zum Abrufen des aktuellen Werts aus der externen Quelle.