Primeiros passos com React Hooks — useEffect.
Nessa série de artigos vamos falar sobre os novos hooks disponibilizados na versão 16.8 do React.
No primeiro artigo da série falamos sobre o hook useState, como usar e os cuidados que devemos ter. Conhecemos também um pouco de como ele funciona dentro do React.
Hoje o assunto é useEffect !
Introdução
Para quem já trabalha com React há algum tempo e conhece todos os ciclos de vida do componente, se enganar na hora de implementar o hook useEffect é quase certo.
Temos que ter em mente que useEffect não se “encaixa” a um método de ciclo de vida do componente, ele será executado quando seu componente renderizar e se quisermos mudar esse comportamento precisamos entender o segundo parâmetro (“deps”) da function useEffect ( useEffect(, []) < — ) , isso será primordial para trabalharmos com efeitos de renderização.
Comparacões
Para quem ainda não foi apresentado para o lifecycle dos componentes React, essa imagem resume bem :
Entender os ciclos de vida do componente é importantíssimo quando estamos implementando nossos classComponent.
Quando falamos de functionComponent e useEffect temos que ter em mente que esses componentes nada mais são do que functions (simplificando bem) que o React “executará” para renderizar seu componente.
Vamos incrementar nosso componente de login do primeiro artigo imaginando alguma situação hipotética.
Vamos imaginar que nosso componente de login vai receber em props uma propriedade userId que poderá ou não vir preenchida. Caso ela venha preenchida, vamos fazer um fetch na api de usuários (api fake) para trazer alguns dados do usuário para apresentação.
Pensando em um classComponent nosso componente ficaria mais ou menos assim:
Como precisamos fazer um fetch na api de usuários usamos o método de ciclo de vida componentDidMount que irá checar se userId foi passado, caso seja, faremos um fetch na api e atualizaremos o state user com os dados do usuário para apresentação.
O método userDescriptionRender ficará responsável por renderizar a descrição caso o user seja encontrado.
Agora vamos fazer a mesma implementação usando o useEffect.
Vamos olhar para esse component:
Line 3: Vamos fazer um destructuring para pegar o userId das props do nosso componente de login.
Line 6: Definimos um novo state chamado user que será responsável por guardar os dados do usuário.
Line 8: Definimos o nosso efeito (useEffect) que vai receber dois parâmetros;
Primeiro parâmetro: O primeiro parâmetro que useEffect espera é a função que irá executar o efeito de renderização.
Segundo parâmetro: O segundo parâmetro que useEffect espera é um array (opcional) com as dependências externas que aquele efeito de renderização “olhará” antes de ser executado. Mais o que isso quer dizer ?
No nosso exemplo passamos o userId como dependência do efeito de renderização, isso significa que estamos falando para o nosso efeito que ele só precisa ser “reexecutado” caso userId mudar.
Entender a dependência do seu efeito é importantíssimo, isso vai te ajudar a não cometer erros quando usar o useEffect.
Para te ajudar a não cometer erros com suas dependências você pode usar essa regra do lint, isso vai te mostrar quais “deps ” externas seu efeito de renderização precisa.
Se o efeito que você está implementação tem muitas dependências externas ou dependências que mudam com frequência isso pode causar problemas, talvez seja a hora de você pensar em um redutor (useReducer). Isso irá te ajudar a desacoplar a lógica de “ações” do seu componente de como o state é atualizado.
Nem tudo são flores …
No começo é normal ter problemas na hora de usar useEffect, você pode se perguntar;
Porque estou vendo props/states antigos dentro do meu efeito ?
Posso especificar uma função como dependência do meu efeito ?
Devo colocar todas as funções que usamos no efeito dentro do efeito ?
O segredo é nunca mentir para suas “deps” e em casos mais complexos usar um redutor useReducer ou useCallback para garantir que você não está levando toda sua lógica para dentro do seu efeito.
Existe um faq muito legal que o pessoal do React criou sobre os hooks, lá você consegue tirar todas as duvidas.
Outra leitura que recomendo bastante é o artigo do Dan Abramov que faz um guia completo sobre useEffect e também a documentação oficial hooks-effect.
Conclusão
É importante ter em mente que useEffect não se equipara há um ou mais métodos de ciclo de vida do componente, ele é uma função que faz parte do escopo do seu componente e será “executado” sempre que o componente renderizar.
Combinar o uso de useReducer e useCallback com useEffect é importante para ter efeitos com baixo acoplamento e com as “deps” de forma correta.
No próximo artigo da série vamos falar um pouco sobre useReducer.
Referencias:
hooks-effect: https://reactjs.org/docs/hooks-effect.html
hooks-faq: https://reactjs.org/docs/hooks-faq.html
eslint-plugin-react-hooks: https://github.com/facebook/react/issues/14920
A Complete Guide to useEffect: https://overreacted.io/a-complete-guide-to-useeffect/
