React - Bibliothèque Javascript pour le frontend

Auteur: Mohamed CHINY Durée necessaire pour le cours de React - Bibliothèque Javascript pour le frontend Niveau recommandé pour le cours de React - Bibliothèque Javascript pour le frontend Supports vidéo disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 6: Les states et le hook useState

Toutes les pages

Les states et le hook useState

Les states - Les éléments dynamiques d’une application React

Un state (ou état en français) est un objet (ou souvent une variable) qui représente l’état interne d’un composant React à un moment donné. Les states sont des éléments capitaux dans une application React, car ce sont eux qui maintiennent l’état d’un composant. De plus, si le state change, alors l’application React "réagit" aussitôt en rafraichissant l’affichage. C’est une opération souvent connue sous le nom de "Rerendering".
Je rappelle que l’objectif ultime de React consiste à rafraîchir l’affichage sans recharger entièrement le page. Ce rafraichissement est souvent piloté par la modification de la valeur d’un state.

Créer un state à l’aide du hook useState

Le state n’est pas une variable (ou objet) ordinaire. Donc on ne peut pas le créer avec une simple affectation comme on le fait en Javascript. En effet, la création d’un state se fait via un hook nommé useState.
Un hook est une fonction spéciale de React qui permet d’accomplir des tâches particulières sans avoir besoin d’un code trop compliqué. En effet, avant l’apparition des composants fonctionnels, il faut gérer les objets à mémoriser à l’aide de classes en écrivant du code un peu lourd. Les hooks ont simplifié cette opération à l’aide des composants fonctionnels.
Imaginons que l’on souhaite créer une sorte de compteur qui affiche combien de fois on a cliqué un bouton présent dans l’interface graphique. On peut donc envisager un state qui représente la valeur du compteur. Au début, on initialise ce compteur à 0, donc on peut créer notre state comme ceci:
const [compteur , setCompteur] = useState(0)
Examinons cette instructions de plus près.

useState(0) retourne un tableau qui contient deux éléments. Le premier élément est le state que l’on souhaite créer et qui est initialisé avec la valeur passée en argument (0 dans ce cas). Le deuxième élément quant à lui, est ce que l'on appelle le setter du state. Il s'agit d'une fonction qui pilote la modification du state.

N'oubliez pas que le state est une variable (ou objet) un peu spéciale. Donc on ne peut pas l'initialiser ni la modifier directement. Il faut pour cela passer par le hook useState pour la première création et le setter du state pour les modifications ultérieures.

En fait, on aurait pu écrire l'instruction précédente comme ceci:
const tab = useState(0)
Dans ce cas, tab[0] correspond au state et tab[1] au setter. Mais cette écriture est un peu lourde et peu lisible. Par contre, la première écriture utilise le principe de la déstructuration en Javascript. Il s'agit d'un mécanisme qui permet de verser les éléments d'un tableau (ou d'un objet) dans des variables ordinaires. Dans ce cas, compteur correspond à tab[0] et setCompteur à tab[1].
Notez que l'invocation du hook useState implique l'importation de celui-ci à partir du module "react" comme ceci import { useState } from 'react'. Cette importation est souvent ajoutée automatiquement par l'IDE une fois il détecte le présence du hook dans le code.

Mettre le state à jour

Si on veut modifier la valeur d'un state, on doit passer par son setter qui a été créé au même moment que le state à l'aide du hook useState. Dans notre cas, il s'agit de setCompteur.
Il est de coutume de nommer le setter du state avec le même nom que ce dernier en le préfixant par use et en écrivant tout en Camel Case. Si par exemple le state s'appelle date, son setter sera nommé setDate.
Si on veut par exemple incrémenter le state compteur, alors on peut envisager un code semblable à ceci:
setCompteur(compteur+1)
En effet, pour changer le state on doit le faire par son setter. On passe la nouvelle valeur du setter en guise d'argument du setter. Dans notre cas, compteur+1, ce qui sous-entend 1 (vu que compteur a été initialisé à 0). La prochaine exécution donnera 2, puis 3 etc... En plus, à chaque changement du state compteur, un re-rendu (rerendering) sera lancé, et l'affichage sera mise à jour avec la nouvelle valeur du state.

Mettre en place un event handler

Maintenant que l'on sait comment manipuler le state, il est temps d'écrire le code complet qui permet d'incrémenter le compteur à chaque fois on clique sur un bouton de l'interface graphique. A cette fin, nous allons mettre en place un event handler. Il s'agit d'une fonction qui sera exécuté une fois on aura cliqué sur le bouton. Donc le fichier de notre application App.js ressemblera à ceci:
import { useState } from "react";

function App() {
   const [compteur,setCompteur]=useState(0)
   const handleCompteur=()=>{
      setCompteur(compteur+1)
   }
   return (
   <>
      <h1>{compteur}</h1>
      <button onClick={handleCompteur}>
         Incrémenter le compteur
      </button>
   </>
   );
}

export default App;
Afin de visualiser la valeur du state compteur nous avons procédé à une interpolation JSX dans le composant <h1>. Dans le bouton, nous avons ajouté l'événement onClick exactement comme on le faisait en Javascript Vanilla. Sauf qu'ici, il faut respecter la casse ("C" de Click en majuscule). Comme valeur, on procède encore à l'interpolation JSX où on place le nom de l'event handler qui est dans ce cas la fonction nommée handleCompteur.
Notez bien que l'on ne doit pas placer les parenthèses après le nom de la fonction. Sinon elle sera exécutée au chargement de la page (avant même de cliquer sur le bouton).
Si on a besoin de passer des arguments au moment de l'appel, dans ce cas on placera l'event handler dans une fonction anonyme. Nous verrons tout cela plus loin dans ce cours.
Concernant la définition de la fonction, on doit le faire avant le return (dans la partie qui contient la logique du composant). Il s'agit là d'une écriture fléchée (arrow function) plus concise à écrire.