React useSyncExternalStore: Mestring af synkronisering med ekstern state

useSyncExternalStore er et React-hook, der blev introduceret i React 18, som giver dig mulighed for at abonnere på og læse fra eksterne datakilder på en måde, der er kompatibel med concurrent rendering. Dette hook bygger bro mellem Reacts administrerede state og ekstern state, såsom data fra tredjepartsbiblioteker, browser-API'er eller andre UI-frameworks. Lad os dykke dybt ned i at forstå dets formål, implementering og fordele.

Forståelse af behovet for useSyncExternalStore

Reacts indbyggede state-håndtering (useState, useReducer, Context API) fungerer exceptionelt godt for data, der er tæt koblet til Reacts komponenttræ. Mange applikationer har dog brug for at integrere med datakilder *uden for* Reacts kontrol. Disse eksterne kilder kan omfatte:

• Tredjeparts state-håndteringsbiblioteker: Integrering med biblioteker som Zustand, Jotai eller Valtio.
• Browser-API'er: Adgang til data fra localStorage, IndexedDB eller Network Information API.
• Data hentet fra servere: Selvom biblioteker som React Query og SWR ofte foretrækkes, kan man nogle gange ønske direkte kontrol.
• Andre UI-frameworks: I hybridapplikationer, hvor React eksisterer side om side med andre UI-teknologier.

At læse fra og skrive direkte til disse eksterne kilder i en React-komponent kan føre til problemer, især med concurrent rendering. React kan komme til at rendere en komponent med forældede data, hvis den eksterne kilde ændrer sig, mens React forbereder en ny skærm. useSyncExternalStore løser dette problem ved at levere en mekanisme, hvor React sikkert kan synkronisere med ekstern state.

Sådan fungerer useSyncExternalStore

useSyncExternalStore-hooket accepterer tre argumenter:

1. subscribe: En funktion, der accepterer et callback. Dette callback vil blive kaldt, hver gang den eksterne store ændrer sig. Funktionen skal returnere en funktion, der afmelder abonnementet på den eksterne store, når den kaldes.
2. getSnapshot: En funktion, der returnerer den aktuelle værdi af den eksterne store. React bruger denne funktion til at læse store'ns værdi under rendering.
3. getServerSnapshot (valgfri): En funktion, der returnerer den initiale værdi af den eksterne store på serveren. Dette er kun nødvendigt for server-side rendering (SSR). Hvis den ikke angives, vil React bruge getSnapshot på serveren.

Hooket returnerer den aktuelle værdi af den eksterne store, hentet fra getSnapshot-funktionen. React sikrer, at komponenten re-renderer, hver gang værdien returneret af getSnapshot ændrer sig, hvilket bestemmes ved en Object.is-sammenligning.

Grundlæggende eksempel: Synkronisering med localStorage

Lad os lave et simpelt eksempel, der bruger useSyncExternalStore til at synkronisere en værdi med localStorage.

```javascript import { useSyncExternalStore, useState, useEffect } from 'react'; function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem('myValue') || 'default'; } function getServerSnapshot() { return 'default'; // Or fetch from a cookie on the server } function MyComponent() { const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const [localValue, setLocalValue] = useState(value); useEffect(() => { setLocalValue(value); }, [value]); const setValue = (newValue) => { localStorage.setItem('myValue', newValue); }; const handleInputChange = (event) => { setValue(event.target.value); }; return ( ); } export default MyComponent; ```

I dette eksempel:

• subscribe: Lytter efter storage-hændelsen på window-objektet. Denne hændelse udløses, når localStorage bliver ændret af en anden fane eller et andet vindue.
• getSnapshot: Henter værdien af myValue fra localStorage.
• getServerSnapshot: Returnerer en standardværdi for server-side rendering. Denne kunne hentes fra en cookie, hvis brugeren tidligere havde sat en værdi.
• MyComponent: Bruger useSyncExternalStore til at abonnere på ændringer i localStorage og vise den aktuelle værdi.

Avancerede brugsscenarier og overvejelser

1. Integration med tredjeparts state-håndteringsbiblioteker

useSyncExternalStore er særligt effektivt, når man integrerer React-komponenter med eksterne state-håndteringsbiblioteker. Lad os se på et eksempel med Zustand:

```javascript import { useSyncExternalStore } from 'react'; import { create } from 'zustand'; const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), decrement: () => set((state) => ({ count: state.count - 1 })), })); function MyComponent() { const count = useSyncExternalStore( useStore.subscribe, useStore.getState, useStore.getState // Initial state on the server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

I dette eksempel bruges useSyncExternalStore til at abonnere på ændringer i Zustand-store'n. Bemærk, hvordan vi sender useStore.subscribe og useStore.getState direkte til hooket, hvilket gør integrationen problemfri.

2. Performanceoptimering med memoization

Da getSnapshot kaldes ved hver render, er det afgørende at sikre, at den er performant. Undgå dyre beregninger i getSnapshot. Hvis det er nødvendigt, kan du memoize resultatet af getSnapshot ved hjælp af useMemo eller lignende teknikker.

Overvej dette (potentielt problematiske) eksempel:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Large array listeners: [], subscribe(listener) { this.listeners.push(listener); return () => { this.listeners = this.listeners.filter((l) => l !== listener); }; }, setState(newData) { this.data = newData; this.listeners.forEach((listener) => listener()); }, getState() { return this.data; }, }; function ExpensiveComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => externalStore.getState().map(x => x * 2) // Expensive operation ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

I dette eksempel udfører getSnapshot (den inline-funktion, der sendes som det andet argument til useSyncExternalStore) en dyr map-operation på et stort array. Denne operation vil blive udført ved *hver* render, selvom de underliggende data ikke har ændret sig. For at optimere dette kan vi memoize resultatet:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (same as before) }; function OptimizedComponent() { const data = useSyncExternalStore( externalStore.subscribe, () => { return useMemo(() => externalStore.getState().map(x => x * 2), [externalStore.getState()]); } ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

Nu udføres map-operationen kun, når externalStore.getState() ændrer sig. Bemærk: du skal i virkeligheden dybdesammenligne `externalStore.getState()` eller bruge en anden strategi, hvis store'n muterer det samme objekt. Eksemplet er forenklet for demonstrationens skyld.

3. Håndtering af Concurrent Rendering

Den primære fordel ved useSyncExternalStore er dens kompatibilitet med Reacts concurrent rendering-funktioner. Concurrent rendering giver React mulighed for at forberede flere versioner af UI'et samtidigt. Når den eksterne store ændrer sig under en concurrent render, sikrer useSyncExternalStore, at React altid bruger de mest opdaterede data, når ændringerne committes til DOM'en.

Uden useSyncExternalStore kan komponenter rendere med forældede data, hvilket fører til visuelle uoverensstemmelser og uventet adfærd. useSyncExternalStore's getSnapshot-metode er designet til at være synkron og hurtig, hvilket giver React mulighed for hurtigt at afgøre, om den eksterne store har ændret sig under renderingen.

4. Overvejelser ved Server-Side Rendering (SSR)

Når du bruger useSyncExternalStore med server-side rendering, er det essentielt at levere getServerSnapshot-funktionen. Denne funktion bruges til at hente den initiale værdi af den eksterne store på serveren. Uden den vil React forsøge at bruge getSnapshot på serveren, hvilket måske ikke er muligt, hvis den eksterne store er afhængig af browserspecifikke API'er (f.eks. localStorage).

getServerSnapshot-funktionen bør returnere en standardværdi eller hente data fra en server-side kilde (f.eks. cookies, database). Dette sikrer, at den initiale HTML, der renderes på serveren, indeholder de korrekte data.

5. Fejlhåndtering

Robust fejlhåndtering er afgørende, især når man arbejder med eksterne datakilder. Indpak getSnapshot- og getServerSnapshot-funktionerne i try...catch-blokke for at håndtere potentielle fejl. Log fejlene korrekt og angiv fallback-værdier for at forhindre, at applikationen crasher.

6. Custom Hooks for Genanvendelighed

For at fremme genanvendelighed af kode kan du indkapsle useSyncExternalStore-logikken i et custom hook. Dette gør det lettere at dele logikken på tværs af flere komponenter.

Lad os f.eks. oprette et custom hook til at tilgå en specifik nøgle i localStorage:

```javascript import { useSyncExternalStore } from 'react'; function useLocalStorage(key, defaultValue) { function subscribe(callback) { window.addEventListener('storage', callback); return () => window.removeEventListener('storage', callback); } function getSnapshot() { return localStorage.getItem(key) || defaultValue; } function getServerSnapshot() { return defaultValue; } const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); const setValue = (newValue) => { localStorage.setItem(key, newValue); }; return [value, setValue]; } export default useLocalStorage; ```

Nu kan du nemt bruge dette hook i enhver komponent:

```javascript import useLocalStorage from './useLocalStorage'; function MyComponent() { const [name, setName] = useLocalStorage('userName', 'Guest'); return ( ); } ```

Bedste praksis

• Hold getSnapshot hurtig: Undgå dyre beregninger i getSnapshot-funktionen. Memoize resultatet, hvis det er nødvendigt.
• Angiv getServerSnapshot for SSR: Sørg for, at den initiale HTML, der renderes på serveren, indeholder de korrekte data.
• Brug Custom Hooks: Indkapsl useSyncExternalStore-logikken i custom hooks for bedre genanvendelighed og vedligeholdelse.
• Håndter fejl elegant: Indpak getSnapshot og getServerSnapshot i try...catch-blokke.
• Minimer abonnementer: Abonnér kun på de dele af den eksterne store, som komponenten rent faktisk har brug for. Dette reducerer unødvendige re-renders.
• Overvej alternativer: Vurder, om useSyncExternalStore virkelig er nødvendigt. For simple tilfælde kan andre state-håndteringsteknikker være mere passende.

Alternativer til useSyncExternalStore

Selvom useSyncExternalStore er et kraftfuldt værktøj, er det ikke altid den bedste løsning. Overvej disse alternativer:

• Indbygget state-håndtering (useState, useReducer, Context API): Hvis dataene er tæt koblet til Reacts komponenttræ, er disse indbyggede muligheder ofte tilstrækkelige.
• React Query/SWR: Til dataindhentning tilbyder disse biblioteker fremragende caching-, invaliderings- og fejlhåndteringsmuligheder.
• Zustand/Jotai/Valtio: Disse minimalistiske state-håndteringsbiblioteker tilbyder en simpel og effektiv måde at håndtere applikationens state på.
• Redux/MobX: Til komplekse applikationer med global state kan Redux eller MobX være et bedre valg (selvom de introducerer mere boilerplate).

Valget afhænger af de specifikke krav til din applikation.

Konklusion

useSyncExternalStore er en værdifuld tilføjelse til Reacts værktøjskasse, der muliggør problemfri integration med eksterne state-kilder, samtidig med at kompatibiliteten med concurrent rendering bevares. Ved at forstå dets formål, implementering og avancerede brugsscenarier kan du udnytte dette hook til at bygge robuste og performante React-applikationer, der interagerer effektivt med data fra forskellige kilder.

Husk at prioritere performance, håndtere fejl elegant og overveje alternative løsninger, før du griber til useSyncExternalStore. Med omhyggelig planlægning og implementering kan dette hook markant forbedre fleksibiliteten og styrken i dine React-applikationer.

Yderligere udforskning

• React-dokumentation for useSyncExternalStore
• Eksempler med forskellige state-håndteringsbiblioteker (Zustand, Jotai, Valtio)
• Performance-benchmarks, der sammenligner useSyncExternalStore med andre tilgange