Gestire gli eventi di archiviazione tra schede

Quando l'app è aperta in due schede e si aggiorna un valore nella scheda A, la scheda B continua a mostrare lo stato precedente. Ogni scheda dispone di un proprio stato React in memoria, anche se entrambe condividono localStorage.

Senza coordinamento, le schede non concordano sul valore corrente.

Ogni volta che localStorage cambia, il browser invia un evento storage alle altre schede della stessa origine. È importante notare che l'evento non viene inviato alla scheda che ha effettuato la modifica.

È esattamente il segnale di cui la scheda B ha bisogno per sapere che la scheda A ha aggiornato qualcosa.

In un useEffect si chiama window.addEventListener('storage', handler) e si restituisce una funzione di pulizia che lo rimuove. In questo modo il componente si iscrive alle modifiche tra schede.

L'effetto dovrebbe essere eseguito una volta sola al montaggio, quindi è appropriato usare un array di dipendenze vuoto o stabile.

L'oggetto evento contiene key (la chiave modificata), oldValue e newValue (le stringhe prima e dopo la modifica) e storageArea (l'oggetto di archiviazione interessato).

Una chiave null con valori null indica che l'intera archiviazione è stata cancellata.

L'evento storage viene attivato per ogni chiave dell'origine, quindi il gestore dovrebbe verificare event.key === yourKey prima di reagire. Ignorare le chiavi non pertinenti evita render non necessari.

Gestisca anche il caso in cui event.newValue sia null, indicando che la chiave è stata rimossa.

Quando arriva una modifica pertinente, esegua il parsing di event.newValue e chiami il setter per aggiornare lo stato React. In questo modo la seconda scheda si sincronizza con la modifica effettuata altrove.

In combinazione con un hook useLocalStorage, questo completa il ciclo di sincronizzazione tra le schede.

BroadcastChannel consente alle schede della stessa origine di inviarsi direttamente messaggi tramite postMessage. È più pulito che sfruttare indirettamente gli eventi di archiviazione e funziona anche senza scrivere in localStorage.

Si crea un canale tramite il nome, si pubblicano gli aggiornamenti e si ascoltano gli eventi message.

React mette a disposizione useSyncExternalStore per iscriversi a store esterni in modo sicuro in presenza di rendering concorrente. È possibile collegare la sua funzione subscribe all'evento storage e il suo snapshot a una lettura di localStorage.

In questo modo gli aggiornamenti dell'archiviazione esterna vengono integrati correttamente nel rendering di React.

Un'applicazione classica è eseguire il logout ovunque: quando una scheda cancella il flag di autenticazione, l'evento storage nelle altre schede lo rileva e le reindirizza alla schermata di accesso.

In questo modo una scheda con dati obsoleti non può continuare a mostrare contenuti autenticati.

Il tema è un altro ottimo caso d'uso: attivando la modalità scura in una scheda, la modifica viene scritta in localStorage, l'evento storage viene attivato nelle altre schede e queste aggiornano immediatamente lo stato del tema.

L'utente ottiene un aspetto coerente indipendentemente dalla scheda a cui passa.

La sincronizzazione tra schede consiste nell'ascoltare l'evento storage (oppure nell'usare BroadcastChannel), filtrare le proprie chiavi e aggiornare lo stato React a partire dal nuovo valore.

Per iscrizioni robuste e sicure in presenza di rendering concorrente, useSyncExternalStore è la scelta moderna.

Verifichi la comprensione degli eventi tra schede.

Ha imparato che l'evento storage viene attivato nelle altre schede, come ascoltarlo, filtrarlo per chiave e aggiornare lo stato, oltre alle alternative BroadcastChannel e useSyncExternalStore.

Ha visto casi d'uso reali come il logout ovunque e la modalità scura sincronizzata tra schede.