Quelles étapes traversent les composants React depuis leur création jusqu'à leur suppression du DOM?

Les composants React passent par plusieurs étapes principales du cycle de vie, de leur création à leur suppression du DOM :

1. Montage (Mounting) — création et insertion du composant dans le DOM.

   • Constructor
   • static getDerivedStateFromProps
   • render
   • componentDidMount

2. Mise à jour (Updating) — se produit lors du changement des props ou de l'état.

   • static getDerivedStateFromProps
   • shouldComponentUpdate
   • render
   • getSnapshotBeforeUpdate
   • componentDidUpdate

3. Démontage (Unmounting) — suppression du composant du DOM.

   • componentWillUnmount

4. Gestion des erreurs (Error Handling) — en cas d'erreurs dans les composants enfants.

   • static getDerivedStateFromError
   • componentDidCatch

Exemple d'utilisation des méthodes du cycle de vie dans un composant de classe :

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

  componentDidMount() {
    console.log('Composant monté');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Composant mis à jour');
  }

  componentWillUnmount() {
    console.log('Composant va être supprimé');
  }

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

Dans les composants fonctionnels avec hooks, des étapes similaires sont réalisées via useEffect et autres hooks.