Construindo um Armazenamento Personalizado com useSyncExternalStore

Um armazenamento personalizado precisa de três coisas: algum estado, um método de inscrição para registrar ouvintes e um método getSnapshot para ler o estado atual. Esse é o contrato completo esperado por useSyncExternalStore.

Manter o armazenamento tão pequeno o torna independente de estruturas, permitindo que o mesmo armazenamento seja usado dentro ou fora do React.

Uma fábrica createStore recebe um valor inicial e retorna um objeto com getSnapshot, a função de inscrição e um método de atualização. Internamente, ela mantém o estado atual e um conjunto de funções de retorno dos ouvintes.

Esse padrão de fábrica permite criar vários armazenamentos independentes com uma única função reutilizável.

Quando a atualização altera o estado, ela define o novo valor e depois chama todos os ouvintes registrados. Esses ouvintes são as funções de retorno fornecidas pelo React por meio da inscrição.

Chamá-los informa ao React que o armazenamento mudou, fazendo-o reler getSnapshot e renderizar novamente quaisquer componentes que leiam do armazenamento.

Um componente lê do armazenamento chamando useSyncExternalStore com os métodos de inscrição e getSnapshot do armazenamento. O gancho retorna o valor atual e renderiza novamente o componente quando ele muda.

Você pode encapsular isso em um gancho personalizado como useStore, para que os componentes chamem uma única função em vez de configurar os argumentos do gancho todas as vezes.

Como o armazenamento é um objeto no nível do módulo, qualquer componente que o importe compartilha o mesmo estado, sem exigir um provedor de contexto. Não há nenhuma árvore para envolver nem propriedades para repassar entre componentes.

Esse é um dos principais atrativos dos armazenamentos externos: estado global compartilhado com um modelo simples de importar e usar, em vez de uma hierarquia de provedores.

Você pode criar vários armazenamentos pequenos, cada um responsável por uma fatia do estado, em vez de um único armazenamento monolítico. Os componentes se inscrevem apenas nas fatias que lhes interessam.

Isso mantém as responsabilidades separadas e limita novas renderizações, pois mudar uma fatia nunca afeta os componentes que leem outra.

Zustand, uma biblioteca popular de estado mínimo, é construída exatamente com esse padrão e usa useSyncExternalStore internamente desde a versão 4. Sua API pequena é essencialmente um createStore aprimorado com uma camada de seletores.

Perceber essa conexão torna essas bibliotecas menos misteriosas: elas são encapsulamentos finos e ergonômicos sobre o mesmo primitivo que você pode criar por conta própria.

Ao passar para getSnapshot um seletor que retorna apenas a parte do estado usada por um componente, você garante que o componente seja renderizado novamente somente quando essa parte mudar.

Isso exige um resultado estável do seletor. Portanto, memorize os valores derivados para evitar o loop infinito causado por uma nova referência e, ao mesmo tempo, limitar as atualizações à fatia relevante.

Para depurar, você pode anexar um rótulo a um armazenamento e registrar as atualizações, ou integrá-lo às ferramentas de desenvolvimento do navegador para rastrear qual armazenamento mudou e quando.

Até mesmo um simples registro no console dentro de update, condicionado por um sinalizador de desenvolvimento, ajuda você a entender o fluxo do estado enquanto desenvolve o armazenamento.

Como o armazenamento é apenas JavaScript, você pode testar sua lógica diretamente: chame update e verifique se getSnapshot retorna o novo valor, sem renderizar nada.

Você também pode testá-lo dentro do React renderizando um componente que lê seus dados e verificando se novas renderizações ocorrem após update, cobrindo tanto o armazenamento quanto sua integração.

Recapitule o contrato do método subscribe de um armazenamento personalizado.

Um armazenamento personalizado precisa de estado, subscribe e getSnapshot. Uma fábrica createStore, junto com uma função update que notifica os ouvintes, fornece um estado global compartilhado sem Provider, pois as importações do módulo compartilham uma única instância.

Utilize vários armazenamentos por fatia e seletores para limitar as novas renderizações, lembrando-se de manter referências estáveis. O Zustand v4+ baseia-se exatamente nesse padrão, e o armazenamento em JavaScript puro é fácil de testar dentro e fora do React.