Sincronizzare lo stato con localStorage

Il primo impulso potrebbe essere leggere localStorage in un punto e scriverlo in un altro, ma i due punti possono divergere. Gli aggiornamenti dello stato che dimenticano di persistere i dati, o i valori persistiti che non si riflettono nello stato, causano bug.

Serve un'unica fonte di verità che mantenga lo stato React e l'archiviazione perfettamente sincronizzati.

La soluzione più pulita è un hook useLocalStorage che avvolge useState e persiste automaticamente le modifiche. Restituisce un valore e un setter proprio come useState.

Chi lo utilizza può trattarlo esattamente come uno stato normale, ottenendo però la persistenza automaticamente.

La lettura di localStorage è un'operazione sincrona, quindi non dovrebbe essere eseguita a ogni render. Passi una funzione a useState, cioè l'inizializzatore lazy, in modo che la lettura avvenga una sola volta al montaggio.

All'interno di questa funzione si esegue il parsing del valore memorizzato oppure si restituisce il valore predefinito fornito.

Se si calcola lo stato iniziale direttamente come argomento, quell'espressione viene eseguita a ogni render, anche se dopo il primo viene ignorata. Con una funzione, React la chiama una sola volta.

Per le letture di localStorage, questo evita di ripetere a ogni render lavoro sincrono sul thread principale.

Per persistere gli aggiornamenti, aggiunga un useEffect che venga eseguito ogni volta che il valore cambia e chiami localStorage.setItem(key, JSON.stringify(value)).

Inserire il valore nell'array delle dipendenze fa sì che ogni modifica dello stato venga scritta automaticamente nell'archiviazione.

Quando si imposta un valore in base a quello precedente, utilizzi la forma funzionale setValue(prev => prev + 1). In questo modo si evitano le closure obsolete, nelle quali verrebbe scritto un valore acquisito in precedenza.

È particolarmente importante all'interno di gestori di eventi ed effetti che potrebbero acquisire uno snapshot non aggiornato.

getItem restituisce null quando la chiave non esiste. L'inizializzatore deve rilevare questo caso e usare il valore predefinito invece di provare a eseguire il parsing di null.

Una condizione come stored != null ? JSON.parse(stored) : defaultValue gestisce correttamente il primo accesso.

In TypeScript si può rendere generico l'hook: function useLocalStorage<T>(key: string, initial: T). In questo modo si conserva il tipo del valore e chi lo utilizza ottiene la massima sicurezza dei tipi.

La tupla restituita ha il tipo [T, Dispatch<SetStateAction<T>>], coerente con useState.

Con il tempo la forma dei dati cambia e i vecchi valori memorizzati possono compromettere il nuovo codice. Memorizzi una chiave di versione insieme ai dati, così da poter rilevare i formati obsoleti.

Ad esempio, salvi { version: 2, data } e confronti la versione durante la lettura.

Quando la versione memorizzata non corrisponde a quella corrente, elimini o migri il vecchio valore invece di considerarlo attendibile. La strategia più semplice consiste nel rimuovere la voce obsoleta e usare i valori predefiniti.

In questo modo si evitano arresti anomali causati da dati scritti da una versione precedente dell'app.

Un useLocalStorage completo combina un inizializzatore lazy che legge ed esegue il parsing in modo sicuro, un setter che supporta gli aggiornamenti funzionali e un useEffect che scrive nell'archiviazione includendo il versionamento.

Il risultato è un sostituto immediato di useState che sopravvive ai ricaricamenti.

Verifichi la comprensione dell'inizializzazione dello stato.

Ha imparato a creare un hook useLocalStorage con un inizializzatore lazy, a persistere le modifiche tramite useEffect, a usare gli aggiornamenti funzionali per evitare le closure obsolete e a gestire i valori nulli.

Ha inoltre visto come usare i generics di TypeScript e il versionamento per eliminare in sicurezza i dati obsoleti.