Ciclos de vida é um conceito essencial para quem quer se aventurar no mundo do React, 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.

Conceito

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. Montagem
  2. Atualização
  3. Desmontagem

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.

Agora você já sabe identificar as principais etapas dos ciclos de vida em React, além de saber quais funções são responsáveis por cada etapa.

Bons estudos!

Referências