Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

4. Le cycle de vie d’un composant

Chaque composant a un cycle de vie géré par React lui-même. React crée le composant, s’occupe de fusionner le DOM virtuel avec le DOM du navigateur, vérifie quand les données d’un state changent, et détruit les composants du DOM quand cela est nécessaire. Pratique, non ?

Mais ce n’est pas tout, car React nous offre la possibilité d’agir sur certains moments clefs de la vie d’un composant, en ajoutant une ou plusieurs méthodes appelées « méthodes de cycle de vie ». Chacune de ces méthodes correspondant à un moment bien précis de la vie du composant. Il y a trois étapes de la vie d’un composant qui nous intéressent tout particulièrement, c’est la création, la modification du DOM, et la suppression d’un composant.

Méthode de cycle de vieDescription
componentDidMount()C’est la méthode appelée en premier lors de la création d’un composant, c’est-à-dire lorsqu’il est inséré dans le DOM. Cela nous permet de mettre en place certaines instructions lors de l’initialisation du composant, comme la récupération de données depuis un serveur distant par exemple. On parle de « montage » du composant en terme React.
componentDidUpdate(prevProps, prevState)À chaque fois que React détecte que les valeurs d’une propriété du composant sont modifiées, le composant est mis à jour. La méthode reçoit en paramètre deux objets représentant les props et le state avant la mise à jour. Cela vous donne l’opportunité de travailler sur le DOM une fois que le composant a été mis à jour.
componentWillUnmount()C’est la dernière méthode de cycle de vie d’un composant, qui est appelé juste avant que le composant soit détruit par React. Un composant est détruit lorsqu’il est retiré du DOM, lors de la navigation de l’utilisateur par exemple. Cette méthode permet de se désabonner de certaines dépendances du composant, et ainsi éviter les problèmes de performance dans notre application. On peut détacher les gestionnaires d’événements, ou encore interrompre un minuteur. En terme React, cette étape est appelé le « démontage ».

A priori, ces méthodes nous servirons pour initialiser notre state, affiner les mises à jour de notre composant si besoin, et mettre fin à des processus coûteux en terme de performances lorsque le composant sera détruit. Cependant, rappelez-vous que nos composants de fonction ne peuvent pas gérer le cycle de vie d’un composant, il nous faut un Hook spécifique pour cela ! Sinon, nous ne pourrons rien faire avec ces méthodes de cycle de vie.