O Problema das Assinaturas em Armazenamentos Externos

Um armazenamento externo é qualquer fonte de estado que viva fora da árvore do React, como um armazenamento Redux, uma API do navegador como matchMedia ou um objeto simples no nível do módulo com seu próprio mecanismo de inscrição.

O React não é dono desse estado, portanto precisa se inscrever nas alterações e ler instantâneos para manter os componentes sincronizados com o que o armazenamento contém atualmente.

Uma abordagem comum lê o valor do armazenamento em useState e depois usa useEffect para se inscrever e chamar setState sempre que o armazenamento mudar. À primeira vista, isso parece manter o componente atualizado.

Funciona em uma renderização síncrona simples, mas tem uma falha sutil que se torna visível quando o React renderiza de forma concorrente e pode pausar ou reiniciar o trabalho no meio do processo.

A fragmentação acontece quando diferentes partes da interface exibem valores diferentes do mesmo armazenamento durante uma única passagem de renderização. A renderização concorrente pode interromper e retomar o trabalho, e o armazenamento pode mudar nesse intervalo.

O resultado é uma tela inconsistente, na qual um componente mostra o valor antigo e outro mostra o novo, uma inconsistência que era efetivamente impossível antes dos recursos concorrentes.

Imagine vários componentes lendo um armazenamento de tema enquanto o React renderiza de forma concorrente. Se o usuário alternar para o modo escuro no meio do processo, os componentes renderizados antes da alternância mostrarão o tema claro, e os renderizados depois mostrarão o escuro.

Você acaba com uma tela parcialmente clara e parcialmente escura durante um quadro, porque o valor do armazenamento mudou durante uma renderização que o React não tratou atomicamente.

Os efeitos são executados depois que a renderização é confirmada, portanto uma inscrição baseada em useEffect não consegue garantir que o valor lido durante a renderização corresponda ao armazenamento no momento da confirmação. A inscrição é acionada tarde demais para evitar uma exibição inconsistente.

Quando o efeito se inscreve novamente e atualiza o estado, o quadro inconsistente talvez já tenha sido mostrado ao usuário.

Uma API experimental anterior chamada useMutableSource tentou resolver leituras externas seguras em renderizações concorrentes, mas sua API se mostrou difícil de usar corretamente e nunca foi lançada como estável.

A equipe do React a substituiu por uma primitiva mais simples e ergonômica, que oferece as mesmas garantias de consistência sem essas limitações.

useSyncExternalStore é o gancho oficial para se inscrever em armazenamentos externos de forma segura em renderizações concorrentes. Ele coordena o trabalho com o React para que as leituras permaneçam consistentes durante uma renderização e os componentes nunca sofram fragmentação.

Ele se tornou a primitiva recomendada para autores de bibliotecas que precisam integrar de forma confiável estados externos ao React durante renderizações concorrentes.

Bibliotecas de estado que se inscrevem em armazenamentos externos foram diretamente afetadas, incluindo Redux, MobX e Valtio. Cada uma precisou adotar a nova primitiva para continuar segura quando os recursos concorrentes foram lançados.

Por isso, suas integrações com o React foram atualizadas para chamar useSyncExternalStore internamente, em vez de depender do padrão mais antigo que combina useState com useEffect.

O gancho garante que todo componente que leia o armazenamento durante uma renderização veja o mesmo instantâneo e força uma nova renderização síncrona se o armazenamento mudar de uma forma que, de outro modo, causaria uma inconsistência de leitura.

Essa combinação de um instantâneo consistente e segurança na renderização concorrente é o principal valor que o gancho oferece em comparação com inscrições implementadas manualmente.

Ao usar useSyncExternalStore, suas inscrições continuam corretas à medida que o React evolui seu modelo de renderização. Você adota as garantias da estrutura em vez de reimplementá-las de forma imperfeita.

Isso faz dele a maneira duradoura e recomendada de conectar qualquer fonte externa de dados a componentes do React.

Confirme o significado de inconsistência de leitura na renderização concorrente.

Os armazenamentos externos ficam fora do React, e a inscrição ingênua usando useState e useEffect não consegue evitar inconsistências de leitura quando a renderização se torna concorrente. Os efeitos são executados tarde demais para manter as leituras consistentes dentro de uma renderização.

useSyncExternalStore substitui o useMutableSource abandonado e oferece um instantâneo consistente com segurança na renderização concorrente. Bibliotecas como Redux, MobX e Valtio o adotaram como o primitivo preparado para o futuro para inscrições em armazenamentos.