State et cycle de vie

Introduction

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.

Rappel

Dans cet article, on va utiliser des composants fonctionnels (fonctions) plutôt que des composants de classe (classes) pour déclarer nos composants React.
Pour rappel, les composants déclarés avec des classes ne sont plus recommandés par la documentation officielle.

🔄 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 :

1. Montage (Mounting) : le composant est créé et inséré dans le DOM
2. Mise à jour (Updating) : le composant est mis à jour suite à un changement de props ou de state
3. 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.

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 !

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 :

JavaScript

Counter.jsx

import React from 'react';

export const Counter = () => {
  let count = 0;

  const increment = () => {
    count += 1;
    console.log("Increment", count);
  };

  return (
    <button onClick={increment}>{count}</button>
  );
};

TypeScript

Counter.tsx

import React from 'react';

export const Counter = () => {
  let count: number = 0;

  const increment = () => {
    count += 1;
    console.log("Increment", count);
  };

  return (
    <button onClick={increment}>{count}</button>
  );
};

🕹️ Voir l'exemple sur PlayCode

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.

JavaScript

const [count, setCount] = React.useState(0);

TypeScript

const [count, setCount] = React.useState<number>(0);

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

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.

🔄 Utilisation du state

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

JavaScript

Counter.jsx

import React from 'react';

export const Counter = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(count + 1);

  return (
    <button onClick={increment}>{count}</button>
  );
};

TypeScript

Counter.tsx

import React from 'react';

export const Counter = () => {
  const [count, setCount] = React.useState<number>(0);

  const increment = () => setCount(count + 1);

  return (
    <button onClick={increment}>{count}</button>
  );
};

🕹️ Voir l'exemple sur PlayCode

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 (Mounting)

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.