Tratando eventos de armazenamento entre abas

Quando um usuário tem seu aplicativo aberto em duas abas e atualiza um valor na aba A, a aba B ainda mostra o estado antigo. Cada aba tem seu próprio estado do React na memória, embora compartilhem o localStorage.

Sem coordenação, as abas discordam sobre o valor atual.

O navegador dispara um evento storage nas outras abas da mesma origem sempre que o localStorage muda. É importante observar que ele não é disparado na aba que fez a alteração.

Esse é exatamente o sinal de que a aba B precisa para saber que a aba A atualizou algo.

Em um useEffect, você chama window.addEventListener('storage', handler) e retorna uma função de limpeza que o remove. Isso inscreve o componente nas alterações entre abas.

O efeito deve ser executado uma vez na montagem, portanto uma lista de dependências vazia ou estável é adequada.

O objeto do evento contém key (qual chave mudou), oldValue e newValue (as strings de antes e depois) e storageArea (o objeto de armazenamento afetado).

Uma chave null com valores nulos significa que o armazenamento foi completamente limpo.

O evento de armazenamento é disparado para cada chave da origem, portanto seu manipulador deve verificar event.key === yourKey antes de reagir. Ignorar chaves não relacionadas evita novas renderizações desnecessárias.

Lide também com o caso em que event.newValue é nulo, o que significa que a chave foi removida.

Quando chega uma alteração relevante, analise event.newValue e chame sua função de atualização para atualizar o estado do React. Isso sincroniza a segunda aba com a alteração feita em outro lugar.

Combinado com um gancho useLocalStorage, isso fecha o ciclo entre as abas.

O BroadcastChannel permite que abas da mesma origem enviem mensagens diretamente umas às outras com postMessage. Ele é mais limpo do que aproveitar eventos de armazenamento e funciona mesmo sem gravar no localStorage.

Você cria um canal por nome, publica atualizações e escuta eventos de message.

O React fornece useSyncExternalStore para assinar armazenamentos externos de forma segura em modo concorrente. Você pode conectar a função de inscrição dele ao evento storage e o instantâneo dele a uma leitura do localStorage.

Isso integra corretamente as atualizações do armazenamento externo à renderização do React.

Um caso clássico é encerrar a sessão em todos os lugares: quando uma aba limpa o indicador de autenticação, o evento de armazenamento nas outras abas detecta isso e as redireciona para a tela de login.

Isso impede que uma aba desatualizada continue exibindo conteúdo autenticado.

O tema é outra ótima aplicação: alternar o modo escuro em uma aba grava no localStorage, o evento de armazenamento é disparado nas outras e elas atualizam seu estado de tema para corresponder instantaneamente.

O usuário obtém uma aparência consistente, independentemente da aba para a qual mudar.

A sincronização entre abas se resume a escutar o evento storage (ou usar BroadcastChannel), filtrar suas chaves e atualizar o estado do React a partir do novo valor.

Para inscrições robustas e seguras em modo concorrente, useSyncExternalStore é a escolha moderna.

Teste sua compreensão dos eventos entre abas.

Você aprendeu que o evento storage é disparado em outras abas, como escutá-lo, filtrá-lo por chave e atualizar o estado, além de ter conhecido as alternativas BroadcastChannel e useSyncExternalStore.

Você viu casos de uso reais, como encerrar a sessão em todas as abas e sincronizar o modo escuro entre abas.