Fala, pessoal. Tudo bem? Hoje eu vou falar um pouco sobre um hook do React chamado useEffect. Ele é uma mão na roda para várias ocasiões em projetos React. Além disso, vou dar uma visão geral do que é e os motivos de se usar.
O que são hooks?
Primeiramente, o que são os hooks? Eles chegaram no React, a partir da sua versão 16.8. Sua principal função é resolver uma variedade de problemas que os próprios desenvolvedores do React estavam tendo. Alguns do problemas que eles resolvem são:
- Reutilização de código;
- Componentes contendo grandes responsabilidades;
- Problemas ao utilizar classes.
Os hooks só se tornaram possíveis quando o React decidiu que era mais viável usar componentes funcionais, pois componentes baseados em classes se torna praticamente inviável a reutilização de seus códigos.
Além disso, a curva de aprendizado para se usar componentes baseados em classes também aumenta, se levarmos em consideração que para usar componentes em classes, é necessário entendimento em ‘this’ no Javascript. O mesmo se comporta diferente em outras linguagens.
Existem hooks que o próprio React já monta por padrão, deixando o uso fácil, bastando apenas a importação deles. Por outro lado, você mesmo pode fazer seus hooks personalizados, para sua aplicação em específico.
O que é o useEffect?
O useEffect é um hook do React. Ele permite você execute efeitos colaterais no seu código. Mas o que seriam esses efeitos colaterais? Buscar dados de uma API, mudar a DOM, ou configurar uma subscription, por exemplo, são algumas opções de efeitos colaterais no seu código.
Na sua declaração, ele vai receber dois parâmetros, que funcionam assim: useEffect(<Função>, <Dependência>).
Segundo a própria documentação do React, se você está familiarizado com o React há um tempo, você pode pensar nesse hook como se fosse o ‘componentDidMount’, ‘componentDidUpdate’ e ‘componentWillUnmount’ combinados.
Exemplo utilizando o useEffect
Por fim, no trecho de código abaixo você vai ver o useEffect usado para mudar o título de uma página usando como base o estado da variável ‘count’. Note que, como dependência, o useEffect vai utilizar o ‘count’ justamente porque o ‘document.title’ precisa ser executado novamente toda vez que o ‘count’ mudar de estado. Portanto, se não houvesse dependência, a função seria executada somente uma vez ao renderizar o componente.
Conclusão
Sendo assim, podemos concluir que o useEffect pode ser usado de várias formas e em diferentes ocasiões, desde renderizar apenas uma vez um componente até consumo de dados vindos de uma API. O useEffect vai proporcionar muita flexibilidade ao seu projeto, basta definir com cuidado suas dependências.
Por hoje é isso, pessoal. Gostou do artigo? Então compartilha com aquela pessoa que você sabe que também está estudando useEffect, ou tem dúvida sobre ele. Muito obrigado e até a próxima!
