⚛Os 10 React Hooks Mais Úteis: 02 - useEffect⚛
Tags: react, javascript, webdev, beginners
Published: 2022-12-22 22:00:06


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94oqa1al2uq9k5hqtxz9.jpg)
_Este é o **segundo** artigo de uma série de 10, que explica de forma simplificada e com exemplos, os **react hooks mais utilizados** em programação._
<br>
O hook `useEffect` permite que você execute **efeitos secundários** em componentes de função em React. Isso inclui coisas como modificar o DOM, fazer solicitações HTTP ou adicionar _[event listeners](https://www.freecodecamp.org/news/javascript-addeventlistener-example-code/)_. O `useEffect` é chamado após a renderização do componente e pode ser usado para substituir a maioria dos métodos de ciclo de vida como `componentDidMount`, `componentDidUpdate` e `componentWillUnmount`.
<br>
# Empregos do hook useEffect
Aqui está um exemplo básico de como o useEffect pode ser usado para exibir uma mensagem no console quando o componente é montado:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4xlfauieiezuur6gpmy.png)

Neste exemplo, o `useEffect` é chamado após a renderização inicial do componente e exibe a mensagem no console. O array vazio de dependências garante que este efeito seja executado apenas uma vez, assim como o método `componentDidMount` em um componente de classe.
<br>
## useEffect em _Event Listeners_
Este hook pode ser usado para adicionar um _event listener_ ao clique de um botão:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl0ebuzzj2ljf2wjf2v7.png)
No caso acima, o hook `useEffect` é usado para adicionar um _event listener_ de clique ao botão quando o componente é montado. Quando o componente é desmontado, o _listener_ é removido usando a função de retorno fornecida pelo `useEffect`. O array vazio de dependências garante que este efeito seja executado apenas uma vez, assim como o `componentDidMount` em um componente de classe.
<br>
### Hook useEffect para Solicitações HTTP
Também, pode ser usado para fazer uma solicitação HTTP e atualizar o estado com a resposta. Acompanhe:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axb0yc3i0hr9o828r01f.png)
No exemplo acima, o hook `useEffect` é usado para fazer uma solicitação HTTP para a rota `/api/users` quando o componente é montado e atualizar o estado com a resposta.

O hook `useState` é usado para gerenciar o estado dos usuários no componente. O primeiro argumento é um array de usuários inicialmente vazio e o segundo é uma função para atualizar o estado.

O `useEffect` é chamado com uma função que realiza a solicitação HTTP usando o `fetch` e um array vazio de dependências. Isso garante que o efeito seja executado apenas uma vez, assim como o método `componentDidMount` em um componente de classe.

Quando a resposta é recebida, o hook `useState` é usado para atualizar o estado com a lista de usuários. Isso atualiza o componente e a lista de usuários é exibida na tela.
<br>
### Emprego em Redimensionamento de Janelas
Outra forma, é a partir de _event listeners_ para redimensionamento de janelas. Veja:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjihidve37655zfeyife.png)
Neste exemplo, o hook `useEffect` é usado para adicionar um _event listener_ de redimensionamento da janela quando o componente é montado. Quando o componente é desmontado, o _listener_ é removido usando a função de retorno fornecida pelo `useEffect`. O array vazio de dependências (`[]`) garante que este efeito seja executado apenas uma vez.
<br>
### Atualizar Título da Página com useEffect
Este hook pode ser utilizado para atualizar o título da página com o **nome do usuário atual**:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/949o6nqtd1g41xd8lwkf.png)
Desta vez, o hook `useEffect` é usado para atualizar o título da página com o nome do usuário atual sempre que o usuário for alterado. O array de dependências (`[user]`) garante que este efeito seja executado sempre que o usuário for alterado, **mas não seja executado na primeira renderização** do componente.
<br>
### Alternar Classes de Estilo Dark/Light Mode
Outra importante aplicabilidade do hook `useEffect` é na **alternância entre classes de estilo** no corpo da página com base em uma propriedade de estado:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/annxq24gtqoy9ajd5x7k.png)
Nesse caso, o hook `useEffect` é usado para adicionar ou remover a classe `dark-mode` do corpo da página com base na propriedade de estado `isDarkMode`.

O hook `useState` é usado para gerenciar o estado do modo escuro no componente. O primeiro argumento é um valor booleano inicialmente falso que indica se o modo escuro está ativado ou não e o segundo é uma função para atualizar o estado.

O `useEffect` é chamado com uma função que verifica o valor de `isDarkMode` e adiciona ou remove a classe `dark-mode` do corpo da página, e um array de dependências que inclui apenas `isDarkMode`. Isso garante que o efeito seja executado sempre que o modo escuro for alterado, mas não seja executado na primeira renderização do componente.

O componente exibe um botão com o texto "Alternar modo escuro". Quando o botão é clicado, a função de retorno do `useState` é chamada para alternar o valor de `isDarkMode` entre _true e false_, o que aciona o `useEffect` e adiciona ou remove a classe `dark-mode` do corpo da página.
<br>
# Conclusão

O `useEffect` é um dos hooks mais importantes do React e é muito útil para realizar efeitos colaterais em componentes de função. Ele é chamado após a renderização do componente e pode ser usado para substituir a maioria dos métodos de ciclo de vida.

O `useEffect` é flexível e pode ser usado para uma variedade de tarefas, incluindo **modificar o DOM**, **fazer solicitações HTTP** ou interagir com _event listeners_. Ele também pode ser usado para atualizar o estado de um componente com base em alterações externas, como mudanças no tamanho da janela ou no título da página.

É importante lembrar de **passar um array de dependências** para o `useEffect` para garantir que ele seja executado apenas quando as variáveis especificadas mudam. Isso pode ajudar a evitar efeitos colaterais indesejados e melhorar o desempenho do seu aplicativo.
Em suma, o hook `useEffect` é uma ferramenta poderosa e versátil para gerenciar efeitos colaterais em componentes de função do React e é uma parte essencial da biblioteca de hooks do React.


---
Autor: Marcelo Schäffer Petry
[marcelopetry.com](https://marcelopetry.com)