Gestión de eventos de almacenamiento entre pestañas

Cuando un usuario tiene su aplicación abierta en dos pestañas y actualiza un valor en la pestaña A, la pestaña B sigue mostrando el estado antiguo. Cada pestaña tiene su propio estado de React en memoria, aunque ambas comparten localStorage.

Sin coordinación, las pestañas no coinciden sobre el valor actual.

El navegador emite un evento storage en las otras pestañas del mismo origen cada vez que cambia localStorage. Es importante destacar que no se activa en la pestaña que realizó el cambio.

Esta es exactamente la señal que necesita la pestaña B para saber que la pestaña A ha actualizado algo.

En un useEffect, llame a window.addEventListener('storage', handler) y devuelva una función de limpieza que lo elimine. Esto suscribe el componente a los cambios entre pestañas.

El efecto debe ejecutarse una vez al montarse, por lo que resulta adecuada una array de dependencias vacía o estable.

El objeto de evento contiene key (qué clave cambió), oldValue y newValue (las cadenas anteriores y posteriores), y storageArea (el objeto de almacenamiento afectado).

Una clave null con valores null significa que el almacenamiento se vació por completo.

El evento storage se activa para cada clave del origen, por lo que el controlador debe comprobar event.key === yourKey antes de reaccionar. Ignorar las claves no relacionadas evita renderizados innecesarios.

Gestione también el caso en que event.newValue sea null, lo que significa que se eliminó la clave.

Cuando llega un cambio relevante, analice event.newValue y llame al setter para actualizar el estado de React. Así, la segunda pestaña se sincroniza con el cambio realizado en otro lugar.

Combinado con un hook useLocalStorage, esto cierra el ciclo entre pestañas.

BroadcastChannel permite que las pestañas del mismo origen se envíen mensajes directamente mediante postMessage. Es más limpio que aprovechar los eventos de almacenamiento y funciona incluso sin escribir en localStorage.

Cree un canal por nombre, publique actualizaciones y escuche los eventos message.

React proporciona useSyncExternalStore para suscribirse a almacenes externos de forma segura en modo concurrente. Puede conectar su función de suscripción al evento storage y su instantánea a una lectura de localStorage.

Esto integra correctamente las actualizaciones del almacenamiento externo con el renderizado de React.

Un caso clásico es cerrar sesión en todas partes: cuando una pestaña elimina el indicador de autenticación, el evento de almacenamiento de las demás pestañas lo detecta y las redirige a la pantalla de inicio de sesión.

Esto evita que una pestaña obsoleta siga mostrando contenido autenticado.

El tema también es una excelente aplicación: al activar el modo oscuro en una pestaña, se escribe en localStorage, el evento de almacenamiento se activa en las demás y estas actualizan su estado del tema para coincidir al instante.

El usuario obtiene una apariencia coherente independientemente de la pestaña a la que cambie.

La sincronización entre pestañas consiste en escuchar el evento storage (o usar BroadcastChannel), filtrar las claves propias y actualizar el estado de React a partir del nuevo valor.

Para suscripciones robustas y seguras en modo concurrente, useSyncExternalStore es la opción moderna.

Compruebe su comprensión de los eventos entre pestañas.

Ha aprendido que el evento storage se activa en otras pestañas, cómo escucharlo, filtrarlo por clave y actualizar el estado, además de las alternativas BroadcastChannel y useSyncExternalStore.

También ha visto casos de uso reales, como cerrar sesión en todas partes y sincronizar el modo oscuro entre pestañas.