--- title: "Hooken du aldri har hørt om: useSyncExternalStore" url: "https://www.bekk.christmas/post/2024/08/hook-usesyncexternalstore" authors: ["Marcus Haaland"] published: "2024-12-08" updated: "2025-01-07T08:00:55Z" language: "nb-NO" type: "article" tags: ["React", "Frontend"] --- # Hooken du aldri har hørt om: useSyncExternalStore **useSyncExternalStore** er en React-hook du sannsynligvis aldri har brukt – i hvert fall ikke direkte. Men den ligger under panseret på mange verktøy, som TanStack Query, og ble introdusert i React 18 for å synkronisere ikke-React-kode med React. Selv om hooken har blitt omfavnet av bibliotek-utviklere, har den mye å lære oss andre "vanlige" utviklere om hvordan React fungerer. Og vi skal se på et case hvor også du kan dra nytte av denne hooken. ## Kort fortalt useSyncExternalStore lar React lese og reagere på tilstand som ligger utenfor React, ved å koble en subscribe-funksjon sammen med getSnapshot. Hooken passer særlig godt når du vil følge med på nettleser-API-er som local storage eller andre eksterne verdier, og den kan også brukes med getServerSnapshot for å unngå hydreringsfeil ved serverrendring. - **Passer for:** React-utviklere som jobber med ekstern tilstand eller nettleser-API-er - **Fint å kunne fra før:** Grunnleggende kjennskap til React-hooks og state _Generert med KI_ ## Hvordan reagerer React på ikke-React-kode? Her har jeg lagd en enkel counter: ![Viser en knapp som sier "count is 0"](https://cdn.sanity.io/images/ah2n1vfr/bekk-blogg-prod/5d995c3d5667b8187e51cb1579b9ee2385986bdf-828x362.png) _Knapp som teller når du trykker_ Koden bak er enkel, og kanskje du også klarer å se en feil med koden? ```tsx let count = 0; export function Counter() { function incrementer() { count += 1; } return ( ); } ``` Counteren fungerer ikke. Ja, verdien til count økes, men teksten i knappen vil ikke oppdateres i det du trykker. Du kan imidlertid se at `count` økes med `console.log`: ```tsx export function Counter() { function incrementer() { count += 1; console.log(count); // Log: 1, 2, osv. } ``` Årsaken til at UI-et ikke oppdateres, er at det ikke er brukt React state her, så React ikke får med seg endringer. Det er kun endring i React state som trigger en re-render i React. Så i dette tilfellet, kunne vi ha løst problemet ved å ha `count` i en `useState`. Men iblant håndterer vi kode som ikke er en del av React, men som vi ønsker å følge med på. Dette kan være tredjepartsbiblioteker med state utenfor React eller nettleser-API-er som local storage. Om React bare reagerer på endring i React state, hvordan kan vi sørge for at React får med seg endringer i ekstern tilstand? ## Hvordan hjelper useSyncExternalStore oss? Hooken `useSyncExternalStore` er beregnet på nettopp dette. Den synkroniserer en ekstern tilstand, som `count`-variabelen utenfor React-komponenten, med vår egen React kode. Det ser slik ut: ```tsx const count = useSyncExternalStore(subscribe, getSnapshot); ``` Nå kommer `count` fra denne hooken. Hooken tar imot to verdier. En `subscribe`-funksjon, som holder rede på lyttere på verdien. Og `getSnapshot`, som gir oss nåværende verdi. getSnapshot er veldig enkel. Her har jeg omdøpt `count`-en vi får utenfra til `externalCount`: ```tsx // 👇 Initierer external store let externalCount = 0; function getSnapshot() { // 👇 Returnerer nåværende verdi return externalCount; } ``` I `subscribe`-funksjonen sier vi hvordan vi skal legge til lyttere på tilstanden, og hvordan vi skal fjerne lyttere: ```tsx let listeners: (() => void)[] = []; function subscribe(listener: () => void) { // 👇 Legg til lytter listeners.push(listener); // 👇 Cleanup-funksjon som fjerner lytter (f.eks. ved demount) return () => { listeners = listeners.filter((l) => l !== listener); }; } ``` Hver lytter er en funksjon. Når vi kaller på den, vil den kalle på `getSnapshot`, og returnere nåværende verdi. Så vi må oppdatere vår inkrementeringsfunksjon til å også si ifra til lytterne ved endring: ```tsx function notifyListeners() { // 👇 Hver lytter henter verdi på nytt (kaller getSnapshot) listeners.forEach((listener) => listener()); } export function Counter() { const count = useSyncExternalStore(subscribe, getSnapshot); // 👇 Ved endring, også si ifra til lyttere const incrementer = () => { externalCount += 1; notifyListeners(); }; return ( ); } ``` Nå vil endringer i `count`- variabalen, selv om den er utenfor en `useState`, varsle alle lyttere om endring. Så nå vil vi kunne se at teksten i knappen inkrementeres når knappen trykkes. Nå så vi på et noe kunstig eksempel med en enkel variabel utenfor en komponent. Men mønsteret går igjen når vi skal snakke med nettleser-API-et. ## Eksempel med local storage Før du ser på koden under, reflekter over hvordan du selv ville ha fulgt med på endringer på local storage. Fått tenkt litt? La oss igjen se på counter, men denne gangen hvordan du kan følge med på local storage med `useSyncExternalStore`: ```tsx export function CounterSyncExternal() { const count = useSyncExternalStore(subscribe, getSnapshot); const increment = () => { const newCount = count + 1; localStorage.setItem("count", JSON.stringify(newCount)); }; return ( ); } ``` Nå vil `subscribe`- og `getSnapshot`- funksjonene våre se annerledes ut. Når vi nå henter nåværende verdi, vil vi sjekke local storage: ```tsx function getSnapshot() { const savedCount = localStorage.getItem("count"); return savedCount ? Number(savedCount) : 0; } ``` Og for å legge til en lytter, vil vi ikke nå holde styr på en lyttere selv, men heller legge til eventlistener på vinduet, som vil følge med på endringer i eventet “storage”: ```tsx function subscribe(listener: () => void) { window.addEventListener("storage", listener); return () => { window.removeEventListener("storage", listener); }; } ``` Legg merke til at vi ikke trenger å ha en egen funksjon `notifyListeners`, for nå vil eventlytteren si ifra om endringer, via eventet `storage`. Og vi har mata inn lytter-funksjonen der, som vil hente ny verdi om local storage endres. Det er en liten ting vi må fikse før koden fungerer som forventet. Om vi nå trykker på counteren, vil ikke tilstanden oppdateres. Årsaken er at [storage-eventer fra samme fane ikke registreres](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event). En [måte å løse dette på, er å manuelt trigge eventet](https://stackoverflow.com/questions/35865481/storage-event-not-firing): ```tsx const increment = () => { const newCount = count + 1; localStorage.setItem("count", JSON.stringify(newCount)); // 👇 Må manuelt trigge "storage"-eventet for å se endringen i samme fane window.dispatchEvent(new StorageEvent("storage")); }; ``` Så alt i alt, blir koden slik: ```tsx function subscribe(listener: () => void) { window.addEventListener("storage", listener); return () => { window.removeEventListener("storage", listener); }; } function getSnapshot() { const savedCount = localStorage.getItem("count"); return savedCount ? Number(savedCount) : 0; } export function CounterSyncExternal() { const count = useSyncExternalStore(subscribe, getSnapshot); const increment = () => { const newCount = count + 1; localStorage.setItem("count", JSON.stringify(newCount)); window.dispatchEvent(new StorageEvent("storage")); }; return ( ); } ``` Så hva tenker du? Er dette veien å gå for å snakke med local storage? Du kan jo sammenligne med hvordan dette kunne sett ut med `useState` og `useEffect`: ```tsx export function Counter() { // 👇 Initier tilstand fra local storage const [count, setCount] = useState(() => { const savedCount = localStorage.getItem("count"); return savedCount ? Number(savedCount) : 0; }); /* 👇 Når count endres, lagre verdien også i local storage. Og trigg storage-event */ useEffect(() => { localStorage.setItem("count", JSON.stringify(count)); window.dispatchEvent(new StorageEvent("storage")); }, [count]); useEffect(() => { const handleStorageChange = () => { const savedCount = localStorage.getItem("count"); setCount(Number(savedCount)); }; // 👇 Ved storage-eventer, oppdater count-tilstanden med lagret verdi window.addEventListener("storage", handleStorageChange); // 👇 Fjern lytter når komponenten demounter return () => { window.removeEventListener("storage", handleStorageChange); }; }, []); // 👇 Øk count med 1 const increment = () => { setCount((prevCount) => prevCount + 1); }; return ( ); } ``` Koden over er nok mer kjent for deg hvert fall, selv om det er noen linjer ekstra kode. ## Når bør du bruke useSyncExternalStore? Du vil nok ikke bruke `useSyncExternalStore` direkte i komponentene dine, men heller abstrahere logikken din til en egen hook. Da slipper du å definere `subscribe`- og `getSnapshot`-funksjonene om igjen, og kan enkelt få tilgang på verdien du bryr deg om: ```tsx export function CounterSyncExternal() { /* 👇 Abstrahert tidligere logikk med useSyncExternalStore til en hook */ const { count, increment } = useCounter(); return ( ); } function App() { return ( <> ) ``` En fordel med useSyncExternalStore, at du nå har en hook som lytter på samme verdi, og som du kan bruke flere steder. `count` blir dermed en global tilstand. Du får ikke det samme når du bruker `useState`. `useState` skaper en lokal, isolert tilstand. Så selv om du har lyttere på samme event, kan oppdateringen skje på forskjellige tidspunkter, og dermed kan du se en liten forsinkelse når `count` oppdateres. For å fikse syncen, må du løfte state opp, bruke context eller bruke et annet annet globalt tilstandsbibliotek. En annen grunn til å bruke `useSyncExternalStore`, er om du serverrendrer koden. For hooken har nemlig en tredje, valgfri parameter: `getServerSnapshot`: ```tsx function getServerSnapshot() { return 0; // 👈 Initiererer counter med 0, for å unngå hydrerings-mismatch } // ... // 👇 useSyncExternalStore har en tredje, valgfri parameter const count = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); ``` `getServerSnapshot` bruker du for å sette verdien som er den initielle verdien for server og klient. Dette gjør du for å unngå hydreringsfeil. Med useSyncExternalStore kan du altså slippe å skrive implisitte sjekker av om du er på serveren, som å først sjekke om `window` eksisterer. `useSyncExternalStore` er en nyttig hook for å snakke med nettleser-API eller å unngå hydreringsfeil. Når det kommer til annen state, som fra biblioteker, trenger du nok ikke å bruke hooken. Tredjeparts state-biblioteker som [Zustand](https://pmnd.rs/) og [React Query](https://tanstack.com/query/v5/docs/framework/react/overview) har tilstand som trigger re-rendringer i React allerede, og flere har tatt i bruk `useSyncExternalStore` allerede (se for eksempel [kildekoden til Zustand](https://github.com/pmndrs/zustand/blob/main/src/react.ts#L31) eller [TanStack Query](https://github.com/TanStack/query/blob/main/packages/react-query/src/useIsFetching.ts#L8)). Faktisk var årsaken til at TanStack Query i ny versjon krevde React 18, at de gikk fra en [hjemmelagd versjon til å ta i bruk useSyncExternalStore direkte](https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#the-minimum-required-react-version-is-now-180). Så neste gang du skal snakke med nettleser-API, enten det er en lytter på vindu-størrelse, scrolling eller nettopp local storage, test ut [useSyncExternalStore](https://react.dev/reference/react/useSyncExternalStore).