React - Ciclo de vida

Os componentes no React, assim como recursos de diversas outras tecnologias, possui um ciclo de vida bem definido, ou seja, sabemos exatamente as etapas executadas da criação a destruição de um componente.

Os métodos do ciclo de vida de componentes são invocados em diferentes momentos, e eles podem ser organizados em três grupos: "mounting" onde são montados na tela, "updating" onde são atualizados e "unmounting" onde são desmontados e removidos da tela.

Mounting

Nesse momento temos a inicialização, a construção dos componentes (pré/pós) e a renderização.

constructor

Chamado antes que o componente seja montado:

getDerivedStateFromProps

Executado antes da renderização (render):

render

Único método puro, devendo sempre se manter puro, ou seja, sem modificar o estado do componente:

componentDidMount

Executado após a montagem do componente:

componentWillMount (legado, não deve ser usado)

Executado antes da montagem, e funcionará apenas até a versão 17.

Updating

Aqui temos o recebimento de propriedades, a definição e a atualização deve ocorrer a atualização do componente (caso ele deva ser atualizado) a renderização e a confirmação da atualização.

getDerivedStateFromProps

Funciona da mesma forma descrita em "mounting".

shouldComponentUpdate

Executado antes da renderização, ao receber novas propriedades ou estado e permite determinar se a renderização deve ou não ocorrer:

render

Funciona da mesma forma descrita em "mounting".

getSnapshotBeforeUpdate

Executado antes do retorno da renderização mais recente seja escrito no DOM:

componentDidUpdate

Executado após uma atualização:

componentWillReceiveProps (legado, não deve ser usado)

Executado antes que o componente montado receba propriedades, e funcionará apenas até a versão 17.

componentWillUpdate (legado, não deve ser usado)

Executado antes da renderização quando novas propriedades ou estado estão sendo recebidos, e funcionará apenas até a versão 17.

Unmounting

Na última etapa temos apenas a sinalização do inicio da destruição dos componentes.

componentWillUnmount

Executado antes que um componente seja desmontado ou destruído:

Exemplo

Aqui pode ser encontrado um exemplo que demonstra todo ciclo de vida de um componente, onde um componente de teste é criado, atualizado e depois removido, onde cada método do ciclo de vida é chamado gerando uma mensagem no console.

Ao iniciar a aplicação não temos nada no console:

Ao clicar no botão "Mostrar componente" nosso componente é criado passando pela etapa de "mounting":

Com o componente criado temos agora o botão "Mudar estado do componente teste!" que quando clicado inicia a etapa "updating":

Por fim, ao clicar no botão "Esconder componente" nosso componente é removido, passando pela etapa "unmounting":