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
Top comments (1)
Gostei muito do seu artigo Marcelo, você conseguiu resumir muito bem as principais funcionalidades do
useEffecte colocou exemplos muito interessantes que exemplificam bem suas funcionalidades em uma aplicação React.