React useSyncExternalStore: Bemästra synkronisering av externt tillstånd

useSyncExternalStore är en React-hook som introducerades i React 18 och som låter dig prenumerera på och läsa från externa datakällor på ett sätt som är kompatibelt med samtidig rendering (concurrent rendering). Denna hook överbryggar klyftan mellan Reacts hanterade tillstånd och externt tillstånd, såsom data från tredjepartsbibliotek, webbläsar-API:er eller andra UI-ramverk. Låt oss dyka djupt in för att förstå dess syfte, implementering och fördelar.

Förstå behovet av useSyncExternalStore

Reacts inbyggda tillståndshantering (useState, useReducer, Context API) fungerar exceptionellt bra för data som är tätt kopplad till Reacts komponentträd. Många applikationer behöver dock integreras med datakällor *utanför* Reacts kontroll. Dessa externa källor kan inkludera:

• Tredjepartsbibliotek för tillståndshantering: Integrering med bibliotek som Zustand, Jotai eller Valtio.
• Webbläsar-API:er: Åtkomst till data från localStorage, IndexedDB eller Network Information API.
• Data hämtad från servrar: Även om bibliotek som React Query och SWR ofta föredras, vill man ibland ha direkt kontroll.
• Andra UI-ramverk: I hybridapplikationer där React samexisterar med andra UI-teknologier.

Att direkt läsa från och skriva till dessa externa källor inom en React-komponent kan leda till problem, särskilt med samtidig rendering. React kan rendera en komponent med inaktuell data om den externa källan ändras medan React förbereder en ny skärm. useSyncExternalStore löser detta problem genom att tillhandahålla en mekanism för React att säkert synkronisera med externt tillstånd.

Hur useSyncExternalStore fungerar

useSyncExternalStore-hooken accepterar tre argument:

1. subscribe: En funktion som accepterar en callback. Denna callback kommer att anropas när det externa "store" ändras. Funktionen ska returnera en funktion som, när den anropas, avbryter prenumerationen från det externa "store".
2. getSnapshot: En funktion som returnerar det nuvarande värdet av det externa "store". React använder denna funktion för att läsa värdet under rendering.
3. getServerSnapshot (valfritt): En funktion som returnerar det initiala värdet av det externa "store" på servern. Detta är endast nödvändigt för server-side rendering (SSR). Om den inte tillhandahålls kommer React att använda getSnapshot på servern.

Hooken returnerar det nuvarande värdet från det externa "store", hämtat från getSnapshot-funktionen. React säkerställer att komponenten renderas om när värdet som returneras av getSnapshot ändras, vilket bestäms med en Object.is-jämförelse.

Grundläggande exempel: Synkronisering med localStorage

Låt oss skapa ett enkelt exempel som använder useSyncExternalStore för att synkronisera ett värde 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 detta exempel:

• subscribe: Lyssnar efter storage-händelsen på window-objektet. Denna händelse utlöses när localStorage modifieras av en annan flik eller ett annat fönster.
• getSnapshot: Hämtar värdet för myValue från localStorage.
• getServerSnapshot: Returnerar ett standardvärde för server-side rendering. Detta skulle kunna hämtas från en cookie om användaren tidigare har satt ett värde.
• MyComponent: Använder useSyncExternalStore för att prenumerera på ändringar i localStorage och visa det nuvarande värdet.

Avancerade användningsfall och överväganden

1. Integrering med tredjepartsbibliotek för tillståndshantering

useSyncExternalStore är särskilt användbar vid integrering av React-komponenter med externa bibliotek för tillståndshantering. Låt oss titta på ett exempel 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 detta exempel används useSyncExternalStore för att prenumerera på ändringar i Zustand-store. Notera hur vi skickar useStore.subscribe och useStore.getState direkt till hooken, vilket gör integrationen sömlös.

2. Prestandaoptimering med memoization

Eftersom getSnapshot anropas vid varje rendering är det avgörande att se till att den är prestandaeffektiv. Undvik dyra beräkningar inom getSnapshot. Om nödvändigt, memoizera resultatet av getSnapshot med hjälp av useMemo eller liknande tekniker.

Tänk på detta (potentiellt problematiska) exempel:

```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 detta exempel utför getSnapshot (den inbäddade funktionen som skickas som det andra argumentet till useSyncExternalStore) en dyr map-operation på en stor array. Denna operation kommer att köras vid *varje* rendering, även om den underliggande datan inte har ändrats. För att optimera detta kan vi memoizera 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 utförs map-operationen endast när externalStore.getState() ändras. Notera: du kommer faktiskt att behöva göra en djup jämförelse av `externalStore.getState()` eller använda en annan strategi om ditt store muterar samma objekt. Exemplet är förenklat för demonstrationens skull.

3. Hantering av concurrent rendering

Den primära fördelen med useSyncExternalStore är dess kompatibilitet med Reacts funktioner för samtidig rendering (concurrent rendering). Samtidig rendering gör att React kan förbereda flera versioner av UI:t samtidigt. När det externa "store" ändras under en samtidig rendering, säkerställer useSyncExternalStore att React alltid använder den mest uppdaterade datan när ändringarna appliceras på DOM.

Utan useSyncExternalStore kan komponenter rendera med inaktuell data, vilket leder till visuella inkonsekvenser och oväntat beteende. useSyncExternalStores getSnapshot-metod är designad för att vara synkron och snabb, vilket gör att React snabbt kan avgöra om det externa "store" har ändrats under renderingen.

4. Överväganden för server-side rendering (SSR)

När du använder useSyncExternalStore med server-side rendering är det viktigt att tillhandahålla getServerSnapshot-funktionen. Denna funktion används för att hämta det initiala värdet från det externa "store" på servern. Utan den kommer React att försöka använda getSnapshot på servern, vilket kanske inte är möjligt om det externa "store" förlitar sig på webbläsarspecifika API:er (t.ex. localStorage).

getServerSnapshot-funktionen bör returnera ett standardvärde eller hämta datan från en server-side-källa (t.ex. cookies, databas). Detta säkerställer att den initiala HTML som renderas på servern innehåller korrekt data.

5. Felhantering

Robust felhantering är avgörande, särskilt när man hanterar externa datakällor. Omslut getSnapshot- och getServerSnapshot-funktionerna i try...catch-block för att hantera potentiella fel. Logga felen på lämpligt sätt och tillhandahåll reservvärden för att förhindra att applikationen kraschar.

6. Anpassade hooks för återanvändbarhet

För att främja återanvändbarhet av kod, kapsla in useSyncExternalStore-logiken i en anpassad hook. Detta gör det lättare att dela logiken över flera komponenter.

Låt oss till exempel skapa en anpassad hook för att komma åt en specifik nyckel 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 enkelt använda denna hook i vilken komponent som helst:

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

Bästa praxis

• Håll getSnapshot snabb: Undvik dyra beräkningar inom getSnapshot-funktionen. Memoizera resultatet om det behövs.
• Tillhandahåll getServerSnapshot för SSR: Se till att den initiala HTML som renderas på servern innehåller korrekt data.
• Använd anpassade hooks: Kapsla in useSyncExternalStore-logiken i anpassade hooks för bättre återanvändbarhet och underhållbarhet.
• Hantera fel på ett elegant sätt: Omslut getSnapshot och getServerSnapshot i try...catch-block.
• Minimera prenumerationer: Prenumerera endast på de delar av det externa "store" som komponenten faktiskt behöver. Detta minskar onödiga omrenderingar.
• Överväg alternativ: Utvärdera om useSyncExternalStore verkligen är nödvändigt. För enklare fall kan andra tekniker för tillståndshantering vara mer lämpliga.

Alternativ till useSyncExternalStore

Även om useSyncExternalStore är ett kraftfullt verktyg, är det inte alltid den bästa lösningen. Överväg dessa alternativ:

• Inbyggd tillståndshantering (useState, useReducer, Context API): Om datan är tätt kopplad till Reacts komponentträd är dessa inbyggda alternativ ofta tillräckliga.
• React Query/SWR: För datahämtning erbjuder dessa bibliotek utmärkta funktioner för cachning, invalidering och felhantering.
• Zustand/Jotai/Valtio: Dessa minimalistiska bibliotek för tillståndshantering erbjuder ett enkelt och effektivt sätt att hantera applikationstillstånd.
• Redux/MobX: För komplexa applikationer med globalt tillstånd kan Redux eller MobX vara ett bättre val (även om de introducerar mer standardkod).

Valet beror på de specifika kraven för din applikation.

Slutsats

useSyncExternalStore är ett värdefullt tillskott till Reacts verktygslåda, som möjliggör sömlös integration med externa tillståndskällor samtidigt som kompatibiliteten med samtidig rendering bibehålls. Genom att förstå dess syfte, implementering och avancerade användningsfall kan du utnyttja denna hook för att bygga robusta och prestandaeffektiva React-applikationer som interagerar effektivt med data från olika källor.

Kom ihåg att prioritera prestanda, hantera fel på ett elegant sätt och överväga alternativa lösningar innan du väljer useSyncExternalStore. Med noggrann planering och implementering kan denna hook avsevärt förbättra flexibiliteten och kraften i dina React-applikationer.

Vidare utforskning

• React-dokumentation för useSyncExternalStore
• Exempel med olika bibliotek för tillståndshantering (Zustand, Jotai, Valtio)
• Prestandajämförelser mellan useSyncExternalStore och andra metoder