Este o segundo artigo de uma srie de 10, que explica de forma simplificada e com exemplos, os react hooks mais utilizados em programao.


O hook useEffect permite que voc execute efeitos secundrios em componentes de funo em React. Isso inclui coisas como modificar o DOM, fazer solicitaes HTTP ou adicionar event listeners. O useEffect chamado aps a renderizao do componente e pode ser usado para substituir a maioria dos mtodos de ciclo de vida como componentDidMount, componentDidUpdate e componentWillUnmount.

Empregos do hook useEffect

Aqui est um exemplo bsico de como o useEffect pode ser usado para exibir uma mensagem no console quando o componente montado:

Neste exemplo, o useEffect chamado aps a renderizao inicial do componente e exibe a mensagem no console. O array vazio de dependncias garante que este efeito seja executado apenas uma vez, assim como o mtodo componentDidMount em um componente de classe.

useEffect em Event Listeners

Este hook pode ser usado para adicionar um event listener ao clique de um boto:

No caso acima, o hook useEffect usado para adicionar um event listener de clique ao boto quando o componente montado. Quando o componente desmontado, o listener removido usando a funo de retorno fornecida pelo useEffect. O array vazio de dependncias garante que este efeito seja executado apenas uma vez, assim como o componentDidMount em um componente de classe.

Hook useEffect para Solicitaes HTTP

Tambm, pode ser usado para fazer uma solicitao HTTP e atualizar o estado com a resposta. Acompanhe:

No exemplo acima, o hook useEffect usado para fazer uma solicitao 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 usurios no componente. O primeiro argumento um array de usurios inicialmente vazio e o segundo uma funo para atualizar o estado.

O useEffect chamado com uma funo que realiza a solicitao HTTP usando o fetch e um array vazio de dependncias. Isso garante que o efeito seja executado apenas uma vez, assim como o mtodo componentDidMount em um componente de classe.

Quando a resposta recebida, o hook useState usado para atualizar o estado com a lista de usurios. Isso atualiza o componente e a lista de usurios 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 funo de retorno fornecida pelo useEffect. O array vazio de dependncias ([]) garante que este efeito seja executado apenas uma vez.

Atualizar Ttulo da Pgina com useEffect

Este hook pode ser utilizado para atualizar o ttulo da pgina com o nome do usurio atual:

Desta vez, o hook useEffect usado para atualizar o ttulo da pgina com o nome do usurio atual sempre que o usurio for alterado. O array de dependncias ([user]) garante que este efeito seja executado sempre que o usurio for alterado, mas no seja executado na primeira renderizao do componente.

Alternar Classes de Estilo Dark/Light Mode

Outra importante aplicabilidade do hook useEffect e na alternncia entre classes de estilo no corpo da pgina com base em uma propriedade de estado:

Nesse caso, o hook useEffect usado para adicionar ou remover a classe dark-mode do corpo da pgina 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 no e o segundo uma funo para atualizar o estado.

O useEffect chamado com uma funo que verifica o valor de isDarkMode e adiciona ou remove a classe dark-mode do corpo da pgina, e um array de dependncias que inclui apenas isDarkMode. Isso garante que o efeito seja executado sempre que o modo escuro for alterado, mas no seja executado na primeira renderizao do componente.

O componente exibe um boto com o texto "Alternar modo escuro". Quando o boto clicado, a funo 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 pgina.

Concluso

O useEffect um dos hooks mais importantes do React e muito til para realizar efeitos colaterais em componentes de funo. Ele chamado aps a renderizao do componente e pode ser usado para substituir a maioria dos mtodos de ciclo de vida.

O useEffect flexvel e pode ser usado para uma variedade de tarefas, incluindo modificar o DOM, fazer solicitaes HTTP ou interagir com event listeners. Ele tambm pode ser usado para atualizar o estado de um componente com base em alteraes externas, como mudanas no tamanho da janela ou no ttulo da pgina.

importante lembrar de passar um array de dependncias para o useEffect para garantir que ele seja executado apenas quando as variveis 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 verstil para gerenciar efeitos colaterais em componentes de funo do React e uma parte essencial da biblioteca de hooks do React.

Autor: Marcelo Schffer Petry
marcelopetry.com