⚛ React Lifecycle 🔃
Tags: react, webdev, javascript, reactnative
Published: 2022-12-30 00:46:28

O conhecimento sobre o ciclo de vida (ou _lifecycle_) de um componente React é **frequentemente solicitado em entrevistas** de emprego para desenvolvedores, pois é um conceito fundamental para entender como o React funciona e como otimizar o desempenho de um aplicativo.

Os métodos do ciclo de vida permitem que você execute código em **momentos específicos** durante o processo de renderização de um componente, como antes de ele ser **montado**, **atualizado** ou **desmontado**. Isso é importante para garantir que o componente se comporte da forma esperada e para **evitar atualizações desnecessárias**, o que pode ajudar a melhorar o desempenho do aplicativo.

Além disso, os métodos do ciclo de vida também permitem que você interaja com outros sistemas, como o DOM ou APIs externas, de forma mais eficiente, pois você pode controlar quando essas interações acontecem.

![3 Estágios React Lifecycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/busuhuzo09rqdrd375ro.png)

_Interaja com esse diagrama [aqui](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)_

Abaixo veremos os três estágios do ciclo de vida de um componente em React: **(1)montagem**, **(2)atualização** e **(3)desmontagem**.

---

## 1. Montagem

O estágio de montagem é a primeira fase do ciclo de vida de um componente em React. Ele **começa quando o componente é criado** e **termina quando o componente é inserido na árvore de componentes**.

Durante o estágio de montagem, o componente passa pelos seguintes métodos do ciclo de vida:
<br>
## 1.1 constructor( )

O método `constructor` é um método especial em uma classe em JavaScript que é chamado quando uma nova instância da classe é criada. No React, o método `constructor` é **chamado quando um componente é criado**.

A sintaxe do método `constructor` é a seguinte:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f75geoi4o9pv2lm9nmog.png)

O método `constructor` recebe um parâmetro `props`, que é um objeto que contém as propriedades enviadas para o componente.

O método `constructor` é utilizado para inicializar o estado do componente e para vincular métodos de instância ao próprio componente. Por exemplo, você pode utilizar o método `constructor` para definir o estado inicial de um componente ou para vincular um método de instância ao evento `onClick` de um botão.

Aqui está um exemplo de como o método `constructor` pode ser utilizado em um componente React `(Files>src>App.jsx)`:

{% embed https://replit.com/@MarceloPetry/constructor?v=1 %}

Neste exemplo, o método `constructor` é utilizado para inicializar o estado `count` com o valor `0` e para vincular o método `handleClick` ao evento `onClick` do botão. Quando o botão é clicado, o método `handleClick` é
chamado e atualiza o estado do componente, fazendo com que o componente seja renderizado novamente com o novo valor do estado `count`.
<br>
##1.2 render( )

> _O método render() é o único método obrigatório em um class-component. (reactjs.org)_

O método `render` é um dos métodos mais importantes do ciclo de vida de um componente em React, pois é nele que o componente é renderizado na tela. Quando o método render é chamado, **o componente gera o HTML** que será exibido para o usuário e **o envia para o DOM** para ser renderizado.

A sintaxe do método `render` é a seguinte:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tc3apr4ludlbo3bsemw1.png)

O método `render` deve sempre retornar um único elemento React, que pode ser um elemento HTML ou outro componente. 
Aqui está um exemplo de um componente em React que utiliza o método `render` para gerar o HTML que será renderizado:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/render?v=1 %}

Neste exemplo, o componente `MyComponent` tem um estado chamado `name`, que é inicializado com o valor "John" no método `constructor`. O método `render` é então chamado para gerar o HTML que será renderizado pelo componente. No caso, o método `render` retorna um elemento `div` que contém um título e um parágrafo, ambos utilizando o valor do estado name para exibir o nome do usuário.

Quando o componente é renderizado, o HTML gerado pelo método render será exibido para o usuário, como mostrado abaixo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtnv2ew7wpq2yqagyss1.png)
<br>

## 1.3 componentDidMount( )

O método `componentDidMount()` é um método do ciclo de vida de um componente em React que é chamado imediatamente após um componente ser montado (inserido na árvore de componentes). Ele é chamado apenas uma vez na vida de um componente e é a primeira oportunidade que o componente tem de interagir com o DOM e outros sistemas.

A sintaxe do método `componentDidMount` é a seguinte:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmze52gv24rg4sinj48p.png)

O método `componentDidMount` é chamado imediatamente após o método `render` do componente.

Ele é útil para realizar operações que precisam ser executadas **após o componente ser renderizado**, como **fazer solicitações HTTP**, **configurar eventos de DOM** ou **iniciar animações**.

Por exemplo, você pode utilizar o método `componentDidMount` para fazer uma solicitação HTTP para obter os dados de um servidor e atualizar o estado do componente com os dados retornados.

Aqui está um exemplo de como esse método pode ser utilizado em um componente React:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/componentDidMount#src/App.jsx %}

No código acima, o componente `MyComponent` é criado usando a classe `React.Component` do React. Ele possui um construtor que inicializa o estado inicial do componente com um objeto vazio chamado `data`.

O método `componentDidMount` é chamado imediatamente após o método `render` do componente. Isso significa que, quando o método `componentDidMount` é chamado, o componente já foi renderizado e inserido na árvore de componentes.

No método `componentDidMount`, uma solicitação HTTP é feita para a API da CoinGecko para obter os dados do Bitcoin. Quando a resposta é recebida, o método `then` é chamado com a resposta e o método `json` é usado para converter a resposta em um objeto JavaScript. Em seguida, o método
`setState` é chamado para atualizar o estado do componente com os dados retornados pela API.

O método `render` é chamado para renderizar o componente com o preço atual do Bitcoin em dólares. Se o estado `data` do componente tiver um valor, o preço atual do Bitcoin é exibido. Se o estado `data` for nulo, a mensagem
"Loading..." é exibida.

---

## 2. Atualização

O estágio de atualização do ciclo de vida de um componente em React ocorre quando o componente é **atualizado com novas propriedades ou estado**.


Durante o estágio de **atualização**, o componente passa pelos seguintes **métodos do ciclo de vida**:
<br>
## 2.1 render( )
O mesmo método `render` do estágio de montagem é chamado quando o componente é atualizado com **novas propriedades** ou **estado**.

Aqui está um exemplo de um componente em React que usa o esse método para refletir as alterações na interface do usuário:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/render-method?v=1 %}

Neste exemplo, o componente `MyComponent` tem um estado chamado `age`, que é inicializado com a propriedade `initialAge` passada como propriedade para o componente. Ele também tem um método `handleAgeClick`, que é chamado quando o usuário clica no botão "Adicionar ano". Quando o método é chamado, ele atualiza o estado `age` do componente com o valor atual da idade mais um.

O método `componentDidUpdate` é chamado sempre que o componente é atualizado, o que ocorre quando o componente é renderizado pela primeira vez ou quando ocorre uma mudança nas propriedades ou estado do componente. Neste caso, o método é usado para imprimir uma mensagem no console quando a propriedade name ou o estado age do componente são alterados.

Por fim, o método `render` é chamado para renderizar o componente com as novas propriedades ou estado. Ele retorna um elemento `div` que exibe o nome e a idade do componente, bem como um botão que, quando clicado, aumenta a idade do componente em um ano.
<br>
## 2.2 componentDidUpdate( )

O método `componentDidUpdate` é um método do ciclo de vida de um componente em React que é chamado imediatamente após o método `render` quando o componente é atualizado, ou seja, quando há uma **mudança nas propriedades ou estado do componente**.

Esse método é útil para realizar operações que precisam ser executadas após o componente ser atualizado, como fazer **solicitações HTTP**, **atualizar o DOM** de forma eficiente, etc.

Esse método é chamado com dois parâmetros: os **valores das propriedades** e **estado do componente antes da atualização** (`prevProps` e `prevState`) e o objeto `snapshot`, que é um valor opcional que pode ser passado pelo método `getSnapshotBeforeUpdate`.

Aqui está um exemplo de um componente em React que usa o método `componentDidUpdate` para atualizar o gráfico de um dashboard quando os dados são alterados:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/componentDidUpdate?v=1 %}

No código acima, o método `componentDidUpdate` é chamado sempre que o componente é atualizado.

Ao método `componentDidUpdate` são passados dois parâmetros: `prevProps` e `prevState`, que são as propriedades e o estado do componente imediatamente antes da atualização. Isso permite que o componente compare as propriedades e o estado atuais com os valores anteriores e, se necessário, execute alguma ação.

No caso do código acima, o método `componentDidUpdate` é utilizado para verificar se a propriedade data do componente foi alterada. Se a propriedade data for diferente da propriedade data do componente anterior `(prevProps.data !== this.props.data)`, o método `updateChart` é chamado.

Em suma, o método `componentDidUpdate` é usado no código acima para detectar alterações nas propriedades do componente e, quando isso ocorre, chamar o método `updateChart` para atualizar o gráfico com os novos dados.

---

## 3. Desmontagem: componentWillUnmount( )

O estágio de desmontagem é o último estágio do ciclo de vida de um componente em React. Ele ocorre quando o componente **é removido da árvore** de componentes.

Atualmente, o React tem apenas um método interno que é chamado quando um componente é desmontado: `componentWillUnmount`

O método `componentWillUnmount` é chamado imediatamente antes de um componente ser desmontado e destruído. Ele é usado para **limpar qualquer lógica ou recursos** que o componente possa ter usado durante o seu ciclo de vida. Alguns exemplos comuns de uso do `componentWillUnmount` incluem:

- Desinscrever-se de eventos de mouse ou teclado;
- Cancelar solicitações HTTP pendentes;
- Remover elementos de DOM criados durante o ciclo de vida do componente;
- Limpar temporizadores ou intervalos de tempo criados pelo componente.

Abaixo, temos um caso comum de uso do `componentWillUnmount` para cancelar _event listeners_ ou outras operações assíncronas que foram iniciadas no `componentDidMount`:
_`(Acompanhe em "Show files>src>App.jsx")`_
{% embed https://replit.com/@MarceloPetry/componentWillUnmount#src/App.jsx %}

No exemplo acima, o método `componentWillUnmount` é usado para cancelar um intervalo de tempo criado pelo método `setInterval`. Quando o componente é desmontado, o intervalo é cancelado, evitando que ele continue a ser executado e consumindo recursos desnecessariamente.

É importante lembrar de que o método `componentWillUnmount` é chamado apenas uma vez, imediatamente antes do componente ser destruído, portanto não é possível atualizar o estado do componente neste método. Além disso, não é possível usar o `setState` neste método, pois o componente já está prestes a ser destruído e não será renderizado novamente.

---

[marcelopetry.com](https://marcelopetry.com)