React Lifecycle

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 mtodos do ciclo de vida permitem que voc execute cdigo em momentos especficos durante o processo de renderizao 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 atualizaes desnecessrias, o que pode ajudar a melhorar o desempenho do aplicativo.

Alm disso, os mtodos do ciclo de vida tambm permitem que voc interaja com outros sistemas, como o DOM ou APIs externas, de forma mais eficiente, pois voc pode controlar quando essas interaes acontecem.

Interaja com esse diagrama aqui

Abaixo veremos os trs estgios do ciclo de vida de um componente em React: (1)montagem, (2)atualizao e (3)desmontagem.

1. Montagem

O estgio de montagem a primeira fase do ciclo de vida de um componente em React. Ele comea quando o componente criado e termina quando o componente inserido na rvore de componentes.

Durante o estgio de montagem, o componente passa pelos seguintes mtodos do ciclo de vida:

1.1 constructor()

O mtodo constructor um mtodo especial em uma classe em JavaScript que chamado quando uma nova instncia da classe criada. No React, o mtodo constructor chamado quando um componente criado.

A sintaxe do mtodo constructor a seguinte:

O mtodo constructor recebe um parmetro props, que um objeto que contm as propriedades enviadas para o componente.

O mtodo constructor utilizado para inicializar o estado do componente e para vincular mtodos de instncia ao prprio componente. Por exemplo, voc pode utilizar o mtodo constructor para definir o estado inicial de um componente ou para vincular um mtodo de instncia ao evento onClick de um boto.

Aqui est um exemplo de como o mtodo constructor pode ser utilizado em um componente React (Files>src>App.jsx):

Neste exemplo, o mtodo constructor utilizado para inicializar o estado count com o valor 0 e para vincular o mtodo handleClick ao evento onClick do boto. Quando o boto clicado, o mtodo handleClick
chamado e atualiza o estado do componente, fazendo com que o componente seja renderizado novamente com o novo valor do estado count.

1.2 render()

O mtodo render() o nico mtodo obrigatrio em um class-component. (reactjs.org)

O mtodo render um dos mtodos mais importantes do ciclo de vida de um componente em React, pois nele que o componente renderizado na tela. Quando o mtodo render chamado, o componente gera o HTML que ser exibido para o usurio e o envia para o DOM para ser renderizado.

A sintaxe do mtodo render a seguinte:

O mtodo 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 mtodo render para gerar o HTML que ser renderizado:
(Acompanhe em "Show files>src>App.jsx")

Neste exemplo, o componente MyComponent tem um estado chamado name, que inicializado com o valor "John" no mtodo constructor. O mtodo render ento chamado para gerar o HTML que ser renderizado pelo componente. No caso, o mtodo render retorna um elemento div que contm um ttulo e um pargrafo, ambos utilizando o valor do estado name para exibir o nome do usurio.

Quando o componente renderizado, o HTML gerado pelo mtodo render ser exibido para o usurio, como mostrado abaixo:

1.3 componentDidMount()

O mtodo componentDidMount() um mtodo do ciclo de vida de um componente em React que chamado imediatamente aps 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 mtodo componentDidMount a seguinte:

O mtodo componentDidMount chamado imediatamente aps o mtodo render do componente.

Ele til para realizar operaes que precisam ser executadas aps o componente ser renderizado, como fazer solicitaes HTTP, configurar eventos de DOM ou iniciar animaes.

Por exemplo, voc pode utilizar o mtodo componentDidMount para fazer uma solicitao 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 mtodo pode ser utilizado em um componente React:
(Acompanhe em "Show files>src>App.jsx")

No cdigo 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 mtodo componentDidMount chamado imediatamente aps o mtodo render do componente. Isso significa que, quando o mtodo componentDidMount chamado, o componente j foi renderizado e inserido na rvore de componentes.

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

O mtodo render chamado para renderizar o componente com o preo atual do Bitcoin em dlares. Se o estado data do componente tiver um valor, o preo atual do Bitcoin exibido. Se o estado data for nulo, a mensagem
"Loading..." exibida.

2. Atualizao

O estgio de atualizao do ciclo de vida de um componente em React ocorre quando o componente atualizado com novas propriedades ou estado.

Durante o estgio de atualizao, o componente passa pelos seguintes mtodos do ciclo de vida:

2.1 render()

O mesmo mtodo render do estgio 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 mtodo para refletir as alteraes na interface do usurio:
(Acompanhe em "Show files>src>App.jsx")

Neste exemplo, o componente MyComponent tem um estado chamado age, que inicializado com a propriedade initialAge passada como propriedade para o componente. Ele tambm tem um mtodo handleAgeClick, que chamado quando o usurio clica no boto "Adicionar ano". Quando o mtodo chamado, ele atualiza o estado age do componente com o valor atual da idade mais um.

O mtodo componentDidUpdate chamado sempre que o componente atualizado, o que ocorre quando o componente renderizado pela primeira vez ou quando ocorre uma mudana nas propriedades ou estado do componente. Neste caso, o mtodo usado para imprimir uma mensagem no console quando a propriedade name ou o estado age do componente so alterados.

Por fim, o mtodo 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 boto que, quando clicado, aumenta a idade do componente em um ano.

2.2 componentDidUpdate()

O mtodo componentDidUpdate um mtodo do ciclo de vida de um componente em React que chamado imediatamente aps o mtodo render quando o componente atualizado, ou seja, quando h uma mudana nas propriedades ou estado do componente.

Esse mtodo til para realizar operaes que precisam ser executadas aps o componente ser atualizado, como fazer solicitaes HTTP, atualizar o DOM de forma eficiente, etc.

Esse mtodo chamado com dois parmetros: os valores das propriedades e estado do componente antes da atualizao (prevProps e prevState) e o objeto snapshot, que um valor opcional que pode ser passado pelo mtodo getSnapshotBeforeUpdate.

Aqui est um exemplo de um componente em React que usa o mtodo componentDidUpdate para atualizar o grfico de um dashboard quando os dados so alterados:

No cdigo acima, o mtodo componentDidUpdate chamado sempre que o componente atualizado.

Ao mtodo componentDidUpdate so passados dois parmetros: prevProps e prevState, que so as propriedades e o estado do componente imediatamente antes da atualizao. Isso permite que o componente compare as propriedades e o estado atuais com os valores anteriores e, se necessrio, execute alguma ao.

No caso do cdigo acima, o mtodo 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 mtodo updateChart chamado.

Em suma, o mtodo componentDidUpdate usado no cdigo acima para detectar alteraes nas propriedades do componente e, quando isso ocorre, chamar o mtodo updateChart para atualizar o grfico com os novos dados.

3. Desmontagem: componentWillUnmount()

O estgio de desmontagem o ltimo estgio 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 mtodo interno que chamado quando um componente desmontado: componentWillUnmount

O mtodo componentWillUnmount chamado imediatamente antes de um componente ser desmontado e destrudo. Ele usado para limpar qualquer lgica 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 solicitaes 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 operaes assncronas que foram iniciadas no componentDidMount:

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

importante lembrar de que o mtodo componentWillUnmount chamado apenas uma vez, imediatamente antes do componente ser destrudo, portanto no possvel atualizar o estado do componente neste mtodo. Alm disso, no possvel usar o setState neste mtodo, pois o componente j est prestes a ser destrudo e no ser renderizado novamente.

marcelopetry.com