Recoil parte 1

#reactnative #react #redux #recoil

Hoje vamos abordar o básico de Recoil (https://recoiljs.org/) .

E segundo o time do Facebook(criadores): Recoil é um conjunto experimental de utilitários para gerenciamento de estado com React.

o Recoil é constituido de duas coisas: Atoms e Selectors

Atoms

Os átomos são unidades de estado, eles são atualizáveis e assináveis, o que significa que quando um átomo é atualizado, cada componente assinado é renderizado novamente com o novo valor.

import {
    atom
} from 'recoil';

export const counterAtom = atom({
    key: 'counter',
    default: 0
});

Selectors

Um seletor representa uma parte do estado derivado. Você pode pensar no estado derivado como a saída da passagem do estado para uma função pura que modifica o estado fornecido de alguma forma.

import {
    selector
} from 'recoil';

const fahrenheit = atom({
  key: "fahrenheit",
  default: 32
});

const celcius = selector({
  key: "celcius",
  get: ({ get }) => ((get(fahrenheit) - 32) * 5) / 9,
  set: ({ set }, newValue) => set(fahrenheit, (newValue * 9) / 5 + 32)
});

a propriedade get pode acessar os atoms ou outros selectors e a função pode realizar ações async e retornar o resultado para os componentes que estão observando. Se set também for fornecido, ele retornará um RecoilStateobjeto gravável.

o criador do Recoil, Dave McCabe disse em um comentário no Hacker News(https://news.ycombinator.com/item?id=23183177)

"Bem, eu sei que em uma ferramenta vimos um aumento de 20x ou mais em comparação ao uso do Redux. Isso ocorre porque o Redux é O (n) no sentido de que ele tem que perguntar a cada componente conectado se precisa renderizar novamente, enquanto recoil é O (1). "

É isso, gente. Em breve volto aqui com um tutorial prático usando Recoil :)