Accéder à la valeur mémorisée

Une fois qu'une variable d'état a été déclarée en utilisant la syntaxe `const [maVariableEtat, setMaVariableEtat] = useState(valeurInitiale);`, comment pouvons-nous lire sa valeur actuelle pour l'utiliser dans notre composant, par exemple pour l'afficher dans l'interface utilisateur ou l'utiliser dans une logique conditionnelle ?

C'est extrêmement simple : la première valeur retournée dans le tableau par `useState` et assignée lors de la déstructuration (ici, `maVariableEtat`) contient toujours la valeur actuelle de cet état pour le rendu en cours.

Vous pouvez utiliser cette variable directement dans votre code JSX ou dans toute autre logique JavaScript à l'intérieur de votre composant fonctionnel, comme vous le feriez avec n'importe quelle autre constante ou variable JavaScript.

Utilisation dans le JSX

L'utilisation la plus courante est d'afficher la valeur de l'état directement dans le JSX retourné par le composant, en utilisant les accolades `{}` que nous connaissons bien.

import React, { useState } from 'react';

function AffichageInfo() {
  const [nomUtilisateur, setNomUtilisateur] = useState('Alice');
  const [compteur, setCompteur] = useState(10);
  const [estVisible, setIsVisible] = useState(true);

  return (
    

      {/* Affichage direct des variables d'état */}
      
Utilisateur : {nomUtilisateur}
      
Score : {compteur}

      {/* Utilisation dans une condition pour l'affichage */}
      {estVisible && 
        
Ce message est visible !
      }

      {/* Utilisation dans un ternaire */}
      
Statut : {estVisible ? 'Actif' : 'Inactif'}

      {/* Note : Vous passeriez setNomUtilisateur, setCompteur, setIsVisible 
          à des gestionnaires d'événements pour modifier ces valeurs */}
    
  );
}

export default AffichageInfo;

Dans cet exemple, `nomUtilisateur`, `compteur`, et `estVisible` sont lues directement depuis les variables d'état déclarées et insérées dans le JSX.

Utilisation dans la logique JavaScript

Vous pouvez également utiliser la valeur actuelle de l'état dans la logique JavaScript de votre composant avant le `return`.

import React, { useState } from 'react';

function VerificateurAge() {
  const [age, setAge] = useState(15);

  // Logique utilisant la valeur de l'état 'age'
  let messageMajorite = '';
  if (age >= 18) {
    messageMajorite = "Vous êtes majeur.";
  } else {
    messageMajorite = "Vous êtes mineur.";
  }

  // Fonction pour simuler l'augmentation de l'âge
  const vieillir = () => {
    setAge(age + 1);
  };

  return (
    

      
Age actuel : {age}
      
{messageMajorite}
      Vieillir d'un an
    
  );
}

export default VerificateurAge;

Ici, la valeur de `age` est lue et utilisée pour déterminer le contenu de `messageMajorite` avant d'être affichée dans le JSX.

Stabilité de la valeur pendant un rendu

Un point important à retenir est que la valeur de la variable d'état (celle que vous lisez) est constante pendant toute la durée d'un seul rendu. Même si vous appelez la fonction de mise à jour (`setAge` dans l'exemple précédent) plusieurs fois au cours d'un même événement ou d'une même exécution de fonction, la valeur de la variable `age` que vous lisez dans ce même cycle ne changera pas.

const incrementerPlusieursFois = () => {
  setAge(age + 1); // Demande une mise à jour pour age + 1
  console.log(age); // Affichera TOUJOURS la valeur de 'age' de ce rendu actuel
  setAge(age + 1); // Demande une autre mise à jour pour age + 1
  console.log(age); // Affichera TOUJOURS la même valeur initiale de 'age'
};
// Ce n'est que lors du PROCHAIN rendu que la variable 'age' aura la nouvelle valeur.

React "fige" la valeur de l'état pour un rendu donné afin d'assurer la cohérence de l'interface utilisateur pendant cette passe de rendu.

Conclusion : Un accès direct et simple

Lire la valeur actuelle d'une variable d'état déclarée avec `useState` est on ne peut plus simple : il suffit d'utiliser directement la première variable obtenue lors de la déstructuration du retour de `useState`.

Cette variable peut être intégrée dans le JSX via des accolades `{}` ou utilisée dans n'importe quelle logique JavaScript au sein du composant fonctionnel, en gardant à l'esprit que sa valeur est stable pour la durée d'un rendu donné.