Gerenciando o state do React como se fosse um Átomo

por | out 5, 2021 | Front-End

No universo do React, temos diversas libs, Context API e o próprio useState, que são uma mão na roda na hora de gerenciarmos o estado no React.

Porém existem algumas libs como Jotai e Recoil que têm uma abordagem diferente. Nelas é possível gerenciar o estado de uma forma simples através de átomos, facilitando o acesso e composição de estados (nesse casso de átomos).

Motivos para usar Jotai ou Recoil

  • Facilidade em acessar e modificar um estado que pode ser global ou não;
  • Flexibilidade para combinar estados(átomos);
  • Minimalismo e adaptação com as novas features do React (Ex: Suspense);
  • Integração com Redux DevTools, porém com a limitação de debugar um átomo por vez.


Utilizando Jotai

Preferi nesses exemplos utilizar o Jotai, pois ele tem uma implementação mais simplista que o Recoil.dd the necessary resource in the time and stage that requires it.


Instalando

No projeto em react basta adicionar o pacote do Jotai (a lib já está implementada em TypeScript).
yarn add jotai react


EXEMPLOS
Utilizando e compondo átomos

Neste exemplo vemos um contador e também de como podemos fazer uma composição entre átomos na função addMoreFive.


Derived Async Atoms

Também podemos criar átomos que quando invocados executam funções assíncronas, átomos que tem esse tipo de implementação são chamados de Derived Async Atoms.


Compartilhando o estado entre componentes

No exemplo abaixo podemos ver o quão fácil é compartilhar e alterar um átomo entre diversos componentes.

Dennis – Desenvolvedor Front-End Sênior na NTConsult

Sobre o autor: Dennis programa há mais de dez anos e atua como desenvolvedor no mercado de trabalho há 8 anos. Atualmente está mais focado em front-end, mas gosta de quase tudo que envolva programação.

To share

Related Posts