---
title: Le state et le cycle de vie d'un composant React
description: Voyons ensemble comment gérer le state et le cycle de vie d'un composant React !
tags: [Frontend, React, JavaScript, TypeScript, Bibliothèque, Interface utilisateur (UI)]
---

import Callout from "@/components/Callout";
import tabs from "./tabs";

Dans le précédent article, nous avons vu comment créer notre premier composant React avec notamment le concept de **props**.

Voyons maintenant comment gérer le **state** et le **cycle de vie** d'un composant React !  
Commençons tranquillement avec le **cycle de vie** d'un composant, puisqu'il est indispensable pour comprendre le **state**.

## 🔄 Cycle de vie

Le **cycle de vie** d'un composant React est une série d'étapes que traverse un composant, de sa création _(montage)_ à sa destruction _(démontage)_.

Voici les trois différentes étapes du cycle de vie d'un composant React :

- **Montage** _(Mounting)_ : le composant est créé et inséré dans le DOM
- **Mise à jour** _(Updating)_ : le composant est mis à jour suite à un changement de props ou de state
- **Démontage** _(Unmounting)_ : le composant est retiré du DOM

On verra un peu plus en détail ces étapes dans l'article suivant qui traitera un certain hook de React : `useEffect`.

<Callout type="question" title="Hook, comme le capitaine ? 🦜🏴‍☠️">
  Haha, non !

  Un hook en React, est une fonction qui permet d'exploiter les fonctionnalités de React dans un composant fonctionnel _(fonction)_.

  Bon... c'est un peu du charabia, mais on verra ça plus en détail dans le prochain article car il y a beaucoup à dire sur les hooks !
</Callout>

Mais pour le moment, restons en à une vue d'ensemble du cycle de vie !

## 🧠 State

Le state est un objet qui contient les données internes d'un composant.
Il est propre à chaque composant et peut être modifié par ce dernier (à ne pas confondre avec les props qui elles sont immuables).

Mais alors, pourquoi utiliser un state alors qu'on pourrait tout simplement déclarer une variable dans notre composant ?

Prenons cet exemple :

<tabs.reactLocalVariable />

[Voir l'exemple sur PlayCode](https://playcode.io/1940876)

On serait tentés de croire que ce code fonctionne. Après tout, en vanilla JS _(JavaScript pur)_, on pourrait tout à fait faire ça !  
Et maintenant tu t'en doutes _(sinon pourquoi j'en parlerai ?)_, ce code ne fonctionne pas.

Pourtant, si on regarde la console du navigateur on voit bien que la variable `count` est bien incrémentée !

La raison est très simple : React ne sait pas que la variable `count` a été modifiée.  
Pour être plus précis, React ne sait pas qu'il doit mettre à jour l'interface utilisateur _(UI)_ suite à la modification de count.

C'est là qu'intervient le **state** !  
Le **state** est **réactif** et permet à React de savoir quand il doit mettre à jour l'interface utilisateur _(UI)_.

## 📝 Déclaration du state

Pour déclarer un **state**, on utilise le **hook** `useState` de React.

<tabs.reactStateDeclaration />

Et là tu vas peut-être te demander une chose...

<Callout type="question" title="Ouh là... Pourquoi on a deux assignements ?">
  Bien vu ! Effectivement on va avoir deux assignements pour déclarer un state :

  - `count` : la valeur du state
  - `setCount` : la fonction qui permet de modifier la valeur du state

  Si tu as déjà fait de la POO, le principe de **getter** et **setter** te sera familier puisque c'est un peu le même principe !

  Le hook `useState` prend en paramètre la **valeur initiale du state** _(ici 0)_ et retourne un tableau avec la valeur du state et la fonction pour le modifier.
</Callout>

## 🔄 Utilisation du state

Maintenant que notre state est déclaré, on peut l'utiliser dans notre composant.

<tabs.reactStateUsage />

[Voir l'exemple sur PlayCode](https://playcode.io/1940705)

Et voilà ! Pas besoin de plus pour gérer un state en React 😉

Mais qu'est-ce qu'il se passe sous le capot ?  
C'est un peu plus complexe que ça, mais pour faire simple :

### ⚙️ Montage du composant

On vient prévenir React que notre composant va avoir un **state** et on lui donne une valeur initiale _(ici 0)_.

### 🔧 Mise à jour du composant (Updating)

Ce state, à chaque modification, va déclencher un nouveau rendu du composant.

### 🗑️ Démontage du composant (Unmounting)

Et enfin, quand le composant est retiré du DOM, le state est détruit avec lui.

Ce fonctionnement est identique pour les props donnés à un composant d'ailleurs !  
React est vraiment bien fait pour ça 😊

## Conclusion

Plutôt simple, non ?  
Alors maintenant que tu sais comment gérer le **state** et le **cycle de vie** d'un composant React, tu es prêt à te pencher sur la prochaine étape _(et pas des moindres)_ : les **hooks** !

Mais pour l'heure, je te laisse jouer avec les **states** et les **props** pour bien comprendre comment tout ça fonctionne.