React useSyncExternalStore: Bemästra synkronisering med externa stores

I moderna React-applikationer är det avgörande att hantera state effektivt. Medan React erbjuder inbyggda lösningar för state-hantering som useState och useReducer, kräver integration med externa datakällor eller tredjepartsbibliotek för state-hantering ett mer sofistikerat tillvägagångssätt. Det är här useSyncExternalStore kommer in i bilden.

Vad är useSyncExternalStore?

useSyncExternalStore är en React-hook som introducerades i React 18 och låter dig prenumerera på och läsa från externa datakällor på ett sätt som är kompatibelt med concurrent rendering. Detta är särskilt viktigt när man hanterar data som inte direkt hanteras av React, såsom:

• Tredjepartsbibliotek för state-hantering: Redux, Zustand, Jotai, etc.
• Webbläsar-API:er: localStorage, IndexedDB, etc.
• Externa datakällor: Server-sent events, WebSockets, etc.

Innan useSyncExternalStore kunde synkronisering av externa stores leda till "tearing" och inkonsekvenser, särskilt med Reacts concurrent rendering-funktioner. Denna hook löser dessa problem genom att erbjuda ett standardiserat och högpresterande sätt att ansluta externa data till dina React-komponenter.

Varför använda useSyncExternalStore? Fördelar och vinster

Att använda useSyncExternalStore erbjuder flera viktiga fördelar:

• Säkerhet vid samtidighet: Garanterar att din komponent alltid visar en konsekvent vy av det externa store, även under samtidiga renderingar. Detta förhindrar "tearing"-problem där delar av ditt UI kan visa inkonsekvent data.
• Prestanda: Optimerad för prestanda, vilket minimerar onödiga omrenderingar. Den utnyttjar Reacts interna mekanismer för att effektivt prenumerera på ändringar och uppdatera komponenten endast när det behövs.
• Standardiserat API: Ger ett konsekvent och förutsägbart API för att interagera med externa stores, oavsett den underliggande implementationen.
• Minskad boilerplate-kod: Förenklar processen att ansluta till externa stores, vilket minskar mängden anpassad kod du behöver skriva.
• Kompatibilitet: Fungerar sömlöst med ett brett utbud av externa datakällor och bibliotek för state-hantering.

Hur useSyncExternalStore fungerar: En djupdykning

Hooken useSyncExternalStore tar tre argument:

1. subscribe(callback: () => void): () => void: En funktion som registrerar en callback för att meddelas när det externa store ändras. Den ska returnera en funktion för att avprenumerera. Det är så här React får veta när det finns ny data i store.
2. getSnapshot(): T: En funktion som returnerar en ögonblicksbild (snapshot) av datan från det externa store. Denna snapshot bör vara ett enkelt, oföränderligt värde som React kan använda för att avgöra om datan har ändrats.
3. getServerSnapshot?(): T (Valfri): En funktion som returnerar den initiala snapshoten av datan på servern. Detta används för server-side rendering (SSR) för att säkerställa konsekvens mellan server och klient. Om den inte tillhandahålls kommer React att använda getSnapshot() under serverrendering, vilket kanske inte är idealiskt i alla scenarier.

Här är en genomgång av hur dessa argument samverkar:

1. När komponenten monteras anropar useSyncExternalStore subscribe-funktionen för att registrera en callback.
2. När det externa store ändras, anropas den callback som registrerades via subscribe.
3. Callbacken meddelar React att komponenten behöver renderas om.
4. Under renderingen anropar useSyncExternalStore getSnapshot för att hämta den senaste datan från det externa store.
5. React jämför den nuvarande snapshoten med den föregående. Om de skiljer sig åt uppdateras komponenten med den nya datan.
6. När komponenten avmonteras anropas avprenumerationsfunktionen som returnerades av subscribe för att förhindra minnesläckor.

Grundläggande implementeringsexempel: Integration med localStorage

Låt oss illustrera hur man använder useSyncExternalStore med ett enkelt exempel: att läsa och skriva ett värde till localStorage.

            import { useSyncExternalStore } from 'react';

function getLocalStorageItem(key: string): string | null {
  try {
    return localStorage.getItem(key);
  } catch (error) {
    console.error("Error accessing localStorage:", error);
    return null; // Hantera potentiella fel som att `localStorage` inte är tillgängligt.
  }
}

function useLocalStorage(key: string): [string | null, (value: string) => void] {
  const subscribe = (callback: () => void) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const getSnapshot = () => getLocalStorageItem(key);

  const serverSnapshot = () => null; // Eller ett standardvärde om det är lämpligt för din SSR-setup

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  const setValue = (newValue: string) => {
    try {
      localStorage.setItem(key, newValue);
      // Skicka ett storage-event på det aktuella fönstret för att trigga uppdateringar i andra flikar.
      window.dispatchEvent(new StorageEvent('storage', {
        key: key,
        newValue: newValue,
        storageArea: localStorage,
      } as StorageEventInit));
    } catch (error) {
      console.error("Error setting localStorage:", error);
    }
  };

  return [value, setValue];
}

function MyComponent() {
  const [name, setName] = useLocalStorage('name');

  return (
    <div>
      <p>Hej, {name || 'världen'}</p>
      <input
        type="text"
        value={name || ''}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default MyComponent;
            

              
                Copy
              
            
          

Förklaring:

• getLocalStorageItem: En hjälpfunktion för att säkert hämta värdet från localStorage och hantera potentiella fel.
• useLocalStorage: En anpassad hook som kapslar in logiken för att interagera med localStorage med hjälp av useSyncExternalStore.
• subscribe: Lyssnar på 'storage'-eventet, som utlöses när localStorage ändras i en annan flik eller ett annat fönster. Kritiskt nog skickar vi ett storage-event efter att ha satt ett nytt värde för att korrekt trigga uppdateringar i *samma* fönster.
• getSnapshot: Returnerar det aktuella värdet från localStorage.
• serverSnapshot: Returnerar null (eller ett standardvärde) för server-side rendering.
• setValue: Uppdaterar värdet i localStorage och skickar ett storage-event för att signalera andra flikar.
• MyComponent: En enkel komponent som använder useLocalStorage-hooken för att visa och uppdatera ett namn.

Viktiga överväganden för localStorage:

• Felhantering: Omslut alltid åtkomst till localStorage i try...catch-block för att hantera potentiella fel, som när localStorage är inaktiverat eller otillgängligt (t.ex. i privat surfläge).
• Storage Events: 'storage'-eventet utlöses endast när localStorage ändras i en *annan* flik eller ett annat fönster, inte i samma fönster. Därför skickar vi ett nytt StorageEvent manuellt efter att ha satt ett värde.
• Dataserialisering: localStorage lagrar endast strängar. Du kan behöva serialisera och deserialisera komplexa datastrukturer med JSON.stringify och JSON.parse.
• Säkerhet: Var medveten om vilken data du lagrar i localStorage, eftersom den är tillgänglig för JavaScript-kod på samma domän. Känslig information bör inte lagras i localStorage.

Avancerade användningsfall och exempel

1. Integration med Zustand (eller annat bibliotek för state-hantering)

Att integrera useSyncExternalStore med ett globalt bibliotek för state-hantering som Zustand är ett vanligt användningsfall. Här är ett exempel:

            import { useSyncExternalStore } from 'react';
import { create } from 'zustand';

interface BearState {
  bears: number
  increase: (by: number) => void
}

const useStore = create<BearState>((set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by }))
}))

function BearCounter() {
  const bears = useSyncExternalStore(
    useStore.subscribe,
    useStore.getState,
    () => ({ bears: 0, increase: () => {} }) // Server-snapshot, ange ett standard-state
  ).bears
  return <h1>{bears} björnar här i krokarna!</h1>
}

function Controls() {
  const increase = useStore(state => state.increase)
  return (<button onClick={() => increase(1)}>en björn</button>)
}

export { BearCounter, Controls }
            

              
                Copy
              
            
          

Förklaring:

• Vi använder Zustand för global state-hantering.
• useStore.subscribe: Denna funktion prenumererar på Zustand store och kommer att utlösa omrenderingar när storets state ändras.
• useStore.getState: Denna funktion returnerar det nuvarande statet för Zustand store.
• Den tredje parametern tillhandahåller ett standard-state för server-side rendering (SSR), vilket säkerställer att komponenten renderas korrekt på servern innan den klient-sidiga JavaScript-koden tar över.
• Komponenten hämtar antalet björnar med useSyncExternalStore och renderar det.
• Controls-komponenten visar hur man använder en setter från Zustand.

2. Integration med Server-Sent Events (SSE)

useSyncExternalStore kan användas för att effektivt uppdatera komponenter baserat på realtidsdata från en server med hjälp av Server-Sent Events (SSE).

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

function useSSE(url: string) {
  const [data, setData] = useState(null);
  const [eventSource, setEventSource] = useState(null);

  useEffect(() => {
    const newEventSource = new EventSource(url);
    setEventSource(newEventSource);

    newEventSource.onmessage = (event) => {
      try {
        const parsedData = JSON.parse(event.data);
        setData(parsedData);
      } catch (error) {
        console.error("Error parsing SSE data:", error);
      }
    };

    newEventSource.onerror = (error) => {
      console.error("SSE error:", error);
    };

    return () => {
      newEventSource.close();
      setEventSource(null);
    };
  }, [url]);

  const subscribe = useCallback((callback: () => void) => {
    if (eventSource) {
      eventSource.addEventListener('message', callback);
    }
    return () => {
      if (eventSource) {
        eventSource.removeEventListener('message', callback);
      }
    };
  }, [eventSource]);

  const getSnapshot = useCallback(() => data, [data]);

  const serverSnapshot = useCallback(() => null, []);

  const value = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return value;
}

function RealTimeDataComponent() {
  const realTimeData = useSSE('/api/sse'); // Ersätt med din SSE-endpoint

  if (!realTimeData) {
    return <p>Laddar...</p>;
  }

  return <div><p>Realtidsdata: {JSON.stringify(realTimeData)}</p></div>;
}

export default RealTimeDataComponent;
            

              
                Copy
              
            
          

Förklaring:

• useSSE: En anpassad hook som upprättar en SSE-anslutning till en given URL.
• subscribe: Lägger till en event listener till EventSource-objektet för att meddelas om nya meddelanden från servern. Den använder useCallback för att säkerställa att callback-funktionen inte återskapas vid varje rendering.
• getSnapshot: Returnerar den senast mottagna datan från SSE-strömmen.
• serverSnapshot: Returnerar null för server-side rendering.
• RealTimeDataComponent: En komponent som använder useSSE-hooken för att visa realtidsdata.

3. Integration med IndexedDB

Synkronisera React-komponenter med data lagrad i IndexedDB med hjälp av useSyncExternalStore.

            import { useSyncExternalStore, useState, useEffect, useCallback } from 'react';

interface IDBData {
  id: number;
  name: string;
}

async function getAllData(): Promise {
  return new Promise((resolve, reject) => {
    const request = indexedDB.open('myDataBase', 1); // Ersätt med ditt databasnamn och version

    request.onerror = (event) => {
      console.error("IndexedDB open error:", event);
      reject(event);
    };

    request.onsuccess = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      const transaction = db.transaction(['myDataStore'], 'readonly'); // Ersätt med namnet på ditt store
      const objectStore = transaction.objectStore('myDataStore');
      const getAllRequest = objectStore.getAll();

      getAllRequest.onsuccess = (event) => {
        const data = (event.target as IDBRequest).result as IDBData[];
        resolve(data);
      };

      getAllRequest.onerror = (event) => {
        console.error("IndexedDB getAll error:", event);
        reject(event);
      };
    };

    request.onupgradeneeded = (event) => {
      const db = (event.target as IDBRequest).result as IDBDatabase;
      db.createObjectStore('myDataStore', { keyPath: 'id' });
    };
  });
}

function useIndexedDBData(): IDBData[] | null {
  const [data, setData] = useState(null);
  const [dbInitialized, setDbInitialized] = useState(false);

  useEffect(() => {
    const initDB = async () => {
        try{
            await getAllData();
            setDbInitialized(true);
        } catch (e) {
            console.error("IndexedDB initialization failed", e);
        }
    }

    initDB();
  }, []);


  const subscribe = useCallback((callback: () => void) => {
    // Använd debounce på callbacken för att förhindra överdrivet många omrenderingar.
    let timeoutId: NodeJS.Timeout;
    const debouncedCallback = () => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(callback, 50); // Justera debounce-fördröjningen vid behov
    };

    const handleVisibilityChange = () => {
      // Hämta data igen när fliken blir synlig
      if (document.visibilityState === 'visible') {
        debouncedCallback();
      }
    };

    window.addEventListener('focus', debouncedCallback);
    document.addEventListener('visibilitychange', handleVisibilityChange);


    return () => {
      window.removeEventListener('focus', debouncedCallback);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      clearTimeout(timeoutId);
    };
  }, []);

  const getSnapshot = useCallback(() => {
    // Hämta den senaste datan från IndexedDB varje gång getSnapshot anropas
    getAllData().then(newData => setData(newData));
    return data;
  }, [data]);

  const serverSnapshot = useCallback(() => null, []);

  return useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);
}

function IndexedDBComponent() {
  const data = useIndexedDBData();

  if (!data) {
    return <p>Laddar data från IndexedDB...</p>;
  }

  return (
    <div>
      <h2>Data från IndexedDB:</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name} (ID: {item.id})</li>
        ))}
      </ul>
    </div>
  );
}

export default IndexedDBComponent;
            

              
                Copy
              
            
          

Förklaring:

• getAllData: En asynkron funktion som hämtar all data från IndexedDB store.
• useIndexedDBData: En anpassad hook som använder useSyncExternalStore för att prenumerera på ändringar i IndexedDB.
• subscribe: Sätter upp lyssnare för synlighets- och fokusändringar för att uppdatera datan från IndexedDB och använder en debounce-funktion för att undvika överdrivna uppdateringar.
• getSnapshot: Hämtar den aktuella snapshoten genom att anropa `getAllData()` och returnerar sedan `data` från state.
• serverSnapshot: Returnerar null för server-side rendering.
• IndexedDBComponent: En komponent som visar data från IndexedDB.

Viktiga överväganden för IndexedDB:

• Asynkrona operationer: Interaktioner med IndexedDB är asynkrona, så du måste hantera den asynkrona naturen av datahämtning och uppdateringar noggrant.
• Felhantering: Implementera robust felhantering för att elegant hantera potentiella problem med databasåtkomst, såsom att databasen inte hittas eller behörighetsfel.
• Databasversionering: Hantera databasversioner noggrant med onupgradeneeded-eventet för att säkerställa datakompatibilitet när din applikation utvecklas.
• Prestanda: IndexedDB-operationer kan vara relativt långsamma, särskilt för stora datamängder. Optimera frågor och indexering för att förbättra prestandan.

Prestandaöverväganden

Även om useSyncExternalStore är optimerad för prestanda finns det fortfarande några saker att tänka på:

• Minimera snapshot-ändringar: Se till att getSnapshot-funktionen endast returnerar en ny snapshot när datan faktiskt har ändrats. Undvik att skapa nya objekt eller arrayer i onödan. Överväg att använda memoization-tekniker för att optimera skapandet av snapshots.
• Batcha uppdateringar: Om möjligt, batcha uppdateringar till det externa store för att minska antalet omrenderingar. Om du till exempel uppdaterar flera egenskaper i store, försök att uppdatera dem alla i en enda transaktion.
• Debouncing/Throttling: Om det externa store ändras ofta, överväg att använda debouncing eller throttling på uppdateringarna till React-komponenten. Detta kan förhindra överdrivna omrenderingar och förbättra prestandan. Detta är särskilt användbart med volatila stores som ändringar i webbläsarfönstrets storlek.
• Ytlig jämförelse: Se till att du returnerar primitiva värden eller oföränderliga objekt i getSnapshot så att React snabbt kan avgöra om datan har ändrats med en ytlig jämförelse.
• Villkorliga uppdateringar: I fall där det externa store ändras ofta men din komponent bara behöver reagera på vissa ändringar, överväg att implementera villkorliga uppdateringar inom `subscribe`-funktionen för att undvika onödiga omrenderingar.

Vanliga fallgropar och felsökning

• Tearing-problem: Om du fortfarande upplever tearing-problem efter att ha använt useSyncExternalStore, dubbelkolla att din getSnapshot-funktion returnerar en konsekvent vy av datan och att subscribe-funktionen korrekt meddelar React om ändringar. Se till att du inte muterar datan direkt inuti getSnapshot-funktionen.
• Oändliga loopar: En oändlig loop kan uppstå om getSnapshot-funktionen alltid returnerar ett nytt värde, även när datan inte har ändrats. Detta kan hända om du skapar nya objekt eller arrayer i onödan. Se till att du returnerar samma värde om datan inte har ändrats.
• Saknad server-side rendering: Om du använder server-side rendering, se till att tillhandahålla en getServerSnapshot-funktion för att säkerställa att komponenten renderas korrekt på servern. Denna funktion bör returnera det initiala statet för det externa store.
• Felaktig avprenumeration: Se alltid till att du korrekt avprenumererar från det externa store i funktionen som returneras av subscribe. Att inte göra det kan leda till minnesläckor.
• Felaktig användning med Concurrent Mode: Se till att ditt externa store är kompatibelt med Concurrent Mode. Undvik att göra mutationer i det externa store medan React renderar. Mutationer bör vara synkrona och förutsägbara.

Slutsats

useSyncExternalStore är ett kraftfullt verktyg för att synkronisera React-komponenter med externa datalager. Genom att förstå hur det fungerar och följa bästa praxis kan du säkerställa att dina komponenter visar konsekvent och uppdaterad data, även i komplexa scenarier med concurrent rendering. Denna hook förenklar integrationen med olika datakällor, från tredjepartsbibliotek för state-hantering till webbläsar-API:er och realtidsdataströmmar, vilket leder till mer robusta och högpresterande React-applikationer. Kom ihåg att alltid hantera potentiella fel, optimera prestanda och noggrant hantera prenumerationer för att undvika vanliga fallgropar.