Introdução aos React Hooks — parte 1/3

Todos componentes do React são simplesmente funções. Alguns são criados com classes, mais conhecidos como stateful e/ou class components, e os outros são criados apenas com funções, também conhecidos como stateless e/ou functional components.

Além de terem sintaxes diferentes, os stateful components possuem algumas funcionalidades a mais, como state, lifecicles, constructor, this e etc, enquanto os stateless components sempre foram mais usados para criarem ‘dumbs components’, apenas pra exibição, sem muita lógica envolvida.

Mas isso está perto de mudar com a chegada dos React Hooks, que é uma nova proposta para facilitar e tornar mais flexível o desenvolvimento com o React, diminuindo a diferença entre os stateful e stateless components.

A primeira parte desse artigo se destina a explicar o conceito dos hooks e demostrar o uso de alguns deles, como;

  • useState
  • useEffect
  • useLayoutEffect
  • useReducer

O que são React Hooks

Resumindo: React Hooks são alguns métodos que dão mais poder para seus stateless components, como states próprios e independentes, alguns lifecicles, subscription, compartilhamento de lógica, reducers e etc, como mágica.

Mas dando um passo pra trás para você entender qual problema ele resolve, quando aprendemos a desenvolver com o React, nós entendemos como os componentes e seu fluxo de dados em cascata, de cima pra baixo, nos ajuda a organizar grandes telas em pequenas, independentes e reutilizáveis partes. Porém, nós não podemos podemos quebrar a complexidade dos componentes quando sua lógica depende de States e lifecicles. Simplesmente não podemos abstrair isso para uma função ou outro componente.

Esse é o caso mais comum, mas também existem animações, tratamento de formulário, consulta de uma API externa, etc. Quando tentamos resolver esses problemas, geralmente acabamos com:

  • Grandes componentes, difíceis de testar e manter.
  • Lógicas duplicadas entre componentes e lifecicles.
  • Complexos padrões como render props e higher-order-component.

É exatamente com isso que os React Hooks podem te ajudar. A quantidade de conceitos que você precisa para criar suas aplicações irão diminuir, sendo possível usar apenas funções ao invés de intercalar entre funções, stateful components, higher-order-components e render props.

Como usar os React Hooks hoje

Antes de mais nada, precisamos garantir que temos as versão 16.7.0-alpha do React e React Dom. No seu projeto atual com React, execute o comando a baixo no terminal.

npm i react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0

Pronto, agora já podemos utilizar os React Hooks.

useState

A função mais básica dos React Hooks é o useState. Com ele você pode adicionar states em um functional stateless component (Não sei nem sei continuaram usando esse nome agora). O método useState recebe um parâmetro, que é o valor inicial do State, e devolve duas propriedades num array, o primeiro é o State em si e o segundo é o método utilizado para atualiza-lo.

useEffects

O método useEffects é sempre chamado quando o componente é montado e atualizado. Com ele você pode substituir os lifecicles componentDidMount, componentDidUpdate e componentWillUnmount. Ele executa a função que estiver dentro dele e tem um segundo parâmetro, opcional, que é um array de propriedades a serem observadas dentro do escopo do stateless component. Sempre que alguma delas é atualizada, a função é executada novamente.

Para executa-la apenas uma vez, coloque um array vazio.

Retornando uma função, ela é executada sempre quando o componente é desmontado.

useLayoutEffect

O método useLayoutEffect é idêntico ao useEffect porém funciona de forma síncrona, ele é executado sempre depois que o navegador terminar o paint do componente na tela. Você pode utilizá-lo para ler uma propriedade do DOM, mas se possível, prefira usar o useEffect para evitar de bloquear alterações visuais na tela.

useReducer

O hook useReducer é um pouco mais complexo pra explicar mas funciona exatamente igual ao reducer do Redux, com um state, swtich, dispatch, type. Caso você já tenha utilizado o Redux, irá se familiarizar. Veja no exemplo a baixo.

Algumas observações

  • React Hooks ainda está na versão alpha (v16.7.0-alpha) e o time de desenvolvimento espera leva-lo para a versão estável 16.7 do React, depois dos feedbacks da comunidade.
  • O uso deles são opcionais. Você pode utiliza-los ou não. Não há planos para remover as classes no React.
  • Não houve nenhum breaking-change, seu código antigo continuará funcionando e você não precisará re-aprender como programar com React.

Demo

Você pode ver o caso de estudo que eu fiz usando React Hooks aqui e consultar o código nesse repositório.

Essa foi a primeira parte da introdução aos React Hooks, nas próximas eu irei falar mais sobre os outros métodos e conceitos, como;

  • useContext.
  • useCallback.
  • useImperativeMethods.
  • useMemo.
  • useRef.
  • Regras dos hooks.
  • Criando seu próprio hook.
  • TDD com React Hooks.

Até a próxima!

Referências