Quali fasi attraversano i componenti React dalla loro creazione alla rimozione dal DOM?

I componenti React attraversano diverse fasi principali del ciclo di vita, dalla creazione alla rimozione dal DOM:

1. Montaggio (Mounting) — creazione e inserimento del componente nel DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Aggiornamento (Updating) — avviene quando cambiano props o stato.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Smontaggio (Unmounting) — rimozione del componente dal DOM.

   • componentWillUnmount

4. Gestione degli errori (Error Handling) — in caso di errori nei componenti figli.

   • static getDerivedStateFromError
   • componentDidCatch

Esempio di utilizzo dei metodi del ciclo di vita in un componente di classe:

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

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

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

  componentWillUnmount() {
    console.log('Componente sarà rimosso');
  }

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

Ne componenti funzionali con hooks, fasi simili sono implementate tramite useEffect e altri hooks.