React useSyncExternalStore: A külső állapot szinkronizálásának mesterfogásai

A useSyncExternalStore egy a React 18-ban bevezetett hook, amely lehetővé teszi külső adatforrásokra való feliratkozást és azokból való olvasást oly módon, ami kompatibilis a concurrent renderinggel. Ez a hook áthidalja a szakadékot a React által kezelt állapot és a külső állapotok között, mint például a harmadik féltől származó könyvtárakból, böngésző API-kból vagy más UI keretrendszerekből származó adatok. Merüljünk el mélyebben a céljának, implementációjának és előnyeinek megértésében.

A useSyncExternalStore szükségességének megértése

A React beépített állapotkezelése (useState, useReducer, Context API) kiválóan működik a React komponensfához szorosan kötődő adatok esetében. Azonban sok alkalmazásnak integrálódnia kell a React hatáskörén *kívül* eső adatforrásokkal. Ilyen külső források lehetnek:

• Harmadik féltől származó állapotkezelő könyvtárak: Integráció olyan könyvtárakkal, mint a Zustand, Jotai vagy a Valtio.
• Böngésző API-k: Adatok elérése a localStorage-ból, IndexedDB-ből vagy a Network Information API-ból.
• Szerverről lekért adatok: Bár gyakran előnyben részesítik az olyan könyvtárakat, mint a React Query és az SWR, néha közvetlen irányításra van szükség.
• Más UI keretrendszerek: Hibrid alkalmazásokban, ahol a React más UI technológiákkal él együtt.

Ezekből a külső forrásokból való közvetlen olvasás és írás egy React komponensen belül problémákhoz vezethet, különösen a concurrent rendering esetében. A React elavult adatokkal renderelhet egy komponenst, ha a külső forrás megváltozik, miközben a React egy új képernyőt készít elő. A useSyncExternalStore ezt a problémát oldja meg azáltal, hogy mechanizmust biztosít a React számára a külső állapottal való biztonságos szinkronizáláshoz.

Hogyan működik a useSyncExternalStore?

A useSyncExternalStore hook három argumentumot fogad el:

1. subscribe: Egy függvény, amely egy callbacket fogad el. Ez a callback minden alkalommal meghívódik, amikor a külső store megváltozik. A függvénynek egy olyan függvényt kell visszaadnia, amely meghívásakor leiratkozik a külső store-ról.
2. getSnapshot: Egy függvény, amely a külső store aktuális értékét adja vissza. A React ezt a függvényt használja a store értékének olvasására renderelés közben.
3. getServerSnapshot (opcionális): Egy függvény, amely a külső store kezdeti értékét adja vissza a szerveren. Ez csak a szerveroldali rendereléshez (SSR) szükséges. Ha nincs megadva, a React a getSnapshot-ot fogja használni a szerveren.

A hook a külső store aktuális értékét adja vissza, amelyet a getSnapshot függvényből nyer. A React biztosítja, hogy a komponens újrarenderelődjön, amikor a getSnapshot által visszaadott érték megváltozik, amit az Object.is összehasonlítás határoz meg.

Alapvető példa: Szinkronizálás a localStorage-szal

Lássunk egy egyszerű példát, amely a useSyncExternalStore-t használja egy érték szinkronizálására a localStorage-szal.

```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; ```

Ebben a példában:

• subscribe: Figyeli a storage eseményt a window objektumon. Ez az esemény akkor aktiválódik, amikor a localStorage-t egy másik fül vagy ablak módosítja.
• getSnapshot: Lekéri a myValue értékét a localStorage-ból.
• getServerSnapshot: Visszaad egy alapértelmezett értéket a szerveroldali rendereléshez. Ezt le lehetne kérni egy sütiből is, ha a felhasználó korábban beállított egy értéket.
• MyComponent: A useSyncExternalStore-t használja a localStorage változásaira való feliratkozáshoz és az aktuális érték megjelenítéséhez.

Haladó felhasználási esetek és megfontolások

1. Integráció harmadik féltől származó állapotkezelő könyvtárakkal

A useSyncExternalStore akkor jeleskedik igazán, amikor React komponenseket integrálunk külső állapotkezelő könyvtárakkal. Nézzünk egy példát a Zustand használatával:

```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; ```

Ebben a példában a useSyncExternalStore a Zustand store változásaira való feliratkozásra szolgál. Figyeljük meg, hogyan adjuk át közvetlenül a useStore.subscribe-ot és a useStore.getState-et a hooknak, ami zökkenőmentessé teszi az integrációt.

2. Teljesítményoptimalizálás memoizációval

Mivel a getSnapshot minden rendereléskor meghívódik, kulcsfontosságú, hogy performáns legyen. Kerüljük a költséges számításokat a getSnapshot-on belül. Ha szükséges, memoizáljuk a getSnapshot eredményét a useMemo vagy hasonló technikák segítségével.

Vegyük ezt a (potenciálisan problémás) példát:

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

); } ```

Ebben a példában a getSnapshot (az inline függvény, amelyet a useSyncExternalStore második argumentumaként adtunk át) egy költséges map műveletet hajt végre egy nagy tömbön. Ez a művelet *minden* rendereléskor lefut, még akkor is, ha az alapul szolgáló adatok nem változtak. Ennek optimalizálásához memoizálhatjuk az eredményt:

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

); } ```

Most a map művelet csak akkor hajtódik végre, amikor az externalStore.getState() megváltozik. Megjegyzés: valójában mély összehasonlítást kell végezni az `externalStore.getState()`-en, vagy más stratégiát kell alkalmazni, ha a store ugyanazt az objektumot mutálja. A példa a bemutatás kedvéért egyszerűsített.

3. A Concurrent Rendering kezelése

A useSyncExternalStore elsődleges előnye a React concurrent rendering funkcióival való kompatibilitása. A concurrent rendering lehetővé teszi a React számára, hogy egyszerre több UI-verziót készítsen elő. Amikor a külső store megváltozik egy concurrent renderelés során, a useSyncExternalStore biztosítja, hogy a React mindig a legfrissebb adatokat használja a változások DOM-ba történő commitálásakor.

A useSyncExternalStore nélkül a komponensek elavult adatokkal renderelődhetnek, ami vizuális inkonzisztenciákhoz és váratlan viselkedéshez vezethet. A useSyncExternalStore getSnapshot metódusát úgy tervezték, hogy szinkron és gyors legyen, lehetővé téve a React számára, hogy gyorsan megállapítsa, megváltozott-e a külső store renderelés közben.

4. Szerveroldali renderelési (SSR) megfontolások

Amikor a useSyncExternalStore-t szerveroldali rendereléssel használjuk, elengedhetetlen a getServerSnapshot függvény megadása. Ez a függvény a külső store kezdeti értékének lekérésére szolgál a szerveren. Enélkül a React megpróbálná a getSnapshot-ot használni a szerveren, ami lehetetlen lehet, ha a külső store böngésző-specifikus API-kra támaszkodik (pl. localStorage).

A getServerSnapshot függvénynek egy alapértelmezett értéket kell visszaadnia, vagy az adatokat egy szerveroldali forrásból (pl. sütik, adatbázis) kell lekérnie. Ez biztosítja, hogy a szerveren renderelt kezdeti HTML a helyes adatokat tartalmazza.

5. Hibakezelés

A robusztus hibakezelés kulcsfontosságú, különösen külső adatforrások kezelésekor. Csomagoljuk a getSnapshot és getServerSnapshot függvényeket try...catch blokkokba a lehetséges hibák kezelésére. Naplózzuk a hibákat megfelelően, és biztosítsunk tartalék értékeket, hogy megakadályozzuk az alkalmazás összeomlását.

6. Egyedi hookok az újrafelhasználhatóságért

A kód újrafelhasználhatóságának elősegítése érdekében zárjuk a useSyncExternalStore logikát egy egyedi hookba. Ez megkönnyíti a logika megosztását több komponens között.

Például, hozzunk létre egy egyedi hookot egy adott kulcs eléréséhez a localStorage-ban:

```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; ```

Mostantól könnyedén használhatja ezt a hookot bármelyik komponensben:

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

Bevált gyakorlatok

• Tartsd a getSnapshot-ot gyorsan: Kerüld a költséges számításokat a getSnapshot függvényben. Ha szükséges, memoizáld az eredményt.
• Biztosíts getServerSnapshot-ot az SSR-hez: Győződj meg róla, hogy a szerveren renderelt kezdeti HTML a helyes adatokat tartalmazza.
• Használj egyedi hookokat: Zárjuk a useSyncExternalStore logikát egyedi hookokba a jobb újrafelhasználhatóság és karbantarthatóság érdekében.
• Kezeld a hibákat elegánsan: Csomagold a getSnapshot és getServerSnapshot függvényeket try...catch blokkokba.
• Minimalizáld a feliratkozásokat: Csak a külső store azon részeire iratkozz fel, amelyekre a komponensnek valóban szüksége van. Ez csökkenti a felesleges újrarendereléseket.
• Fontolj meg alternatívákat: Értékeld ki, hogy a useSyncExternalStore valóban szükséges-e. Egyszerűbb esetekben más állapotkezelési technikák megfelelőbbek lehetnek.

A useSyncExternalStore alternatívái

Bár a useSyncExternalStore egy hatékony eszköz, nem mindig a legjobb megoldás. Fontoljuk meg ezeket az alternatívákat:

• Beépített állapotkezelés (useState, useReducer, Context API): Ha az adatok szorosan kötődnek a React komponensfához, ezek a beépített lehetőségek gyakran elegendőek.
• React Query/SWR: Adatlekérdezéshez ezek a könyvtárak kiváló gyorsítótárazási, érvénytelenítési és hibakezelési képességeket biztosítanak.
• Zustand/Jotai/Valtio: Ezek a minimalista állapotkezelő könyvtárak egyszerű és hatékony módot kínálnak az alkalmazás állapotának kezelésére.
• Redux/MobX: Komplex, globális állapottal rendelkező alkalmazásokhoz a Redux vagy a MobX jobb választás lehet (bár több boilerplate kódot vezetnek be).

A választás az alkalmazásod konkrét követelményeitől függ.

Összegzés

A useSyncExternalStore értékes kiegészítése a React eszköztárának, amely zökkenőmentes integrációt tesz lehetővé külső állapotforrásokkal, miközben fenntartja a kompatibilitást a concurrent renderinggel. Céljának, implementációjának és haladó felhasználási eseteinek megértésével kihasználhatja ezt a hookot robusztus és performáns React alkalmazások építésére, amelyek hatékonyan lépnek kapcsolatba különböző forrásokból származó adatokkal.

Ne feledkezzünk meg a teljesítmény priorizálásáról, a hibák elegáns kezeléséről és az alternatív megoldások mérlegeléséről, mielőtt a useSyncExternalStore-hoz nyúlnánk. Gondos tervezéssel és implementációval ez a hook jelentősen növelheti React alkalmazásaink rugalmasságát és erejét.

További felfedezés

• A React dokumentációja a useSyncExternalStore-ról
• Példák különböző állapotkezelő könyvtárakkal (Zustand, Jotai, Valtio)
• Teljesítménymérések, amelyek összehasonlítják a useSyncExternalStore-t más megközelítésekkel