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.


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. 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.

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:

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.

useEffect em Event Listeners

Este hook pode ser usado para adicionar um event listener ao clique de um botão:

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.

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:

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.

Emprego em Redimensionamento de Janelas

Outra forma, é a partir de event listeners para redimensionamento de janelas. Veja:

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.

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:

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.

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:

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.

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