React useSyncExternalStore: Externe State Integratie Beheersen

React's useSyncExternalStore hook, geïntroduceerd in React 18, biedt een krachtige en efficiënte manier om externe databronnen en state management-bibliotheken te integreren in uw React-componenten. Deze hook stelt componenten in staat zich te abonneren op wijzigingen in externe stores, waardoor de UI altijd de meest recente data weerspiegelt en tegelijkertijd de prestaties worden geoptimaliseerd. Deze gids biedt een uitgebreid overzicht van useSyncExternalStore, inclusief de kernconcepten, gebruikspatronen en best practices.

De Noodzaak van useSyncExternalStore Begrijpen

In veel React-applicaties zult u scenario's tegenkomen waarin state buiten de componentenboom beheerd moet worden. Dit is vaak het geval bij:

• Bibliotheken van derden: Integratie met bibliotheken die hun eigen state beheren (bijv. een databaseverbinding, een browser-API of een physics-engine).
• Gedeelde state tussen componenten: Het beheren van state die gedeeld moet worden tussen componenten die niet direct aan elkaar gerelateerd zijn (bijv. de authenticatiestatus van een gebruiker, applicatie-instellingen of een globale event bus).
• Externe databronnen: Het ophalen en weergeven van data van externe API's of databases.

Traditionele state management-oplossingen zoals useState en useReducer zijn zeer geschikt voor het beheren van lokale component-state. Ze zijn echter niet ontworpen om externe state effectief te behandelen. Het direct gebruiken ervan met externe databronnen kan leiden tot prestatieproblemen, inconsistente updates en complexe code.

useSyncExternalStore pakt deze uitdagingen aan door een gestandaardiseerde en geoptimaliseerde manier te bieden om zich te abonneren op wijzigingen in externe stores. Het zorgt ervoor dat componenten alleen opnieuw gerenderd worden wanneer de relevante data verandert, wat onnodige updates minimaliseert en de algehele prestaties verbetert.

Kernconcepten van useSyncExternalStore

useSyncExternalStore accepteert drie argumenten:

1. subscribe: Een functie die een callback als argument neemt en zich abonneert op de externe store. De callback wordt aangeroepen telkens wanneer de data van de store verandert.
2. getSnapshot: Een functie die een snapshot van de data uit de externe store retourneert. Deze functie moet een stabiele waarde teruggeven die React kan gebruiken om te bepalen of de data is veranderd. Deze moet puur en snel zijn.
3. getServerSnapshot (optioneel): Een functie die de initiële waarde van de store retourneert tijdens server-side rendering. Dit is cruciaal om ervoor te zorgen dat de initiële HTML overeenkomt met de client-side rendering. Het wordt ALLEEN gebruikt in server-side rendering omgevingen. Indien weggelaten in een client-side omgeving, wordt in plaats daarvan getSnapshot gebruikt. Het is belangrijk dat deze waarde nooit verandert nadat deze initieel op de server is gerenderd.

Hier is een uiteenzetting van elk argument:

1. subscribe

De subscribe-functie is verantwoordelijk voor het tot stand brengen van een verbinding tussen de React-component en de externe store. Het ontvangt een callback-functie, die het moet aanroepen wanneer de data van de store verandert. Deze callback wordt doorgaans gebruikt om een re-render van de component te activeren.

Voorbeeld:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};
            

              
                Copy
              
            
          

In dit voorbeeld voegt store.addListener de callback toe aan de lijst met listeners van de store. De functie geeft een opruimfunctie terug die de listener verwijdert wanneer de component unmount, wat geheugenlekken voorkomt.

2. getSnapshot

De getSnapshot-functie is verantwoordelijk voor het ophalen van een snapshot van de data uit de externe store. Deze snapshot moet een stabiele waarde zijn die React kan gebruiken om te bepalen of de data is veranderd. React gebruikt Object.is om de huidige snapshot met de vorige te vergelijken. Daarom moet deze snel zijn en wordt het sterk aanbevolen dat deze een primitieve waarde retourneert (string, number, boolean, null of undefined).

Voorbeeld:

            const getSnapshot = () => {
  return store.getData();
};
            

              
                Copy
              
            
          

In dit voorbeeld retourneert store.getData de huidige data uit de store. React zal deze waarde vergelijken met de vorige waarde om te bepalen of de component opnieuw gerenderd moet worden.

3. getServerSnapshot (Optioneel)

De getServerSnapshot-functie is alleen relevant wanneer server-side rendering (SSR) wordt gebruikt. Deze functie wordt aangeroepen tijdens de initiële server-render, en het resultaat wordt gebruikt als de initiële waarde van de store voordat hydratatie plaatsvindt op de client. Het retourneren van consistente waarden is cruciaal voor succesvolle SSR.

Voorbeeld:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};
            

              
                Copy
              
            
          

In dit voorbeeld retourneert `store.getInitialDataForServer` de initiële data die geschikt is voor server-side rendering.

Basis Gebruiksvoorbeeld

Laten we een eenvoudig voorbeeld bekijken waarin we een externe store hebben die een teller beheert. We kunnen useSyncExternalStore gebruiken om de tellerwaarde in een React-component weer te geven:

            // Externe store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Aantal: {count}</p>
      <button onClick={increment}>Verhogen</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

In dit voorbeeld creëert createStore een eenvoudige externe store die een tellerwaarde beheert. De Counter-component gebruikt useSyncExternalStore om zich te abonneren op wijzigingen in de store en het huidige aantal weer te geven. Wanneer op de verhoogknop wordt geklikt, werkt de setState-functie de waarde van de store bij, wat een re-render van de component activeert.

Integratie met State Management-bibliotheken

useSyncExternalStore is bijzonder nuttig voor integratie met state management-bibliotheken zoals Zustand, Jotai en Recoil. Deze bibliotheken bieden hun eigen mechanismen voor het beheren van state, en useSyncExternalStore stelt u in staat om ze naadloos te integreren in uw React-componenten.

Hier is een voorbeeld van integratie met Zustand:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React-component
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Aantal: {count}</p>
      <button onClick={increment}>Verhogen</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand vereenvoudigt het aanmaken van de store. De interne subscribe- en getSnapshot-implementaties worden impliciet gebruikt wanneer u zich abonneert op een specifieke state.

Hier is een voorbeeld van integratie met Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai atom
const countAtom = atom(0)

// React-component
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Aantal: {count}</p>
      <button onClick={() => setCount(count + 1)}>Verhogen</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai gebruikt atoms om state te beheren. useAtom handelt intern het abonneren en snapshotten af.

Prestatieoptimalisatie

useSyncExternalStore biedt verschillende mechanismen voor het optimaliseren van de prestaties:

• Selectieve Updates: React rendert de component alleen opnieuw wanneer de waarde die door getSnapshot wordt geretourneerd, verandert. Dit zorgt ervoor dat onnodige re-renders worden vermeden.
• Updates Bundelen: React bundelt updates van meerdere externe stores in een enkele re-render. Dit vermindert het aantal re-renders en verbetert de algehele prestaties.
• Verouderde Closures Vermijden: useSyncExternalStore zorgt ervoor dat de component altijd toegang heeft tot de meest recente data uit de externe store, zelfs bij asynchrone updates.

Overweeg de volgende best practices om de prestaties verder te optimaliseren:

• Minimaliseer de hoeveelheid data die door getSnapshot wordt geretourneerd: Retourneer alleen de data die daadwerkelijk door de component wordt gebruikt. Dit vermindert de hoeveelheid data die vergeleken moet worden en verbetert de efficiëntie van het updateproces.
• Gebruik memoization-technieken: Memoïzeer de resultaten van dure berekeningen of datatransformaties. Dit kan onnodige herberekeningen voorkomen en de prestaties verbeteren.
• Vermijd onnodige abonnementen: Abonneer u alleen op de externe store wanneer de component daadwerkelijk zichtbaar is. Dit kan het aantal actieve abonnementen verminderen en de algehele prestaties verbeteren.
• Zorg ervoor dat getSnapshot alleen een nieuw *stabiel* object retourneert als de data is gewijzigd: Vermijd het creëren van nieuwe objecten/arrays/functies als de onderliggende data niet daadwerkelijk is veranderd. Retourneer indien mogelijk hetzelfde object per referentie.

Server-Side Rendering (SSR) met useSyncExternalStore

Wanneer u useSyncExternalStore gebruikt met server-side rendering (SSR), is het cruciaal om een getServerSnapshot-functie te voorzien. Deze functie zorgt ervoor dat de initiële HTML die op de server wordt gerenderd, overeenkomt met de client-side rendering, wat hydratatiefouten voorkomt en de gebruikerservaring verbetert.

Hier is een voorbeeld van het gebruik van getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Belangrijk voor SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React-component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Aantal: {count}</p>
      <button onClick={increment}>Verhogen</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

In dit voorbeeld retourneert getServerSnapshot de initiële waarde van de teller. Dit zorgt ervoor dat de initiële HTML die op de server wordt gerenderd, overeenkomt met de client-side rendering. De `getServerSnapshot` moet een stabiele en voorspelbare waarde retourneren. Het moet ook dezelfde logica uitvoeren als de getSnapshot-functie op de server. Vermijd toegang tot browser-specifieke API's of globale variabelen in getServerSnapshot.

Geavanceerde Gebruikspatronen

useSyncExternalStore kan worden gebruikt in een verscheidenheid aan geavanceerde scenario's, waaronder:

• Integratie met Browser-API's: Abonneren op wijzigingen in browser-API's zoals localStorage of navigator.onLine.
• Aangepaste Hooks Creëren: De logica voor het abonneren op een externe store inkapselen in een aangepaste hook.
• Gebruik met Context API: Het combineren van useSyncExternalStore met de React Context API om gedeelde state aan een componentenboom te bieden.

Laten we kijken naar een voorbeeld van het creëren van een aangepaste hook voor het abonneren op localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Fout bij het ophalen van waarde uit localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Handmatig storage-event activeren voor updates op dezelfde pagina
    } catch (error) {
      console.error("Fout bij het instellen van waarde in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

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

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

In dit voorbeeld is useLocalStorage een aangepaste hook die zich abonneert op wijzigingen in localStorage. Het gebruikt useSyncExternalStore om het abonnement te beheren en de huidige waarde uit localStorage op te halen. Het verzendt ook correct een storage-event om ervoor te zorgen dat updates op dezelfde pagina worden weerspiegeld (aangezien `storage`-events alleen in andere tabbladen worden geactiveerd). De serverSnapshot zorgt ervoor dat initiële waarden correct worden verstrekt in serveromgevingen.

Best Practices en Veelvoorkomende Valkuilen

Hier zijn enkele best practices en veelvoorkomende valkuilen die u moet vermijden bij het gebruik van useSyncExternalStore:

• Vermijd het direct muteren van de externe store: Gebruik altijd de API van de store om de data bij te werken. Het direct muteren van de store kan leiden tot inconsistente updates en onverwacht gedrag.
• Zorg ervoor dat getSnapshot puur en snel is: getSnapshot mag geen bijwerkingen hebben en moet snel een stabiele waarde retourneren. Dure berekeningen of datatransformaties moeten worden gememoïzeerd.
• Bied een getServerSnapshot-functie aan bij gebruik van SSR: Dit is cruciaal om ervoor te zorgen dat de initiële HTML die op de server wordt gerenderd, overeenkomt met de client-side rendering.
• Handel fouten correct af: Gebruik try-catch-blokken om potentiële fouten bij het benaderen van de externe store af te handelen.
• Ruim abonnementen op: Zeg altijd het abonnement op de externe store op wanneer de component unmount om geheugenlekken te voorkomen. De subscribe-functie moet een opruimfunctie retourneren die de listener verwijdert.
• Begrijp de prestatie-implicaties: Hoewel useSyncExternalStore is geoptimaliseerd voor prestaties, is het belangrijk om de mogelijke impact van het abonneren op externe stores te begrijpen. Minimaliseer de hoeveelheid data die door getSnapshot wordt geretourneerd en vermijd onnodige abonnementen.
• Test Grondig: Zorg ervoor dat de integratie met de store correct werkt in verschillende scenario's, vooral bij server-side rendering en in de concurrent mode.

Conclusie

useSyncExternalStore is een krachtige en efficiënte hook voor het integreren van externe databronnen en state management-bibliotheken in uw React-componenten. Door de kernconcepten, gebruikspatronen en best practices te begrijpen, kunt u effectief gedeelde state beheren in uw React-applicaties en de prestaties optimaliseren. Of u nu integreert met bibliotheken van derden, gedeelde state tussen componenten beheert, of data ophaalt van externe API's, useSyncExternalStore biedt een gestandaardiseerde en betrouwbare oplossing. Omarm het om robuustere, onderhoudbare en performante React-applicaties te bouwen voor een wereldwijd publiek.

Verdere Bronnen

• React Documentatie over useSyncExternalStore
• React 18 Pull Request die useSyncExternalStore introduceert
• Zustand State Management-bibliotheek
• Jotai State Management-bibliotheek