Índice:

React Native, o uso correto do hook useEffect

Índice:

De acordo com a documentação oficial, o hook useEffect é um hook de efeito que permite executar efeitos colaterais em componentes funcionais, mas na prática, o que isso significa e como utilizar corretamente esse hook? É o que veremos nesse artigo.

Os Hooks foram inseridos no React 16.8 e hoje praticamente não se vê mais ninguém desenvolvendo aplicações em React Native utilizando classes. Mas, ainda assim muitos devs se confundem quanto ao uso correto dos hooks, principalmente do hook useEffect, isso porque ele veio para sozinho substituir várias funções utilizadas no método de desenvolvimento anterior, ou seja, classes. 

O useEffect substitui as funções (componentDidMount, componentDidUpdate, componentWillUnmount), conhecidas como funções de ciclo de vida de um componente, responsáveis por executar determinados códigos em momentos particulares do processo. Então, embora o useEffect tenha chegado para trazer facilidade, performance e flexibilidade para o desenvolvimento de componentes funcionais, precisamos entender cada aspecto do seu funcionamento para sua completa e correta utilização.

Explicando de maneira simples o useEffect

De maneira simples, o useEffect é um hook que serve para executar um trecho de código como; chamadas a apis, configurar um subscrição e atualizações na interface em alguns momentos específicos dentro de um componente funcional, mas quais são esses momentos?

Componente montado

Assim como a função componentDidMount, o useEffect pode executar um trecho de código assim que o componente acaba de ser “montado” na sua aplicação. Mais a frente veremos exemplos disso, mas, explicando de forma simples, esse é o momento em que seu componente acaba de ser montado em tela. 

Entretanto um erro que vejo muitos devs cometendo, em relação a esse momento especificamente, é achar que ele se repete a cada vez que o componente aparece em tela. 

Vou explicar melhor o que quero dizer: imagine uma aplicação com 2 páginas apenas, Home e Perfil. O hook de efeito vai considerar esse momento “didMount” apenas no primeiro carregamento de cada página, e não toda vez que a página em questão estiver em foco na sua aplicação.

Componente foi atualizado

Assim como na função componentDidUpdate, o useEffect pode executar um trecho de código toda vez que o state do seu componente sofre alguma atualização. Diferente de variáveis comuns, as variáveis de estado no React são setadas de forma assíncrona e por isso é importante observar seu estado atual antes de executar qualquer outra ação que dependa dessa variável. 

Nesse caso, o useEffect é utilizado para monitorar o valor ou estado atual de uma variável de estado e, assim, executar algum trecho de código quando perceber mudanças no valor ou estado dessa variável.

Componente vai ser desmontado

Assim como na função componentWillUnmount, o useEffect pode executar um trecho de código quando perceber que o componente vai ser desmontado, ou seja encerrado. Isso é útil principalmente para resetar variáveis ou promover o cancelamento de uma subscrição.

Como utilizar na prática

O hook useEffect é uma função que recebe dois parâmetros. O primeiro parâmetro é a função a ser executada e o segundo parâmetro, que é opcional, é um array de dependências, que é onde definimos variáveis a serem observadas pelo useEffect. Nesse caso ele só executa a função passada como primeiro parâmetro se uma ou mais dessas variáveis sofrerem alguma alteração.

Para o primeiro momento, ou seja, assim que o componente é montado, o useEffect não precisa do segundo parâmetro, podendo esse ser omitido ou passado um array vazio como podemos ver na imagem abaixo.

Breve explicação do hook useEffect.

Um bom exemplo de função a ser executada nesse primeiro momento, assim que o componente é montado, seria uma página de notificações no seu aplicativo onde cada notificação é um componente separado. Assim que o usuário abrir essa página, você precisa alterar o status da notificação para “lida”, modificando alguma estilização como background color ou algo parecido. 

Breve explicação do hook useEffect.

O segundo tipo de uso do hook useEffect seria para executar um trecho de código baseado na alteração de alguma variável de estado da aplicação. Um exemplo de uso comum seria uma lista de usuários com um filtro de busca, onde a cada vez que o termo de busca é alterado é preciso filtrar a busca novamente.

Breve explicação do hook useEffect.

Se quiser ver um exemplo funcional de um componente de listagem com um filtro, assista esse vídeo sobre o assunto no meu canal.

O terceiro tipo de uso do hook useEffect é o menos comum, mas de grande importância. É nesse tipo de uso que você tem a possibilidade de executar um trecho de código no momento que o componente será “desmontado”, o que é muito útil quando você está trabalhando com listeners ou timers. 

Por exemplo, quando você configura um listener para executar uma função específica no seu componente para quando o usuário apertar o botão de “voltar” no celular, a função padrão dele é voltar à página anterior ou fechar a aplicação em caso de já estar na página inicial. Mas, você pode configurá-lo para uma ação diferente, como desfazer alguma ação executada ou fechar um modal. 

Nesse caso, você implementa um listener que observa se o usuário apertou esse botão e executa uma ação. O problema é, quando o usuário sair do seu componente, você precisar cancelar esse listener para que ele não tenha efeito em outros componentes

Outro exemplo é com a utilização de timers como setTimeout ou setInterval. Se você não limpar os temporizadores ao encerrar seu componente, corre o risco de criar vários temporizadores e deixar sua aplicação com um comportamento imprevisível. Para esses casos, você utiliza um return, retornando uma função dentro da função executada no useEffect, o return do useEffect só será executado uma vez quando o componente for encerrado.

Breve explicação do hook useEffect.

Fique atento!

Outro erro que vejo diversos devs cometendo, é a utilização do hook useEffect para setar uma variável de estado e deixar essa própria variável como dependência no useEffect, causando um loop infinito da aplicação. Você até pode utilizar dessa forma se for algo intencional, como por exemplo um cronômetro.

Observe que nesse caso, eu propositalmente utilizei a variável counter como dependência no useEffect. Assim, a cada vez que ela se atualizar, ele ativa o hook novamente resetando o temporizador.

Mas, lembre-se que na grande maioria das vezes essa prática não seria a correta na utilização do useEffect a fim de evitar problemas de loop infinito na sua aplicação.

Publicado por:
Compartilhe:

Posts relacionados

Estimativas de projetos de software

Quando falamos em gestão de um time de engenharia de software, os principais desafios que vem à cabeça são como estimar as atividades, e como lidar com as expectativas dos

Introdução ao Shape-up

Se você trabalha na área de engenharia de software, e se interessa por gestão de projetos, com certeza já deve ter ouvido falar na metodologia Shape-up ou no produto desenvolvido

Métricas e Estimativas de Software

No desenvolvimento ágil, métricas e estimativas de software são fundamentais para medir o desempenho e estimar o tempo necessário para concluir projetos de forma eficiente.Nesse artigo vou trazer um panorama