Assinando APIs do Navegador

As consultas de mídia do navegador são um armazenamento externo perfeito. Você pode se inscrever em uma consulta matchMedia para o modo escuro ou para um ponto de interrupção e renderizar novamente sempre que o estado de correspondência mudar.

A função de inscrição adiciona um ouvinte de mudanças ao MediaQueryList, e getSnapshot retorna o valor booleano atual que indica a correspondência, oferecendo acesso reativo às condições responsivas.

Encapsular essa lógica em um gancho useMediaQuery permite que os componentes perguntem se uma consulta corresponde com uma única chamada. O gancho cria uma função de inscrição estável e um getSnapshot estável com base em uma determinada cadeia de consulta.

Isso produz um primitivo limpo e reutilizável para comportamento responsivo, que permanece consistente durante a renderização concorrente graças a useSyncExternalStore.

O navegador expõe eventos de conexão e desconexão, além de navigator.onLine. Inscrever-se nesses eventos e ler a propriedade fornece um status de conectividade atualizado dentro do React.

getSnapshot retorna navigator.onLine, e a função de inscrição adiciona ouvintes para os eventos de conexão e desconexão, fazendo o componente ser atualizado à medida que a conectividade muda.

Agrupar isso em um gancho useOnlineStatus permite que qualquer componente exiba banners de desconexão ou desative ações quando a rede cair. A documentação oficial do React usa exatamente este exemplo para demonstrar o gancho.

É um caso pequeno, mas ilustrativo, em que um sinal externo do navegador se transforma claramente em um elemento de estado reativo.

Você pode se inscrever em mudanças de navegação ouvindo o evento de alteração do histórico e lendo window.location em getSnapshot. Isso sustenta roteadores personalizados simples criados com base na API de histórico.

Como pushState não emite o evento de alteração do histórico, os roteadores personalizados geralmente disparam seu próprio evento para que o instantâneo também seja atualizado durante a navegação programática.

O evento de armazenamento é disparado em outras abas quando localStorage muda, o que faz dele um armazenamento externo ao qual você pode se inscrever. getSnapshot lê o valor atual, e a função de inscrição ouve os eventos de armazenamento.

Isso permite a sincronização entre abas, na qual atualizar um valor em uma aba atualiza reativamente os componentes em outra.

O evento de orientação do dispositivo informa a inclinação física de um dispositivo. Inscrever-se nele e ler os ângulos mais recentes em getSnapshot transforma dados de movimento em estado reativo.

Isso é útil para efeitos de paralaxe ou visualizações interativas que respondem à maneira como um telefone é segurado.

IntersectionObserver informa quando um elemento entra ou sai da área de visualização. Você pode encapsulá-lo para que a função de inscrição crie o observador e getSnapshot retorne o valor mais recente de isIntersecting.

Isso fornece um sinalizador reativo isVisible para carregar imagens sob demanda, disparar animações ou implementar marcadores de rolagem infinita.

ResizeObserver informa mudanças no tamanho dos elementos. Encapsulá-lo permite que a função de inscrição observe um elemento e que getSnapshot retorne suas dimensões atuais, fazendo os componentes reagirem precisamente às mudanças de layout.

Isso é mais eficiente e preciso do que ouvir o redimensionamento da janela quando você se importa com um elemento específico, e não com toda a área de visualização.

Você pode combinar o evento de redimensionamento com o gancho para criar um useWindowSize que retorne a largura e a altura atuais. A função de inscrição adiciona um ouvinte de redimensionamento, e getSnapshot lê as dimensões da janela.

Lembre-se de retornar um instantâneo estável, armazenando em cache o objeto de tamanho para que dimensões inalteradas não causem novas renderizações e mantenham a composição eficiente.

Analise como um gancho useMediaQuery usa o gancho de armazenamento.

Muitas APIs do navegador são armazenamentos externos que você pode conectar com useSyncExternalStore: matchMedia para pontos de interrupção, navigator.onLine para conectividade, localização e armazenamento para navegação e sincronização entre abas, além de observadores de orientação, interseção e redimensionamento.

Todas seguem o mesmo formato: uma função de inscrição que adiciona e remove ouvintes e um getSnapshot estável. Componha-os em ganchos como useMediaQuery, useOnlineStatus e useWindowSize.