React useSyncExternalStore: Opanowanie synchronizacji stanu zewnętrznego

useSyncExternalStore to hook Reacta wprowadzony w wersji 18, który pozwala na subskrybowanie i odczytywanie danych z zewnętrznych źródeł w sposób kompatybilny z renderowaniem współbieżnym. Ten hook wypełnia lukę między stanem zarządzanym przez React a stanem zewnętrznym, takim jak dane z bibliotek firm trzecich, API przeglądarki czy innych frameworków UI. Przyjrzyjmy się bliżej jego celowi, implementacji i korzyściom.

Zrozumienie potrzeby użycia useSyncExternalStore

Wbudowane mechanizmy zarządzania stanem w React (useState, useReducer, Context API) działają wyjątkowo dobrze dla danych ściśle powiązanych z drzewem komponentów React. Jednak wiele aplikacji musi integrować się ze źródłami danych *poza* kontrolą Reacta. Te zewnętrzne źródła mogą obejmować:

• Biblioteki do zarządzania stanem firm trzecich: Integracja z bibliotekami takimi jak Zustand, Jotai czy Valtio.
• API przeglądarki: Dostęp do danych z localStorage, IndexedDB czy Network Information API.
• Dane pobierane z serwerów: Chociaż często preferowane są biblioteki takie jak React Query i SWR, czasami możesz chcieć mieć bezpośrednią kontrolę.
• Inne frameworki UI: W aplikacjach hybrydowych, gdzie React współistnieje z innymi technologiami UI.

Bezpośrednie odczytywanie i zapisywanie do tych zewnętrznych źródeł wewnątrz komponentu React może prowadzić do problemów, szczególnie przy renderowaniu współbieżnym. React może wyrenderować komponent z nieaktualnymi danymi, jeśli zewnętrzne źródło zmieni się w trakcie, gdy React przygotowuje nowy ekran. useSyncExternalStore rozwiązuje ten problem, dostarczając mechanizm, dzięki któremu React może bezpiecznie synchronizować się ze stanem zewnętrznym.

Jak działa useSyncExternalStore

Hook useSyncExternalStore przyjmuje trzy argumenty:

1. subscribe: Funkcja, która akceptuje callback. Ten callback zostanie wywołany za każdym razem, gdy zmieni się zewnętrzny magazyn. Funkcja powinna zwrócić inną funkcję, która po wywołaniu anuluje subskrypcję zewnętrznego magazynu.
2. getSnapshot: Funkcja, która zwraca aktualną wartość zewnętrznego magazynu. React używa tej funkcji do odczytania wartości magazynu podczas renderowania.
3. getServerSnapshot (opcjonalny): Funkcja, która zwraca początkową wartość zewnętrznego magazynu na serwerze. Jest to konieczne tylko w przypadku renderowania po stronie serwera (SSR). Jeśli nie zostanie podana, React użyje getSnapshot na serwerze.

Hook zwraca aktualną wartość zewnętrznego magazynu, uzyskaną z funkcji getSnapshot. React zapewnia, że komponent zostanie ponownie wyrenderowany za każdym razem, gdy zmieni się wartość zwrócona przez getSnapshot, co jest określane za pomocą porównania Object.is.

Podstawowy przykład: Synchronizacja z localStorage

Stwórzmy prosty przykład, który używa useSyncExternalStore do synchronizacji wartości z 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; ```

W tym przykładzie:

• subscribe: Nasłuchuje na zdarzenie storage w obiekcie window. To zdarzenie jest wywoływane za każdym razem, gdy localStorage jest modyfikowany przez inną kartę lub okno.
• getSnapshot: Pobiera wartość myValue z localStorage.
• getServerSnapshot: Zwraca domyślną wartość na potrzeby renderowania po stronie serwera. Wartość ta mogłaby być pobrana z pliku cookie, jeśli użytkownik wcześniej ustawił wartość.
• MyComponent: Używa useSyncExternalStore do subskrybowania zmian w localStorage i wyświetlania bieżącej wartości.

Zaawansowane przypadki użycia i uwagi

1. Integracja z bibliotekami do zarządzania stanem firm trzecich

useSyncExternalStore sprawdza się doskonale podczas integracji komponentów React z zewnętrznymi bibliotekami do zarządzania stanem. Spójrzmy na przykład z użyciem 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; ```

W tym przykładzie useSyncExternalStore jest używany do subskrybowania zmian w magazynie Zustand. Zauważ, jak przekazujemy useStore.subscribe i useStore.getState bezpośrednio do hooka, co sprawia, że integracja jest bezproblemowa.

2. Optymalizacja wydajności za pomocą memoizacji

Ponieważ getSnapshot jest wywoływany przy każdym renderowaniu, kluczowe jest zapewnienie jego wydajności. Unikaj kosztownych obliczeń wewnątrz getSnapshot. W razie potrzeby zmemoizuj wynik getSnapshot za pomocą useMemo lub podobnych technik.

Rozważ ten (potencjalnie problematyczny) przykład:

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

); } ```

W tym przykładzie getSnapshot (funkcja inline przekazana jako drugi argument do useSyncExternalStore) wykonuje kosztowną operację map na dużej tablicy. Ta operacja będzie wykonywana przy *każdym* renderowaniu, nawet jeśli bazowe dane się не zmieniły. Aby to zoptymalizować, możemy zmemoizować wynik:

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

); } ```

Teraz operacja map jest wykonywana tylko wtedy, gdy zmienia się externalStore.getState(). Uwaga: w rzeczywistości trzeba będzie przeprowadzić głębokie porównanie `externalStore.getState()` lub użyć innej strategii, jeśli magazyn mutuje ten sam obiekt. Przykład został uproszczony dla celów demonstracyjnych.

3. Obsługa renderowania współbieżnego

Główną zaletą useSyncExternalStore jest jego kompatybilność z funkcjami renderowania współbieżnego w React. Renderowanie współbieżne pozwala Reactowi przygotowywać wiele wersji interfejsu użytkownika jednocześnie. Gdy zewnętrzny magazyn zmienia się podczas renderowania współbieżnego, useSyncExternalStore zapewnia, że React zawsze użyje najaktualniejszych danych podczas zatwierdzania zmian w DOM.

Bez useSyncExternalStore komponenty mogłyby renderować się z nieaktualnymi danymi, co prowadziłoby do niespójności wizualnych i nieoczekiwanego zachowania. Metoda getSnapshot w useSyncExternalStore została zaprojektowana tak, aby być synchroniczna i szybka, co pozwala Reactowi szybko określić, czy zewnętrzny magazyn zmienił się podczas renderowania.

4. Uwagi dotyczące renderowania po stronie serwera (SSR)

Podczas używania useSyncExternalStore z renderowaniem po stronie serwera, kluczowe jest dostarczenie funkcji getServerSnapshot. Ta funkcja jest używana do pobrania początkowej wartości zewnętrznego magazynu na serwerze. Bez niej React spróbuje użyć getSnapshot na serwerze, co może nie być możliwe, jeśli zewnętrzny magazyn opiera się na API specyficznych dla przeglądarki (np. localStorage).

Funkcja getServerSnapshot powinna zwracać wartość domyślną lub pobierać dane ze źródła po stronie serwera (np. pliki cookie, baza danych). Zapewnia to, że początkowy kod HTML wyrenderowany na serwerze zawiera poprawne dane.

5. Obsługa błędów

Solidna obsługa błędów jest kluczowa, zwłaszcza gdy mamy do czynienia z zewnętrznymi źródłami danych. Opakuj funkcje getSnapshot i getServerSnapshot w bloki try...catch, aby obsłużyć potencjalne błędy. Odpowiednio loguj błędy i dostarczaj wartości zapasowe, aby zapobiec awarii aplikacji.

6. Niestandardowe hooki w celu ponownego użycia

Aby promować ponowne użycie kodu, zamknij logikę useSyncExternalStore w niestandardowym hooku. Ułatwia to współdzielenie logiki między wieloma komponentami.

Na przykład, stwórzmy niestandardowy hook do uzyskiwania dostępu do określonego klucza w 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; ```

Teraz możesz łatwo użyć tego hooka w dowolnym komponencie:

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

Dobre praktyki

• Dbaj o szybkość getSnapshot: Unikaj kosztownych obliczeń wewnątrz funkcji getSnapshot. W razie potrzeby zmemoizuj wynik.
• Dostarcz getServerSnapshot dla SSR: Upewnij się, że początkowy kod HTML wyrenderowany na serwerze zawiera poprawne dane.
• Używaj niestandardowych hooków: Zamykaj logikę useSyncExternalStore w niestandardowych hookach, aby zapewnić lepszą reużywalność i łatwość w utrzymaniu.
• Obsługuj błędy z gracją: Opakuj getSnapshot i getServerSnapshot w bloki try...catch.
• Minimalizuj subskrypcje: Subskrybuj tylko te części zewnętrznego magazynu, których komponent faktycznie potrzebuje. Zmniejsza to liczbę niepotrzebnych ponownych renderowań.
• Rozważ alternatywy: Oceń, czy useSyncExternalStore jest naprawdę konieczny. W prostszych przypadkach inne techniki zarządzania stanem mogą być bardziej odpowiednie.

Alternatywy dla useSyncExternalStore

Chociaż useSyncExternalStore jest potężnym narzędziem, nie zawsze jest najlepszym rozwiązaniem. Rozważ te alternatywy:

• Wbudowane zarządzanie stanem (useState, useReducer, Context API): Jeśli dane są ściśle powiązane z drzewem komponentów React, te wbudowane opcje są często wystarczające.
• React Query/SWR: Do pobierania danych, te biblioteki zapewniają doskonałe możliwości buforowania, unieważniania i obsługi błędów.
• Zustand/Jotai/Valtio: Te minimalistyczne biblioteki do zarządzania stanem oferują prosty i wydajny sposób zarządzania stanem aplikacji.
• Redux/MobX: W przypadku złożonych aplikacji z globalnym stanem, Redux lub MobX mogą być lepszym wyborem (chociaż wprowadzają więcej kodu standardowego).

Wybór zależy od konkretnych wymagań Twojej aplikacji.

Podsumowanie

useSyncExternalStore to cenne uzupełnienie zestawu narzędzi Reacta, umożliwiające płynną integrację z zewnętrznymi źródłami stanu przy jednoczesnym zachowaniu kompatybilności z renderowaniem współbieżnym. Rozumiejąc jego cel, implementację i zaawansowane przypadki użycia, możesz wykorzystać ten hook do budowania solidnych i wydajnych aplikacji React, które skutecznie współdziałają z danymi z różnych źródeł.

Pamiętaj, aby priorytetowo traktować wydajność, z gracją obsługiwać błędy i rozważyć alternatywne rozwiązania, zanim sięgniesz po useSyncExternalStore. Dzięki starannemu planowaniu i implementacji, ten hook może znacznie zwiększyć elastyczność i moc Twoich aplikacji React.

Dalsza lektura

• Dokumentacja React dla useSyncExternalStore
• Przykłady z różnymi bibliotekami do zarządzania stanem (Zustand, Jotai, Valtio)
• Testy wydajności porównujące useSyncExternalStore z innymi podejściami