Retour

3/ ReactJS: Gestion d'états

Articles pour comprendre comment gérer les états dans vos composants ReactJS.

Et comment utiliser le Hook useState efficacement pour créer des applications plus performantes et plus évolutives

Dépot GITHUB

Prérequis

Il est conseillé d'avoir suivi les articles d'introduction à ReactJS:

ReactJS: Introduction.

ReactJS: Les composants.

Déscription du chapitre

Dans ce chapitre, nous allons introduire la gestion d'état en ReactJS et pourquoi il est important de comprendre comment gérer les états de manière efficace.

Ensuite, nous aborderons les différentes méthodes de gestion d'état et les avantages de l'utilisation de Hook.

Objectifs

Comprendre l'importance de la gestion d'état dans les applications ReactJS.
Comprendre les avantages de l'utilisation de Hook pour la gestion d'état.
Utiliser le Hook useState pour gérer l'état d'un composant.

Les variables d'états

Dans les applications ReactJS, la gestion d'état fait référence à la manière dont les données sont stockées et mises à jour dans un composant.

Les données sont stockées sous forme d'état (state) et sont utilisées pour déterminer comment le composant doit être rendu à l'écran.

La fonction useState permet de gérer l'état interne d'un composant, elle est utilisée pour déclarer une variable d'état et la fonction pour la mettre à jour dans un composant.

Déclaration

Le Hook useState est une fonction importée depuis le module react, qui prend en paramètre la valeur initiale de l'état et renvoie un tableau contenant deux éléments :

La variable d'état: pour lire la valeur.
La fonction: pour mettre à jour la valeur de la variable d'état.

// 1. Import de la fonction
import { useState } from 'react';

function Composant() {
  
  // 2. Déclaration de la variable d'état et de son setter
  const [laVariable, setLaVariable] = useState('Valeur initiale');

  return (
    <div>
    </div>
  );
}

export default Composant;

Utilisation

Maintenant que la variable d'état et son setter sont déclarés, nous pouvons l'utiliser pour afficher la valeur de la variable dans le paragraphe, et modifier sa valeur lors d'un clique:

import { useState } from 'react';

function Composant() {
  
  const [laVariable, setLaVariable] = useState('Valeur initiale');

  // 1. Fonction executée lors du clique
  function handleChangeLaVariable(){
    // 1.1. Utiliser la fonction pour modifier la variable
    setLaVariable('Valeur modifiée')
  }

  return (
    <div>
      {/* 2. Lire la variable */}
      <p>{laVariable}</p>

      {/* 3. Lier la fonction avec la bouton */} 
      <button onClick={handleChangeLaVariable}>
        Cliquez ici pour changer le texte
      </button>
    </div>
  );
}
export default Composant;

Résultat d'affichage avant changement de variables d'états créer avec useState de la librairie ReactJS

Résultat d'affichage après changement de variables d'états créer avec useState de la librairie ReactJS

Il faut noté que le composant fonctionnel est réexecuter quand une variables d'état change, pour illustrer le comportement, nous allons afficher dans la console du texte:

import { useState } from 'react';

function Composant() {

  // Fonction executé a chaque rendu:
  console.log('Composant rendu!')

  const [laVariable, setLaVariable] = useState('Valeur initiale');

  function handleChangeLaVariable(){
    setLaVariable('Valeur modifiée')
  }

  return (
    <div>
      <p>{laVariable}</p>
      <button onClick={handleChangeLaVariable}>
        Cliquez ici pour changer le texte
      </button>
    </div>
  );
}
export default Composant;

Nous remarquons dans la console le texte 'Composant rendu' quand nous accédons la première fois à la page.

Lors du clique et donc du changement de la valeur de la variable d'état, vous retrouvez dans la console un deuxiemme affichage du texte 'Composant rendu'.

De plus, la valeur de la variable d'état ne change que lors de la réexecution du composant fonctionnel.

Pour illustrer le comportement, nous allons ajouté un affichage sur le console de la valeur de la variable a chaque rendu.

Et ajouté un affichage de la valeur de la variable d'état dans la fonction qui modifie la valeur:

import { useState } from 'react';

function Composant() {

  const [laVariable, setLaVariable] = useState('Valeur initiale');

  // 1. Afficher la variable a chaque rendu:
  console.log('Composant rendu: ', laVariable);

  function handleChangeLaVariable(){
    setLaVariable('Valeur modifiée');

    // 2. Afficher la variable après l'avoir changé
    console.log('Après changement: ', laVariable);

  }

  return (
    <div>
      {/* 2. Lire la variable */}
      <p>{laVariable}</p>

      {/* 3. Lier la fonction avec la bouton */} 
      <button onClick={handleChangeLaVariable}>
        Cliquez ici pour changer le texte
      </button>
    </div>
  );
}
export default Composant;

Exemple: Compteur

Dans cet exemple, nous allons créer un composant qui affichera un compteur que nous pourrons incrémenter et décrémenter grâce à deux boutons:

import { useState } from 'react';

function Compteur() {
  
  const [leCompteur, setLeCompteur] = useState(0);

  // 1. Fonction executée lors du clique sur -1
  function handleDecrementation(){
    // 1.1. Fonction pour modifier la variable
    setLeCompteur(leCompteur - 1)
  }

  // 2. Fonction executée lors du clique sur +1
  function handleIncrementation(){
    // 2.1. Fonction pour modifier la variable
    setLeCompteur(leCompteur + 1)
  }

  return (
    <div>
      {/* 3. Lire la variable*/}
      <p>{leCompteur}</p>

      {/* 4. Lier la fonction de decrementation*/} 
      <button onClick={handleDecrementation}>
        -1
      </button>

      {/* 5 Lier la fonction d'incrementation*/} 
      <button onClick={handleIncrementation}>
        +1
      </button>
    </div>
  );
}
export default Compteur;

Les formulaires

L'utilisation des variables d'états simplifient le processus de gestions des formulaires, et nous offre la possibilité de facilement contrôler les champs utilisateur.

Stocker les entrées

Nous pouvons stocker les entrées de l'utilisateur après chaque frappe dans une variable d'état.

Il nous suffit de:

Déclarer une variable d'état et son setter avec la fonction useState.
Déclarer la fonction à executer lors de la frappe qui s'occupe de:
1. Récuperer la valeur du champ depuis l'objet reçu en paramètre.
2. Mettre à jour la valeur de la variable d'état avec la fonction setteur.
Afficher la variable dans un paragraphe pour observer sa mise à jour en temps réel.
Lier la fonction avec l'élément en utilisant l'attribut onChange.

import { useState } from 'react';

function Formulaire() {
  
  // 1. Déclarer la variable d'état et sont setter
  const [texte, setTexte] = useState("");

  // 2. Fonction executée pour chaque frappe
  function handleTexteChange(e){
    // 2.1 Récupere la valeur du champs
    const texteEntre = e.target.value;
    
    // 2.2 Assigne la nouvelle valeur à la variable
    setTexte(texteEntre);
  }

  return (
    <div>
      {/* 3. Afficher la valeur de la variable */}
      <p>{texte}</p>

      {/* 4. Lier la fonction de mise à jour */} 
      <input onChange={handleTexteChange} />
    </div>
  );
}
export default Formulaire;

Controler les entrées

Les champs utilisateur possèdent un attribut nommé value qui nous permet de déterminer et de contrôler la valeur d'un champ.

Nous pouvons utiliser notre variable d'état afin de contrôler le champ, pour le pré-remplir avec une valeur initiale ou le vider avec un bouton par exemple.

Initialiser la variable d'état avec une valeur pour pré-remplir le formulaire.
Utiliser l'attribut value pour controler la valeur du champ.
Déclarer la fonction à executer lors du clique sur le bouton de vidage:
1. Utiliser la fonction setter pour assigner un chaine de caractère vide la la variable.
Lier le bouton avec la fonction.

import { useState } from 'react';

function Formulaire() {
  // 1. Donner une valeur initiale pour pré-remplir le champ
  const [texte, setTexte] = useState("Valeur pré-remplie");

  function handleTexteChange(e){
    const texteEntre = e.target.value;
    setTexte(texteEntre);
  }

  // 3. Fonction executée lors d'un clique
  function viderTexte(){
    // 3.1 Vider la variable d'état
    setTexte("");
  }

  return (
    <div>
      <p>{texte}</p>
      {/* 2. Lier la variable avec la valeur du champ */} 
      <input onChange={handleTexteChange} value={texte} />

      {/* 4. Bouton pour vider le texte */} 
      <button onClick={viderTexte} >
        Vider le texte
      </button>
    </div>
  );
}

Gestion des erreurs

Nous pouvons aussi utiliser les variables d'état pour afficher des message d'erreurs dynamiquement suivant la valeur du champ.

Par exemple nous pouvons afficher un message d'érreur si la taille du texte est infèrieur à 3 ou supèrieure à 10:

Déclarer une variable d'état pour le message d'erreur, initialisée avec une une chaine de caractères vide.
Ajouté la logique pour tester la taille de la chaine de caractère et modifier la valeur du message d'erreur.
Afficher le message d'erreur dans la page web.

import { useState } from 'react';

function Formulaire() {
  const [texte, setTexte] = useState("Valeur pré-remplie");

  // 1. Variable d'état pour l'erreur initialisée à vide
  const [texteError, setTexteError] = useState("");

  function handleTexteChange(e){
    const texteEntre = e.target.value;
    setTexte(texteEntre);

    // 2. Gestion des erreurs
    if(texteEntre.length < 3){
      setTexteError('Le texte est trop court!')
    }
    if(texteEntre.length > 10){
      setTexteError('Le texte est trop long!')
    }
  }

  function viderTexte(){
    setTexte("");
  }

  return (
    <div>
      <p>{texte}</p>
      <input onChange={handleTexteChange} value={texte} />

      {/* 3. Afficher le message d'erreur */} 
      <p>{texteError}</p>

      <button onClick={viderTexte} >
        Vider le texte
      </button>
    </div>
  );
}

Conclusion

Dans ce chapitre, nous avons appris à utiliser le Hook useState pour déclarer une variable d'état et la mettre à jour dans un composant fonctionnel.

Nous avons également vu qu'il est possible d'utiliser plusieurs variables d'états dans un même composant.

Les variables d'états sont une brique essentiel pour la création d'application dynamique avec ReactJS.

Dans le chapitre suivant, nous allons découvrir les autres Hooks importants de ReactJS.

Aller plus loin

Précedent: NodeJS: Les composants

Suivant: ReactJS: Les Hooks

Javascript: Initiation

Apprendre les bases de la librairie ReactJS, pour construire des pages web dynamiques et interactives complexes.

Exemple: Mise en place, les composants, les èvenements, Les hooks...

Niveau:

JavaScript

React

Initiation

Une introduction pour découvrir ReactJS, et vous permettra de vous familiariser avec les bases de cette bibliothèque pour construire des applications web plus complexes.

Vous découvrirez également les avantages de ReactJS, et un aperçu de l'architecture de composants.

Niveau:

Web

JavaScript

React

Bases

2/ ReactJS: Les composants

Dans ce chapitre, nous allons explorer les composants ReactJS en détail.

Les composants sont la pierre angulaire de ReactJS et vous permettent de construire des applications modulaires et réutilisables.

Niveau:

Web

JavaScript

React

Composants

Evenements

4/ ReactJS: Les Hooks

Dans cet article, nous nous concentrerons les Hooks les plus couramment utilisés : useContext et useEffect.

Vous apprendrez comment utiliser chacun de ces Hooks pour gérer les états de vos composants, partager des données entre les composants, et effectuer des actions après le rendu du composant.

Niveau:

Web

JavaScript

React

Etats

Hooks

HTTP

5/ ReactJS: La navigation

Dans ce cours, vous apprendrez à utiliser React-router-dom, une librairie ReactJS très populaire pour ajouter de la navigation à votre application web.

Vous découvrirez comment créer des liens de navigation, afficher des pages en fonction des URL...

Niveau:

Web

JavaScript

React

Router

DOM

Navigation

6/ ReactJS: Tutoriel: Todo List

Dans ce tutoriel, vous apprendrez à créer une Todo liste fonctionnelle, qui vous permettra d'ajouter, supprimer et valider des tâches.

De plus, vous verrez comment stocker cette liste dans le stockage local de votre navigateur afin que vous puissiez la conserver même après avoir quitté la page.

Niveau:

Web

JavaScript

React

Tuto

Todos

Bases

3/ ReactJS: Gestion d'états

3/ ReactJS: Gestion d'états

Prérequis

Déscription du chapitre

Objectifs

Les variables d'états

Déclaration

Utilisation

Exemple: Compteur

Les formulaires

Stocker les entrées

Controler les entrées

Gestion des erreurs

Conclusion

Aller plus loin

Javascript: Initiation

1/ ReactJS: introduction

2/ ReactJS: Les composants

4/ ReactJS: Les Hooks

5/ ReactJS: La navigation

6/ ReactJS: Tutoriel: Todo List