Creare uno store personalizzato con useSyncExternalStore

Uno store personalizzato richiede tre elementi: uno stato, un metodo subscribe per registrare i listener e un metodo getSnapshot per leggere lo stato corrente. Questo è l’intero contratto previsto da useSyncExternalStore.

Mantenere lo store così semplice lo rende indipendente dal framework, quindi lo stesso store può essere utilizzato dentro o fuori da React.

Una factory createStore accetta un valore iniziale e restituisce un oggetto con getSnapshot, subscribe e un metodo update. Internamente contiene lo stato corrente e un insieme di callback dei listener.

Questo pattern a factory consente di creare più store indipendenti con un’unica funzione riutilizzabile.

Quando update modifica lo stato, imposta il nuovo valore e poi chiama ogni listener registrato. Questi listener sono i callback forniti da React tramite subscribe.

Chiamarli comunica a React che lo store è cambiato, inducendolo a rileggere getSnapshot e a eseguire nuovamente il rendering dei componenti che leggono dallo store.

Un componente legge dallo store chiamando useSyncExternalStore con i metodi subscribe e getSnapshot dello store. L’hook restituisce il valore corrente e riesegue il rendering quando questo cambia.

È possibile racchiudere questa logica in un hook personalizzato come useStore, così i componenti chiamano una sola funzione invece di configurare ogni volta da soli gli argomenti dell’hook.

Poiché lo store è un oggetto a livello di modulo, qualsiasi componente che lo importa condivide lo stesso stato, senza bisogno di un Context Provider. Non è necessario racchiudere l’albero in un wrapper né passare le props lungo la gerarchia.

Questo è uno dei principali vantaggi degli store esterni: uno stato globale condiviso con un modello piatto basato su importazione e utilizzo, invece di una gerarchia di Provider.

È possibile creare diversi store piccoli, ciascuno proprietario di una slice dello stato, invece di un unico store monolitico. I componenti si sottoscrivono solo alle slice che interessano loro.

Questo mantiene separate le responsabilità e limita i nuovi rendering, perché la modifica di una slice non disturba mai i componenti che leggono da un’altra.

Zustand, una popolare libreria minimale per la gestione dello stato, si basa esattamente su questo pattern e utilizza internamente useSyncExternalStore dalla versione 4. La sua API essenziale è sostanzialmente una createStore perfezionata con un livello di selector.

Comprendere questo collegamento rende meno misteriose queste librerie: sono wrapper sottili ed ergonomici costruiti sulla stessa primitiva che è possibile implementare autonomamente.

Passando a getSnapshot un selector che restituisce solo la porzione di stato utilizzata da un componente, si garantisce che il componente esegua nuovamente il rendering soltanto quando quella porzione cambia.

È necessario che il risultato del selector sia stabile, quindi occorre memoizzare i valori derivati per evitare il loop infinito causato dalla creazione di un nuovo riferimento, mantenendo comunque gli aggiornamenti limitati alla slice pertinente.

Per il debug è possibile associare un'etichetta a uno store e registrare gli aggiornamenti, oppure integrarlo con i devtools del browser per tracciare quale store è cambiato e quando.

Anche un semplice log nella console all'interno di update, attivato solo con un flag di sviluppo, aiuta a comprendere il flusso dello stato durante la creazione dello store.

Poiché lo store è semplice JavaScript, è possibile testarne direttamente la logica: chiamare update e verificare che getSnapshot restituisca il nuovo valore, senza eseguire alcun rendering.

È inoltre possibile testarlo all'interno di React eseguendo il rendering di un componente che lo legge e verificando che, dopo update, venga eseguito nuovamente il rendering, così da coprire sia lo store sia la sua integrazione.

Richiami il contratto del metodo subscribe di uno store personalizzato.

Uno store personalizzato necessita di state, subscribe e getSnapshot. Una factory createStore, insieme a un update che notifica gli ascoltatori, fornisce uno stato globale condiviso senza Provider, perché le importazioni del modulo condividono una singola istanza.

Utilizzi più store organizzati in slice e i selector per limitare i nuovi rendering, ricordando di mantenere stabili i riferimenti. Zustand v4+ si basa esattamente su questo pattern e lo store in semplice JavaScript è facile da testare sia dentro sia fuori da React.