Ciclos de vida de um componente react, um recurso importante dentro do React onde temos maior controle sobre nossa aplicação. Imagine você quer criar um Timer que irá contar somente quando o componente estiver sendo exibido na tela. Qual seria o evento que poderíamos incluir caso o componente fosse removido da tela?
React nos fornece uma série de funções dentro do nosso componente, para cada fase do seu ciclo de vida. Podemos acompanhar quando:
- Montado – Mounting
- Atualizado – Updating
- Desmontado – Unmounting
- Dispara um erro – Error Handling
Eventos de montagem
Temos o constructor e a função render executados quando nosso componente é criado mas temos uma função especifica para quando nosso componente é criado componentDidMount(), essa função será executada após o constructor and render serem executados. Elas possuem a seguinte ordem:
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
Eventos de atualização
Quando nosso componente é atualizando chamamos uma série de funções na seguinte ordem:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
As funções marcadas como bold são as funções mais usadas, o resto são utilizadas em casos bem específicos
Eventos de desmontagem
Temos um evento específico para quando nosso componente é removido do nosso.
- componentWillUnmount()
Mas vocês podem se perguntar mas porque que chamar uma função pra quando o meu componente for removido da tela. Podemos ter alguns casos, temos um formulário e o usuário não enviou os dados queremos salvar essa info caso ele volte para esse componente ou simplesmente remover um listener ou um Timer, nesses casos temos o controle de executar qualquer ação antes desse componente seja removido do virtual DOM.
Eventos de erro
Se algum erro ocorrer durante a renderização, durante alguma função do ciclo de vida ou no construtor de qualquer componente. filho.
- static getDerivedStateFromError()
- componentDidCatch()
Durante a evolução do React algumas funções ficaram para trás e foram descontinuadas, são elas:
componentWillMount()componentWillUpdate()componentWillReceiveProps()
Essas funções não são mais recomendadas pelo time do React, são classificadas como UNSAFE.
Exemplo 1
No Exemplo 1, temos apenas a chamada do função componentDidMount() com o um console.log, para testarmos a ordem também adicionamos logs no construtor e no método render. E a saída será a seguinte:
Exemplo 2
No exemplo 2, incluímos mais funcionalidades em nosso exemplo, agora temos um timer para exibir a hora atual. Adicionamos a propriedade timer em nosso estado. E na função componentDidmount irá incluir um setIterval para atualizar o timer a cada segundo, mas para garantir nenhum tipo de erro removemos o setInterval antes de desmontar o nosso componente. Outra observação sobre a ordem de chamada das funções:
