Les méthodes de cycle de vie sont des fonctions spéciales disponibles dans les composants classe (Class Components) qui permettent d’exécuter du code à des moments précis de l’existence d’un composant : sa création, ses mises à jour, et sa suppression.
Les 3 phases du cycle de vie
| Header | Moment | Méthodes principales | Cas d’usage |
|---|---|---|---|
| 1. Montage (Mounting) | Création et insertion dans le DOM | constructor(), render(), componentDidMount() | Initialisation, appels API, abonnements |
| 2. Mise à jour (Updating) | Changement de props ou state | render(), componentDidUpdate(), shouldComponentUpdate() | Réaction aux changements, optimisations |
| 3. Démontage (Unmounting) | Suppression du DOM | componentWillUnmount() | Nettoyage (timers, abonnements, annulation requêtes) |
- Le concept existe toujours : Même avec des fonctions, un composant a toujours une vie (il se monte, se met à jour, se démonte). Le concept de cycle de vie est universel, même si la syntaxe a changé.
- Maintenance de l’existant : Beaucoup d’entreprises ont d’anciennes applications écrites en classes. En tant que développeur, vous devez être capable de lire et comprendre ce code, même si vous ne l’écrivez plus.
| Action | Ancienne façon (Classe / POO) | Nouvelle façon (Fonction + Hooks) |
|---|---|---|
| Créer un composant | class MonComp extends Component | function MonComp() |
| Gérer un état | this.state / this.setState | useState() |
| Au montage (API) | componentDidMount() | useEffect(() => { … }, []) |
| Au démontage | componentWillUnmount() | useEffect(() => { return () => { … } }, []) |
Explorer les thématiques : React