React useSyncExternalStore: Padroneggiare la Sincronizzazione dello Stato Esterno

useSyncExternalStore è un hook di React introdotto in React 18 che consente di sottoscrivere e leggere da fonti di dati esterne in modo compatibile con il rendering concorrente. Questo hook colma il divario tra lo stato gestito da React e lo stato esterno, come i dati provenienti da librerie di terze parti, API del browser o altri framework UI. Analizziamo nel dettaglio il suo scopo, l'implementazione e i benefici.

Comprendere la Necessità di useSyncExternalStore

La gestione dello stato integrata in React (useState, useReducer, Context API) funziona eccezionalmente bene per i dati strettamente accoppiati all'albero dei componenti di React. Tuttavia, molte applicazioni devono integrarsi con fonti di dati *al di fuori* del controllo di React. Queste fonti esterne possono includere:

• Librerie di gestione dello stato di terze parti: Integrazione con librerie come Zustand, Jotai o Valtio.
• API del browser: Accesso a dati da localStorage, IndexedDB o dall'API Network Information.
• Dati recuperati da server: Sebbene librerie come React Query e SWR siano spesso preferite, a volte si potrebbe desiderare un controllo diretto.
• Altri framework UI: In applicazioni ibride in cui React coesiste con altre tecnologie UI.

Leggere e scrivere direttamente da queste fonti esterne all'interno di un componente React può causare problemi, in particolare con il rendering concorrente. React potrebbe renderizzare un componente con dati non aggiornati se la fonte esterna cambia mentre React sta preparando una nuova schermata. useSyncExternalStore risolve questo problema fornendo un meccanismo per sincronizzare in sicurezza React con lo stato esterno.

Come Funziona useSyncExternalStore

L'hook useSyncExternalStore accetta tre argomenti:

1. subscribe: Una funzione che accetta un callback. Questo callback verrà invocato ogni volta che lo store esterno cambia. La funzione dovrebbe restituire un'altra funzione che, quando chiamata, annulla la sottoscrizione allo store esterno.
2. getSnapshot: Una funzione che restituisce il valore corrente dello store esterno. React utilizza questa funzione per leggere il valore dello store durante il rendering.
3. getServerSnapshot (opzionale): Una funzione che restituisce il valore iniziale dello store esterno sul server. È necessaria solo per il rendering lato server (SSR). Se non fornita, React utilizzerà getSnapshot sul server.

L'hook restituisce il valore corrente dello store esterno, ottenuto dalla funzione getSnapshot. React garantisce che il componente si ri-renderizzi ogni volta che il valore restituito da getSnapshot cambia, secondo il confronto di Object.is.

Esempio di Base: Sincronizzazione con localStorage

Creiamo un esempio semplice che utilizza useSyncExternalStore per sincronizzare un valore con 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'; // O recuperare da un cookie sul 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; ```

In questo esempio:

• subscribe: Ascolta l'evento storage sull'oggetto window. Questo evento viene scatenato ogni volta che localStorage viene modificato da un'altra scheda o finestra.
• getSnapshot: Recupera il valore di myValue da localStorage.
• getServerSnapshot: Restituisce un valore predefinito per il rendering lato server. Questo potrebbe essere recuperato da un cookie se l'utente avesse precedentemente impostato un valore.
• MyComponent: Utilizza useSyncExternalStore per sottoscrivere le modifiche in localStorage e visualizzare il valore corrente.

Casi d'Uso Avanzati e Considerazioni

1. Integrazione con Librerie di Gestione dello Stato di Terze Parti

useSyncExternalStore eccelle quando si integrano componenti React con librerie di gestione dello stato esterne. Vediamo un esempio con 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 // Stato iniziale sul server ).count; const increment = useStore((state) => state.increment); const decrement = useStore((state) => state.decrement); return ( ); } export default MyComponent; ```

In questo esempio, useSyncExternalStore viene utilizzato per sottoscrivere le modifiche nello store di Zustand. Notare come passiamo useStore.subscribe e useStore.getState direttamente all'hook, rendendo l'integrazione fluida.

2. Ottimizzazione delle Prestazioni con la Memoizzazione

Poiché getSnapshot viene chiamata ad ogni render, è fondamentale assicurarsi che sia performante. Evitare calcoli costosi all'interno di getSnapshot. Se necessario, memoizzare il risultato di getSnapshot utilizzando useMemo o tecniche simili.

Consideriamo questo esempio (potenzialmente problematico):

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { data: [...Array(10000).keys()], // Array di grandi dimensioni 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) // Operazione costosa ); return (

{data.slice(0, 10).map((item) => (
• {item}
))}

); } ```

In questo esempio, getSnapshot (la funzione inline passata come secondo argomento a useSyncExternalStore) esegue un'operazione map costosa su un array di grandi dimensioni. Questa operazione verrà eseguita ad *ogni* render, anche se i dati sottostanti non sono cambiati. Per ottimizzare ciò, possiamo memoizzare il risultato:

```javascript import { useSyncExternalStore, useMemo } from 'react'; const externalStore = { // ... (come prima) }; 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}
))}

); } ```

Ora, l'operazione map viene eseguita solo quando externalStore.getState() cambia. Nota: in realtà sarà necessario confrontare in profondità `externalStore.getState()` o utilizzare una strategia diversa se lo store muta lo stesso oggetto. L'esempio è semplificato a scopo dimostrativo.

3. Gestione del Rendering Concorrente

Il vantaggio principale di useSyncExternalStore è la sua compatibilità con le funzionalità di rendering concorrente di React. Il rendering concorrente consente a React di preparare più versioni dell'interfaccia utente contemporaneamente. Quando lo store esterno cambia durante un rendering concorrente, useSyncExternalStore garantisce che React utilizzi sempre i dati più aggiornati quando applica le modifiche al DOM.

Senza useSyncExternalStore, i componenti potrebbero essere renderizzati con dati non aggiornati, portando a incoerenze visive e comportamenti imprevisti. Il metodo getSnapshot di useSyncExternalStore è progettato per essere sincrono e veloce, consentendo a React di determinare rapidamente se lo store esterno è cambiato durante il rendering.

4. Considerazioni sul Rendering Lato Server (SSR)

Quando si utilizza useSyncExternalStore con il rendering lato server, è essenziale fornire la funzione getServerSnapshot. Questa funzione viene utilizzata per recuperare il valore iniziale dello store esterno sul server. Senza di essa, React tenterà di utilizzare getSnapshot sul server, il che potrebbe non essere possibile se lo store esterno si basa su API specifiche del browser (ad es., localStorage).

La funzione getServerSnapshot dovrebbe restituire un valore predefinito o recuperare i dati da una fonte lato server (ad es., cookie, database). Ciò garantisce che l'HTML iniziale renderizzato sul server contenga i dati corretti.

5. Gestione degli Errori

Una robusta gestione degli errori è cruciale, specialmente quando si ha a che fare con fonti di dati esterne. Racchiudere le funzioni getSnapshot e getServerSnapshot in blocchi try...catch per gestire potenziali errori. Registrare gli errori in modo appropriato e fornire valori di fallback per evitare che l'applicazione si blocchi.

6. Hook Personalizzati per la Riusabilità

Per promuovere la riusabilità del codice, incapsulare la logica di useSyncExternalStore all'interno di un hook personalizzato. Ciò rende più facile condividere la logica tra più componenti.

Ad esempio, creiamo un hook personalizzato per accedere a una chiave specifica in 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; ```

Ora, è possibile utilizzare facilmente questo hook in qualsiasi componente:

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

Best Practice

• Mantenere getSnapshot Veloce: Evitare calcoli costosi all'interno della funzione getSnapshot. Memoizzare il risultato se necessario.
• Fornire getServerSnapshot per l'SSR: Assicurarsi che l'HTML iniziale renderizzato sul server contenga i dati corretti.
• Usare Hook Personalizzati: Incapsulare la logica di useSyncExternalStore in hook personalizzati per una migliore riusabilità e manutenibilità.
• Gestire gli Errori con Eleganza: Racchiudere getSnapshot e getServerSnapshot in blocchi try...catch.
• Minimizzare le Sottoscrizioni: Sottoscrivere solo le parti dello store esterno di cui il componente ha effettivamente bisogno. Ciò riduce i ri-render non necessari.
• Considerare le Alternative: Valutare se useSyncExternalStore sia veramente necessario. Per casi semplici, altre tecniche di gestione dello stato potrebbero essere più appropriate.

Alternative a useSyncExternalStore

Sebbene useSyncExternalStore sia uno strumento potente, non è sempre la soluzione migliore. Considerare queste alternative:

• Gestione dello Stato Integrata (useState, useReducer, Context API): Se i dati sono strettamente accoppiati all'albero dei componenti di React, queste opzioni integrate sono spesso sufficienti.
• React Query/SWR: Per il recupero dei dati, queste librerie offrono eccellenti capacità di caching, invalidazione e gestione degli errori.
• Zustand/Jotai/Valtio: Queste librerie di gestione dello stato minimaliste offrono un modo semplice ed efficiente per gestire lo stato dell'applicazione.
• Redux/MobX: Per applicazioni complesse con uno stato globale, Redux o MobX potrebbero essere una scelta migliore (sebbene introducano più codice boilerplate).

La scelta dipende dai requisiti specifici della propria applicazione.

Conclusione

useSyncExternalStore è un'aggiunta preziosa al toolkit di React, che consente un'integrazione fluida con fonti di stato esterne mantenendo la compatibilità con il rendering concorrente. Comprendendone lo scopo, l'implementazione e i casi d'uso avanzati, è possibile sfruttare questo hook per creare applicazioni React robuste e performanti che interagiscono efficacemente con dati provenienti da varie fonti.

Ricordarsi di dare priorità alle prestazioni, gestire gli errori con eleganza e considerare soluzioni alternative prima di ricorrere a useSyncExternalStore. Con un'attenta pianificazione e implementazione, questo hook può migliorare significativamente la flessibilità e la potenza delle proprie applicazioni React.

Approfondimenti

• Documentazione di React per useSyncExternalStore
• Esempi con varie librerie di gestione dello stato (Zustand, Jotai, Valtio)
• Benchmark delle prestazioni a confronto tra useSyncExternalStore e altri approcci