Categoria: Web

Ciclo 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

class CicloDeVida extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
  }
  
  componentDidMount() {
    console.log('montou');
  }
  
  render() {
    console.log('render');
    return <h1>Ciclo de vida de um Component</h1>;
  }
}


ReactDOM.render(
  <CicloDeVida />,
  document.getElementById('root')
);

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

class CicloDeVida extends React.Component {
  constructor(props) {
    super(props);
    console.log('constructor');
    this.state = {timer: new Date()};
  }

  updateTimer() {
    this.setState({
      timer: new Date()
    });
  }
  
  componentDidMount() {
    console.log('montou');
     this.timerFunctionContainer = setInterval(
      () => this.updateTimer(),
      1000
    );
  }
  
  componentDidUpdate() {
    console.log('atualizou');
  }
  
  componentWillUnmount() {
    console.log('desmontou');
    clearInterval(this.timerFunctionContainer);
  }
 
  render() {
    console.log('render');
    return <React.Fragment>
      <h1>Ciclo de vida de um Component</h1>
      <p>Hora atual: {this.state.timer.toLocaleTimeString()}</p>
      </React.Fragment>;
  }
}


ReactDOM.render(
  <CicloDeVida />,
  document.getElementById('root')
);

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:

Post anterior falei sobre eventos no react e qualquer dúvida deixe o comentário.