entender o ciclo de vida do componente em react

Entendo que saber o ciclo de vida é essencial para quem quer se tornar um bom desenvolvedor pois com isso podemos otimizar as aplicações. Nesse artigo vamos conhecer e entender componentes, funções e as fases do Ciclos de Vida em React.

Os ciclos de vida têm o objetivo de destruir componentes que não estão sendo utilizados. Dessa forma, podemos garantir que os recursos serão alocados somente nos componentes em uso.

Por essa razão, cada componente possui um ciclo de vida, que vai da fase de montagem até a fase de desmontagem (destruição). E, cada fase possui métodos, que são as funções de ciclos de vida. Vamos entender cada uma.

Fases dos Ciclos de Vida em React

O ciclo de vida de um componente possui três fases:

1. Primeiramente o componente é configurado, o que chamamos de INICIALIZAÇÃO.
2. Depois acontece a MONTAGEM, que é quando o componente é renderizado pela primeira vez.
3. Em seguida, caso necessário, esse componente pode ser atualizado (ATUALIZAÇÃO).
4. E, por fim, quando por algum motivo ele precisar “sumir”, acontece a DESMONTAGEM.

Antigamente, o ciclo de vida era feito exclusivamente através da sintaxe de classe, porém com a chegada dos Hooks no React a partir da versão 16.8, agora conseguimos utilizar o hook useEffect para fazer o processo de controle do ciclo de vida de um componente.

Vamos iniciar falando sobre o componente de classe e depois vamos ver o componente funcional.

Montagem

A montagem é o “nascimento” ou a inicialização do componente. Nesse momento, o componente será montado na DOM.

É nessa fase que o componente recebe dados passados pelo componente pai, oficialmente conhecido como “props”. Além disso, é a etapa reservada para realização de chamadas HTTP para APIs, configuração do estado do componente e validação das props.

Essa etapa possui três funções:

• componentWillMount

Essa função é executada antes da montagem do componente. Isso significa que ela funciona antes mesmo do primeiro elemento ser mostrado na tela. Normalmente, as chamadas a API são colocadas aqui, além de outras coisas que precisam ser executadas inicialmente na aplicação.

Mas atenção! Após algumas atualizações, evitou-se essa função, pois seu uso indevido pode levar ao vazamento de memória. Por esse motivo, ela é considerada como insegura e futuramente será removida do React. Então, no lugar dela usaremos a componentDidMount.

• constructor

Basicamente, é a primeira coisa a ser montada no componente. Dentro dela podemos usar a função bind para fazer a correção de escopo no nosso projeto, fazendo com que o this aponte para o contexto correto. Podemos também criar estados, chamar a função super e herdar funções do Component.

• render

Por incrível que pareça, o render também é uma função de ciclo de vida, então desde sempre você brincou com isso (mesmo sem saber). Ela é responsável por fazer a montagem do componente, sendo o intermediário entre a parte da montagem e a atualização/desmontagem de um componente.

• componentDidMount

Como mencionado acima, essa é a função que substituiu a função componentWillMount. Diferente da componentWillMount, ela é executada logo após a montagem do componente na DOM. Ou seja, após a função render. Dentro dessa função, podemos realizar chamadas a API, inicializar alguma espécie de contador, além de outras coisas que devem ser executadas de forma primária.

Atualização

Essa etapa acontece depois da montagem do componente na DOM e vai adicionando ou removendo elementos a medida que o componente for recebendo algum tipo de atualização, seja através das props ou do estado.

Essa fase possui quatro funções:

• shouldComponentUpdate

Essa função será invocada caso haja alguma modificação no componente, seja nas props ou no estado. Nela podemos definir se o componente será renderizado novamente ou não. Por padrão, o componente irá renderizar novamente caso haja alguma alteração. A recomendação da documentação é que utilizemos esse comportamento.

• componentWillUpdate

Essa função será executada logo antes do componente ser renderizado, no momento em que houver uma atualização nas props ou no estado. Essa função possui uma forte relação com a função shouldComponentUpdate, pois é ela que define se o componente deve ser renderizado novamente ou não, caso ocorra uma atualização nos dados. É importante mencionar que esse método ainda é suportado na versão 17 do React, mas foi marcado como inseguro. Por essa razão a documentação oficial recomenda que seja substituída pela função componentDidUpdate.

• render

Sim, o render também faz parte da etapa de atualização, pois toda vez que um componente recebe alguma modificação, o render é o responsável direto por montá-lo novamente.

• componentDidUpdate

Ele é chamado logo após do componentDidMount, sendo excelente para checar se ocorreu alguma mudança logo de cara no estado da aplicação. Ou seja, se uma chamada a API faz alguma mudança no nosso estado, por exemplo.

Desmontagem

Chegamos na última etapa! Aqui o componente já não é mais necessário e precisa ser removido da tela. Para isso temos uma função que fará esse trabalho para nós.

• componentWillUnmount

Essa função é chamada quando o componente some da tela, impedindo que ele fique montado. Finalmente ele será “destruído”. Normalmente, é usada para alguma operação assíncrona inicializada na função componentDidMount; como, por exemplo, remover alguma inscrição de algum evento, cancelar alguma requisição HTTP, invalidar algum timer, etc.

Componente funcional com Hooks

Vejamos mais sobre o useEffect.

useEffect

O useEffect é um Hook que permite executar efeitos colaterais em seus componentes.

Alguns desses efeitos colaterais podem ser: busca de dados em uma API, atualizar diretamente o VirtualDOM e controlar temporizadores, setTimeout e setInterval.

O useEffect é utilizado para fazer o ciclo de vida de um componente em substituição às funções componentWillMount, componentDidMount, componentDidUpdate e componentWillUnmount.

As funções de ciclo de vida (componentWillMount, componentDidMount, componentDidUpdate e componentWillUnmount) não são mais utilizadas desde a atualização do React para a versão 16.8.

Sintaxe

Veja no Código 1 a sintaxe do hook useEffect.

useEffect(<função>, <array de dependência>)

Código 1. Sintaxe do useEffect

Note que o useEffect recebe como primeiro parâmetro uma função que será executada assim que o componente for renderizado.

O segundo parâmetro recebido pelo useEffect será um array de dependência, podendo ser utilizado de forma opcional.

Com o array de dependência podemos controlar quando o useEffect executará a função recebida como parâmetro. Ou seja, caso o array seja alterado de alguma forma, o useEffect executará a função.

Agora entenda melhor como funcionam as fases do ciclo de vida de um componente.

Inicialização

Esta é a primeira fase de um componente quando uma página é acessada, em que a aplicação insere seu state. Esse dado já fica acessível durante a renderização da página, como vemos no Código 2 e Figura 2.

Código 2. Inicialização do ciclo de vida de um componente

Figura 2. Inicialização

Perceba que já temos o valor do state contador instanciado e visível em tela.

Montagem

Esta é a segunda fase do ciclo de vida de um componente. Aqui veremos que o useEffect é executado uma única vez quando o componente é montado, após a primeira renderização.

Esse recurso é normalmente utilizado para fazer requisições na API quando a página é recém carregada, como mostra o Código 3 e Figura 3.

Código 3. Montagem do ciclo de vida de um componente

Figura 3. Montagem

Perceba que aqui o useEffect será executado após a primeira renderização do componente.

Atualização

Esta é a terceira fase pela qual passa nosso componente. Após a fase de montagem onde o componente foi criado, a fase de atualização entra em cena. É aqui que quando o estado do componente muda ocorre a re-renderização, como vemos no Código 4 e Figuras 4 e 5.

Código 4. Atualização do ciclo de vida de um componente

Figura 4. Atualização

Figura 5. Atualização

Perceba que a sintaxe aqui é similar da montagem, porém agora ao invés de um array vazio, colocaremos um array de dependência (contador) para que além da montagem do componente, a cada atualização do valor da dependência o useEffect chamará a função novamente e re-renderizá-las.

Desmontagem

Esta é a última fase do ciclo de vida de um componente e é responsável por fazer a limpeza do Virtual DOM. Quando precisamos desmontar um componente é ela que utilizaremos, como vemos no Código 5 e Figura 6.

Código 5. Desmontagem

Figura 6. Desmontagem

Perceba na Figura 6 que quando passamos uma função para o return do useEffect, ele executa a função quando desmontar o componente.

Para escrever esse texto, pesquisei alguns artigos interessantes sobre esse tema.

Ciclos de Vida em React - Blog Cod3r

Ciclo de vida de um componente React com o Effect Hook

Usando Effect Hook (Hook de Efeito) - React

Espero que tenha gostado. Esse tema é fundamental para desenvolver soluções de forma inteligente e tirar o máximo da tecnologia no contexto da aplicação. Deixe o seu aplauso e até o próximo artigo.