O que há de novo no Recoil 0.3?

Já faz um tempo desde que o Facebook apresentou o Recoil ao mundo como seu novo biblioteca de gerenciamento padrão para aplicativos React. Embora a biblioteca ainda esteja sob a bandeira experimental para projetos de código aberto, os recursos promissores do Recoil provaram que vale a pena lançar após o lançamento.

Recentemente, o Facebook lançou duas novas versões, Recuo 0.2 e Recuo 0,3 , em rápida sucessão. As atualizações mais recentes introduziram várias correções de bugs e melhorias na experiência geral de desenvolvimento. Neste guia, destacaremos alguns dos novos recursos mais importantes.

Para relembrar como funciona o Recoil, verifique nosso introdução ao Recoil e nosso guia para criar um CRUD aplicativo .

Instantâneo

do recuo

Se você usou o Recoil antes, está familiarizado com o conceito de átomos . Um átomo é basicamente um pedaço de estado em Recoil. É representado por uma função atom () que retorna um objeto RecoilState no qual você pode gravar dados.

Como estamos usando principalmente React Hooks para tudo, o Recoil permite que você trabalhe com átomos por meio de alguns Hooks, incluindo useRecoilState () .

Um Snapshot objeto, como o próprio nome sugere, é um instantâneo imutável do estado dentro desses átomos. É improvável que você use um instantâneo em sua vida diária como programador porque o estado está mudando constantemente. No entanto, é muito útil para coisas como sincronização de estado, recursos de ferramentas de desenvolvimento, etc.

Existem basicamente três maneiras principais de obter instantâneos para um determinado estado no Recoil:

• Por meio do gancho useRecoilCallback , que permite acesso assíncrono a um Snapshot
• Por meio do gancho useRecoilSnapshot , que permite acesso síncrono a um Snapshot
• Através do gancho useRecoilTransactionObserver_UNSTABLE , que permite a assinatura de Snapshot s para qualquer mudança de estado que aconteça com o átomo

Recoil 0.3 apresenta um leve alteração de quebra para instantâneos. Agora, um objeto Snapshot só pode viver até o retorno de chamada ou o processo de renderização terminar. Se o seu código atual usar instantâneos por mais tempo do que isso, você verá algumas mensagens de aviso no console enquanto estiver no modo de desenvolvedor. No entanto, a equipe está trabalhando em uma nova API chamada preserve () para permitir seu uso por períodos mais longos. Esteja atento a esse recurso nos próximos lançamentos.

RecoilRoot ‘s override

RecoilRoot deve sempre ser o ancestral de qualquer componente que usa Ganchos de Recuo. Geralmente é adicionado ao componente raiz de um aplicativo React. No entanto, isso depende de você porque seu aplicativo também pode compartilhar vários RecoilRoot s que representam armazenamentos independentes para o estado do átomo.

Por causa dessa peculiaridade, Recoil garante que cada átomo sempre terá seus próprios valores para cada raiz a que pertence. Por exemplo:

 const container=renderElements (      
);

Nesse cenário, o comportamento permanece o mesmo para raízes aninhadas de forma que a raiz interna mascara as externas. Para evitar isso, o Recoil 0.3 introduziu uma nova propriedade para RecoilRoot chamada override .

Se um RecoilRoot interno for especificado com a propriedade override (padrão true ) definida como false , não função é executada por seu ancestral:

 const container=renderElements (      
);

O mesmo comportamento é esperado agora quando você, por exemplo, desmonta uma raiz aninhada definida com override para false. Essa ação não limpará os átomos da raiz ancestral.

Função getCallback () do novo seletor

Um seletor de Recuo é um seletor sem efeitos colaterais “Função pura” que retorna o mesmo valor para um conjunto de valores de dependência. O Recoil os usa para determinar quando as mudanças de estado acontecem e para notificar o componente que se inscreveu naquele seletor específico para que ele possa renderizar novamente de forma adequada.

Os seletores podem ser somente leitura ou graváveis, dependendo das funções fornecidas. Se você fornecer apenas um get , o seletor retornará um objeto RecoilValueReadOnly . Se houver um set , ele retornará um objeto RecoilState .

Aqui está um exemplo simples de como usar seletores com Recoil:

 const doubleSelector=selector ({ chave:'DoubleSelector', get: ({get})=> get (myAtom) * 2,
});

A lógica funciona assim: se qualquer uma das dependências do seletor for atualizada, o seletor reavalia seu método get . Em nosso exemplo, se o estado myAtom for atualizado, o método get também será atualizado porque agora temos um novo valor para a equação dupla. Simples, não é?

Às vezes, entretanto, você pode querer usar os mesmos seletores para retornar objetos com callbacks dentro deles. Digamos que você tenha um seletor que retorna um componente sempre que o ID de um item em uma lista é atualizado. O seletor detecta a mudança e aciona o método get para recalcular o modal que mostra informações relacionadas ao item.

Você pode fazer isso facilmente com a nova função getCallback () incluída no Recoil 0.3:

 const heySelector=selector ({ chave:'HeySelector', get: itemID=> ({get, getCallback})=> { const onClick=getCallback (({instantâneo})=> async ()=> { const item=await snapshot.getPromise (queryForSomethingById (itemID)); showModal (item); }); Retorna { título: `Ei, sou um componente!`, onClick, }; },
});

É muito semelhante ao que temos com useRecoilCallback () . No entanto, a função getCallback () é mais adequada para casos de uso em que você precisa acessar o estado posteriormente, como quando alguma lógica fora do contexto do componente atual precisa desse objeto para realizar uma determinada operação.

Desempenho aprimorado usando HAMT

Recoil 0.2 introduziu um aprimoramento que melhora significativamente a velocidade na qual os valores do átomo são clonados.

Hoje, o recuo usa estruturas de dados de mapa integradas para copiar e definir mapas de valores atômicos quando ocorre uma gravação. A mudança introduz o uso da implementação de hash array mapped trie (HAMT) , que lida com matrizes associativas para combinar os recursos de tabelas de hash e trie mapeada de matriz (árvores de pesquisa).

A mudança aumentou a velocidade dessas operações de gravação em 325 vezes para execuções de até mil entradas. As execuções com 10.000 entradas são incrivelmente 3.000 vezes mais rápidas.

Você pode dar uma olhada na nova implementação em GitHub .

Conclusão

As versões 0.2 e 0.3 do Recoil introduziram mudanças básicas e não separáveis. Entre eles estão melhorias na escalabilidade para consumo de tempo e memória de famílias de átomos, erros mais amigáveis ​​em vários casos de uso, melhor suporte para Safari e muito mais.

Você provavelmente pode esperar uma lista maior de mudanças substanciais quando o próximo grande lançamento é lançado e o projeto Recoil migra do estado experimental para o oficial.

A postagem O que há de novo no Recoil 0.3? apareceu primeiro no LogRocket Blog .