React useSyncExternalStore: Ovladavanje sinkronizacijom vanjskog stanja

useSyncExternalStore je React hook predstavljen u Reactu 18 koji vam omogućuje da se pretplatite na vanjske izvore podataka i čitate iz njih na način koji je kompatibilan s konkurentnim renderiranjem. Ovaj hook premošćuje jaz između Reactovog upravljanog stanja i vanjskog stanja, kao što su podaci iz biblioteka trećih strana, API-ja preglednika ili drugih UI okvira. Zaronimo dublje u razumijevanje njegove svrhe, implementacije i prednosti.

Razumijevanje potrebe za useSyncExternalStore

Reactovo ugrađeno upravljanje stanjem (useState, useReducer, Context API) izvanredno dobro funkcionira za podatke usko povezane s Reactovim stablom komponenti. Međutim, mnoge aplikacije trebaju se integrirati s izvorima podataka *izvan* Reactove kontrole. Ti vanjski izvori mogu uključivati:

• Biblioteke za upravljanje stanjem trećih strana: Integracija s bibliotekama kao što su Zustand, Jotai ili Valtio.
• API-ji preglednika: Pristupanje podacima iz localStorage, IndexedDB ili Network Information API-ja.
• Podaci dohvaćeni s poslužitelja: Iako se često preferiraju biblioteke poput React Query i SWR, ponekad biste mogli željeti izravnu kontrolu.
• Drugi UI okviri: U hibridnim aplikacijama gdje React koegzistira s drugim UI tehnologijama.

Izravno čitanje i pisanje u te vanjske izvore unutar React komponente može dovesti do problema, posebno s konkurentnim renderiranjem. React bi mogao renderirati komponentu sa zastarjelim podacima ako se vanjski izvor promijeni dok React priprema novi zaslon. useSyncExternalStore rješava ovaj problem pružajući mehanizam za React da se sigurno sinkronizira s vanjskim stanjem.

Kako useSyncExternalStore radi

useSyncExternalStore hook prihvaća tri argumenta:

1. subscribe: Funkcija koja prihvaća povratni poziv (callback). Taj će se povratni poziv pozvati kad god se vanjska pohrana promijeni. Funkcija bi trebala vratiti funkciju koja, kada se pozove, otkazuje pretplatu na vanjsku pohranu.
2. getSnapshot: Funkcija koja vraća trenutnu vrijednost vanjske pohrane. React koristi ovu funkciju za čitanje vrijednosti pohrane tijekom renderiranja.
3. getServerSnapshot (opcionalno): Funkcija koja vraća početnu vrijednost vanjske pohrane na poslužitelju. Ovo je potrebno samo za renderiranje na strani poslužitelja (SSR). Ako nije navedena, React će koristiti getSnapshot na poslužitelju.

Hook vraća trenutnu vrijednost vanjske pohrane, dobivenu iz funkcije getSnapshot. React osigurava ponovno renderiranje komponente kad god se promijeni vrijednost koju vraća getSnapshot, što se utvrđuje usporedbom pomoću Object.is.

Osnovni primjer: Sinkronizacija s localStorage

Stvorimo jednostavan primjer koji koristi useSyncExternalStore za sinkronizaciju vrijednosti s 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; ```

U ovom primjeru:

• subscribe: Sluša događaj storage na objektu window. Ovaj se događaj pokreće kad god je localStorage izmijenjen od strane druge kartice ili prozora.
• getSnapshot: Dohvaća vrijednost myValue iz localStorage.
• getServerSnapshot: Vraća zadanu vrijednost za renderiranje na strani poslužitelja. Ta bi se vrijednost mogla dohvatiti iz kolačića ako je korisnik prethodno postavio vrijednost.
• MyComponent: Koristi useSyncExternalStore za pretplatu na promjene u localStorage i prikaz trenutne vrijednosti.

Napredni primjeri uporabe i razmatranja

1. Integracija s bibliotekama za upravljanje stanjem trećih strana

useSyncExternalStore se ističe pri integraciji React komponenti s vanjskim bibliotekama za upravljanje stanjem. Pogledajmo primjer koristeći 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; ```

U ovom primjeru, useSyncExternalStore se koristi za pretplatu na promjene u Zustand pohrani. Primijetite kako prosljeđujemo useStore.subscribe i useStore.getState izravno hooku, čineći integraciju besprijekornom.

2. Optimizacija performansi pomoću memoizacije

Budući da se getSnapshot poziva pri svakom renderiranju, ključno je osigurati da je performantan. Izbjegavajte skupe izračune unutar getSnapshot. Ako je potrebno, memoizirajte rezultat getSnapshot pomoću useMemo ili sličnih tehnika.

Razmotrite ovaj (potencijalno problematičan) primjer:

```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}
))}

); } ```

U ovom primjeru, getSnapshot (inline funkcija proslijeđena kao drugi argument useSyncExternalStore) izvršava skupu map operaciju na velikom nizu. Ova će se operacija izvršiti pri *svakom* renderiranju, čak i ako se temeljni podaci nisu promijenili. Kako bismo to optimizirali, možemo memoizirati rezultat:

```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}
))}

); } ```

Sada se map operacija izvršava samo kada se externalStore.getState() promijeni. Napomena: zapravo ćete morati napraviti dubinsku usporedbu `externalStore.getState()` ili koristiti drugačiju strategiju ako pohrana mutira isti objekt. Primjer je pojednostavljen radi demonstracije.

3. Rukovanje konkurentnim renderiranjem

Primarna prednost useSyncExternalStore je njegova kompatibilnost sa značajkama konkurentnog renderiranja u Reactu. Konkurentno renderiranje omogućuje Reactu da istovremeno priprema više verzija korisničkog sučelja. Kada se vanjska pohrana promijeni tijekom konkurentnog renderiranja, useSyncExternalStore osigurava da React uvijek koristi najnovije podatke prilikom primjene promjena na DOM.

Bez useSyncExternalStore, komponente bi se mogle renderirati sa zastarjelim podacima, što dovodi do vizualnih nedosljednosti i neočekivanog ponašanja. Metoda getSnapshot hooka useSyncExternalStore dizajnirana je da bude sinkrona i brza, omogućujući Reactu da brzo utvrdi je li se vanjska pohrana promijenila tijekom renderiranja.

4. Razmatranja za renderiranje na strani poslužitelja (SSR)

Kada se koristi useSyncExternalStore s renderiranjem na strani poslužitelja, ključno je pružiti funkciju getServerSnapshot. Ova se funkcija koristi za dohvaćanje početne vrijednosti vanjske pohrane na poslužitelju. Bez nje, React će pokušati koristiti getSnapshot na poslužitelju, što možda neće biti moguće ako se vanjska pohrana oslanja na API-je specifične za preglednik (npr. localStorage).

Funkcija getServerSnapshot trebala bi vratiti zadanu vrijednost ili dohvatiti podatke s poslužiteljskog izvora (npr. kolačići, baza podataka). To osigurava da početni HTML renderiran na poslužitelju sadrži ispravne podatke.

5. Rukovanje pogreškama

Robusno rukovanje pogreškama je ključno, posebno kada se radi s vanjskim izvorima podataka. Omotajte funkcije getSnapshot i getServerSnapshot u try...catch blokove kako biste rukovali potencijalnim pogreškama. Zabilježite pogreške na odgovarajući način i pružite rezervne vrijednosti kako biste spriječili rušenje aplikacije.

6. Prilagođeni hookovi za ponovnu upotrebu

Kako biste promicali ponovnu upotrebu koda, enkapsulirajte logiku useSyncExternalStore unutar prilagođenog hooka. To olakšava dijeljenje logike među više komponenti.

Na primjer, stvorimo prilagođeni hook za pristup određenom ključu u 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; ```

Sada možete lako koristiti ovaj hook u bilo kojoj komponenti:

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

Najbolje prakse

• Neka getSnapshot bude brz: Izbjegavajte skupe izračune unutar funkcije getSnapshot. Memoizirajte rezultat ako je potrebno.
• Pružite getServerSnapshot za SSR: Osigurajte da početni HTML renderiran na poslužitelju sadrži ispravne podatke.
• Koristite prilagođene hookove: Enkapsulirajte logiku useSyncExternalStore unutar prilagođenih hookova radi bolje ponovne upotrebe i održivosti.
• Rukujte pogreškama elegantno: Omotajte getSnapshot i getServerSnapshot u try...catch blokove.
• Minimizirajte pretplate: Pretplatite se samo na one dijelove vanjske pohrane koji su komponenti zaista potrebni. To smanjuje nepotrebna ponovna renderiranja.
• Razmotrite alternative: Procijenite je li useSyncExternalStore zaista nužan. Za jednostavne slučajeve, druge tehnike upravljanja stanjem mogle bi biti prikladnije.

Alternative za useSyncExternalStore

Iako je useSyncExternalStore moćan alat, nije uvijek najbolje rješenje. Razmotrite ove alternative:

• Ugrađeno upravljanje stanjem (useState, useReducer, Context API): Ako su podaci usko povezani s Reactovim stablom komponenti, ove ugrađene opcije su često dovoljne.
• React Query/SWR: Za dohvaćanje podataka, ove biblioteke pružaju izvrsne mogućnosti keširanja, invalidacije i rukovanja pogreškama.
• Zustand/Jotai/Valtio: Ove minimalističke biblioteke za upravljanje stanjem nude jednostavan i učinkovit način upravljanja stanjem aplikacije.
• Redux/MobX: Za složene aplikacije s globalnim stanjem, Redux ili MobX bi mogli biti bolji izbor (iako unose više ponavljajućeg koda).

Izbor ovisi o specifičnim zahtjevima vaše aplikacije.

Zaključak

useSyncExternalStore je vrijedan dodatak Reactovom alatu, omogućujući besprijekornu integraciju s vanjskim izvorima stanja uz održavanje kompatibilnosti s konkurentnim renderiranjem. Razumijevanjem njegove svrhe, implementacije i naprednih primjera uporabe, možete iskoristiti ovaj hook za izgradnju robusnih i performantnih React aplikacija koje učinkovito komuniciraju s podacima iz različitih izvora.

Ne zaboravite dati prioritet performansama, elegantno rukovati pogreškama i razmotriti alternativna rješenja prije nego što posegnete za useSyncExternalStore. Uz pažljivo planiranje i implementaciju, ovaj hook može značajno poboljšati fleksibilnost i snagu vaših React aplikacija.

Daljnje istraživanje

• React dokumentacija za useSyncExternalStore
• Primjeri s različitim bibliotekama za upravljanje stanjem (Zustand, Jotai, Valtio)
• Benchmarkovi performansi koji uspoređuju useSyncExternalStore s drugim pristupima