Recoil - gerenciamento de estados no React

Introdução

O número de bibliotecas para o React não para de crescer, e vez ou outra, algumas delas se destacam. Um bom exemplo disso é o Recoil, uma biblioteca experimental desenvolvida e utilizada pelo Facebook.

Vamos, através desse post, entender se essa comoção em torno da lib faz sentido e quais suas vantagens - e desvantagens - em relação a outras opções mais consolidadas, com o Redux e a Context API.

O que é, quem criou e por que criou?

Assim como o Redux, Recoil é uma biblioteca de gerenciamento de estado que fornece recursos que seriam díficeis de implementar usando apenas o React.

Como muitas outras libs mais recentes, ela foi construída com TypeScript e sua última versão já suporta a linguagem.

Como eu disse na introdução, ela é um produto dos engenheiros do Facebook, que já utilizam a lib internamente antes dela ser liberada para a comunidade.

Vantagens e desvantagem

As vantagens são:

• Criado pelos engenheiros do Facebook, que também são responsáveis pela criação do React.
• API livre de clichês em que o estado compartilhado tem a mesma interface get/set simples do estado local React.
• Persistir todo o estado do aplicativo de uma maneira que seja compatível com versões anteriores.
• Recoil tem um bundle menor que outras libs que gerenciam estados.
• Mais fácil de configurar que outras libs.

Desvatangem:

• Por estar em fase de experimentação, não é recomendado o seu uso em produção.

Atoms

O atom é unidade do estado, ele possui uma chave única e um valor default que pode armazenar todos os tipos disponíveis no JavaScript. Podemos usar o atom no lugar dos componentes locais.

Exemplificando, podemos criar um atom com:

const usernameState = atom({
  key: 'usernameState',
  default: ''
});

Isso é equivalente ao usar o hook useState:

const [ username, setUsername ] = useState('')

useRecoilState

Usamos essa função para acessar e manipular o atom.

function inputUserName() {
  const [username, setUsername] = useRecoilState(usernameState);
  return (
  Username: <input placeholder="Digite o username" value={username} onChange={(e) => setUsername(e.target.value)} />
  );
}

useRecoilValue

Usamos essa função quando desejamos acessar o atom.

function showUsername() {
  const username = useRecoilValue(usernameState);
  return (
    Username: <span>{username}</span>
  );
}

Seletores

Funções que permitem modificar o estado sem ter que recriá-lo:

const userNameInUpperCaseState = selector({
  key: 'userNameInUpperCaseState',
  get: ({get}) => {
    const username = get(usernameState);
    const usernameUpperCase = username.toUpperCase();

    return usernameUpperCase;
  },
});

No exemplo acima pegamos o estado de usernameState e usamos uma função para deixar o texto com letras maísculas.

Com o gettemos acesso ao atom, então podemos utilizá-lo e retornar um novo valor.

RecoilRoot

A proposta do Recoil é possuir um único RecoilRoot na raiz, que fica sobre todos os atoms da sua aplicação. O não pertence ao componentes, mas é atualizado por ele. Isso facilita que outros utilizem e modifiquem esse estado, tornando o Recoil bem escalável.

import React from 'react';
import { RecoilRoot } from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <Home />
    </RecoilRoot>
  );
}

Conclusão

Eu particularmente fiquei muito animado com essa lib, principalmente devido a sua sintaxe super simples. Em alguns momentos ela até se assemelha ao useState!

Por estar em experimentação eu não recomendaria o seu uso em um projeto de grande escala, mas vale a pena ficarmos ligados nas próximas notícias sobre o Recoil, então fique de olho aqui no Coday.

Minhas referências para esse post foram a documentação do Recoil e esse post incrível do Thiago Marinho. Se surgirem dúvidas ou sugestões, não deixem de mandar aí nos comentários!