Il problema delle sottoscrizioni a store esterni

Uno store esterno è qualsiasi fonte di stato che risiede al di fuori dell'albero React, come uno store Redux, un'API del browser come matchMedia o un semplice oggetto a livello di modulo dotato di un proprio meccanismo di sottoscrizione.

React non possiede questo stato, quindi deve sottoscriversi ai cambiamenti e leggere gli snapshot per mantenere i componenti sincronizzati con ciò che lo store contiene al momento.

Un approccio comune legge il valore dello store in useState e poi usa useEffect per sottoscriversi e chiamare setState ogni volta che lo store cambia. In apparenza, questo sembra mantenere aggiornato il componente.

Funziona con un rendering sincrono semplice, ma presenta un difetto sottile che diventa evidente quando React esegue il rendering concorrente e può mettere in pausa o riavviare il lavoro a metà.

Il tearing si verifica quando parti diverse dell'interfaccia mostrano valori diversi dello stesso store durante un singolo passaggio di rendering. Il rendering concorrente può interrompere e riprendere il lavoro e, nel frattempo, lo store può cambiare.

Il risultato è una schermata incoerente, in cui un componente mostra il vecchio valore e un altro quello nuovo: un'incoerenza di fatto impossibile prima delle funzionalità concorrenti.

Immagini molti componenti che leggono uno store del tema mentre React esegue il rendering concorrente. Se l'utente attiva la modalità scura a metà del processo, i componenti renderizzati prima dell'attivazione mostrano il tema chiaro, mentre quelli successivi mostrano quello scuro.

Per un frame ci si ritrova con una schermata in parte chiara e in parte scura, perché il valore dello store è cambiato durante un rendering che React non ha trattato in modo atomico.

Gli effetti vengono eseguiti dopo il commit del rendering, quindi una sottoscrizione basata su useEffect non può garantire che il valore letto durante il rendering corrisponda allo store al momento del commit. La sottoscrizione si attiva troppo tardi per impedire una visualizzazione incoerente.

Quando l'effetto si sottoscrive nuovamente e aggiorna lo stato, il frame incoerente potrebbe essere già stato mostrato all'utente.

Una precedente API sperimentale chiamata useMutableSource tentava di risolvere il problema delle letture esterne sicure durante il rendering concorrente, ma la sua API si è rivelata difficile da usare correttamente e non è mai stata rilasciata come stabile.

Il team di React l'ha sostituita con una primitiva più semplice ed ergonomica, che offre le stesse garanzie di coerenza senza le insidie dell'API precedente.

useSyncExternalStore è l'hook ufficiale per sottoscriversi agli store esterni in modo sicuro durante il rendering concorrente. Coordina le operazioni con React affinché le letture rimangano coerenti durante un rendering e non si verifichi tearing nei componenti.

È diventato il primitivo consigliato per gli autori di librerie che devono integrare in modo affidabile lo stato esterno in React durante il rendering concorrente.

Le librerie di gestione dello stato che si sottoscrivono a store esterni sono state direttamente interessate, tra cui Redux, MobX e Valtio. Ognuna ha dovuto adottare la nuova primitiva per rimanere sicura dopo l'introduzione delle funzionalità concorrenti.

Per questo motivo i relativi binding per React sono stati aggiornati per chiamare internamente useSyncExternalStore, invece di affidarsi al precedente schema useState più useEffect.

L’hook garantisce che ogni componente che legge lo store durante un rendering veda lo stesso snapshot e forza un nuovo rendering sincrono se lo store cambia in un modo che altrimenti causerebbe tearing.

Questa combinazione di snapshot coerente e sicurezza nel rendering concorrente è il valore principale che l’hook offre rispetto alle sottoscrizioni implementate manualmente.

Utilizzando useSyncExternalStore, le sottoscrizioni rimangono corrette man mano che React evolve il proprio modello di rendering. Si scelgono le garanzie del framework invece di reimplementarle in modo imperfetto.

Questo lo rende il modo più solido e raccomandato per collegare qualsiasi fonte esterna di verità ai componenti React.

Verifichi che cosa significa tearing nel rendering concorrente.

Gli store esterni vivono al di fuori di React e la sottoscrizione ingenua con useState e useEffect non può impedire il tearing quando il rendering è concorrente. Gli effetti vengono eseguiti troppo tardi per mantenere coerenti le letture all’interno di un rendering.

useSyncExternalStore sostituisce useMutableSource, ormai abbandonato, e offre uno snapshot coerente con sicurezza nel rendering concorrente. Librerie come Redux, MobX e Valtio lo hanno adottato come primitiva a prova di futuro per le sottoscrizioni agli store.