Quais etapas os componentes React passam desde a sua criação até à sua remoção do DOM?

Os componentes React passam por várias etapas principais do ciclo de vida, desde a sua criação até à sua remoção do DOM:

1. Montagem (Mounting) — criação e inserção do componente no DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Atualização (Updating) — ocorre quando há alterações nas props ou no estado.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Desmontagem (Unmounting) — remoção do componente do DOM.

   • componentWillUnmount

4. Tratamento de erros (Error Handling) — em caso de erros nos componentes filhos.

   • static getDerivedStateFromError
   • componentDidCatch

Exemplo de uso de métodos do ciclo de vida em um componente de classe:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    console.log('Componente montado');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Componente atualizado');
  }

  componentWillUnmount() {
    console.log('Componente será removido');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Em componentes funcionais com hooks, etapas semelhantes são implementadas através de useEffect e outros hooks.