O que é o rastreamento de uso de estado? Uma nova abordagem para o estado global intuitivo e performante com ganchos React e Proxy

Para Redux e não-Redux

Daishi Kato em Level Up Your Code Seguir 7 de jul · 3 min ler

Introdução

Existem muitas bibliotecas para o estado global com ganchos React. O React Redux também fornece uma API de ganchos, que é muito limpa.

Em geral, eu evitaria usar o estado global. Isso reduziria o isolamento de componentes. Vários contextos devem funcionar bem para determinados casos de uso.

Mas, e se realmente precisarmos de um estado global?

Problema

Quando um estado é um objeto não trivial, provavelmente não usará todas as propriedades do objeto para um componente para renderizar. O que a maioria das bibliotecas faz é fornecer uma interface de seleção. Com a interface do seletor, os desenvolvedores podem especificar qual parte do estado usar em um componente. Em geral, um seletor é uma função, mas existem maneiras alternativas de especificar parte do estado. Por exemplo, por nomes ou caminhos de propriedade. Em qualquer caso, os desenvolvedores são responsáveis por escrever os seletores adequados.

Isso não é apenas sobre o React Redux, mas aplicável à maioria das bibliotecas.

Solução "acompanhamento do uso do estado"

O rastreamento de uso de estado é para automatizar esse processo. Em vez de os desenvolvedores especificarem qual parte de um estado será usada, o sistema controlará como o estado é usado. A API de proxy desempenha o papel de rastreamento. A ideia de usar a API de proxy para rastreamento não é nova. Immer e MobX usam o Proxy para detectar alterações. A diferença é o propósito. Immer usa Proxy para detectar mutação ou dizer "operação de gravação". Considerando que o rastreamento de uso de estado é para "operação de leitura".

Minha proposta é combinar o sistema reativo de React com o rastreamento baseado em proxy. Graças aos ganchos React, é extremamente fácil de usar. Minha implementação atual fornece o hook useTrackedState . Se você chamar este gancho em render, você recuperará um estado. Você pode então usar o estado em render. O gancho rastreia automaticamente o uso do estado na renderização. Com o rastreamento, o gancho só acionará a re-renderização se a parte usada do estado for alterada. Porque não há nenhum ponto de nova renderização se apenas parte não utilizada do estado for alterada.

Nenhuma alteração semântica

É importante observar que o rastreamento de uso de estado não altera nenhuma semântica. Suponhamos que apenas parte não utilizada do estado seja alterada. Nesse caso, o gancho aciona a nova renderização, mas um componente renderiza o resultado correto. Se o gancho não rastrear realmente nada, obteremos o mesmo resultado. A diferença é apenas que pode diminuir.

O ponto é que não há alteração semântica no gancho useTrackedState. Apenas otimiza re-renderiza. Os desenvolvedores precisam codificar o que não como. É diferente de usar seletores para controlar re-renderizações.

atuação

Somente a questão restante é a otimização na prática, porque ela tem um custo. É por isso que o benchmarking é importante. O gancho é simples e direto de usar. Se é utilizável com desempenho comparável, é bom ir.

O resultado do benchmark mostra que o rastreamento de uso do estado é tão rápido quanto os seletores . Na verdade, é mais rápido em determinados cenários.

Projetos usando rastreamento de uso de estado

Notas de encerramento

Este breve post explicou a ideia do rastreamento de uso do estado. Ao contrário de minhas outras postagens, não havia snippet de código. Espero que a ideia seja bem explicada sem código. Eu aprecio qualquer feedback para que eu possa escrever um post de acompanhamento.