Mise à jour de l'état (Fonction de mise à jour)

Le déclencheur du changement

Nous avons déclaré notre état avec `useState` et nous savons comment lire sa valeur actuelle. Mais comment faire évoluer cet état ? Comment faire passer notre compteur de 0 à 1, ou mettre à jour le champ de saisie lorsque l'utilisateur tape du texte ? C'est là qu'intervient le deuxième élément crucial retourné par `useState` : la fonction de mise à jour (souvent appelée "fonction setter").

Cette fonction est le seul moyen légitime de modifier la valeur d'une variable d'état gérée par `useState`. L'appeler ne modifie pas seulement la valeur en mémoire, mais surtout, elle signale à React qu'un changement d'état a eu lieu et qu'un nouveau rendu du composant est nécessaire pour refléter ce changement à l'écran. C'est le coeur de la réactivité dans React.

// Déclaration
const [etat, setEtat] = useState(valeurInitiale);

// 'setEtat' est la fonction de mise à jour

Comment utiliser la fonction de mise à jour

Pour mettre à jour l'état, vous appelez simplement la fonction setter en lui passant la nouvelle valeur souhaitée comme argument. Cette nouvelle valeur remplacera complètement l'ancienne valeur de l'état.

import React, { useState } from 'react';

function ChangeurCouleur() {
  // Etat pour stocker la couleur actuelle, initialisée à 'bleu'
  const [couleur, setCouleur] = useState('blue');

  // Gestionnaire pour changer la couleur en rouge
  const passerAuRouge = () => {
    // Appel de la fonction setter avec la nouvelle valeur
    setCouleur('red'); 
  };

  // Gestionnaire pour changer la couleur en vert
  const passerAuVert = () => {
    setCouleur('green');
  };

  return (
    

      La couleur actuelle est : {couleur}
      

        Passer au Rouge
        Passer au Vert
      
    
  );
}

export default ChangeurCouleur;

Dans cet exemple :

• Initialement, `couleur` vaut `'blue'`, le fond est bleu.
• Si l'utilisateur clique sur "Passer au Rouge", `passerAuRouge` est appelée.
• `setCouleur('red')` est exécuté. Cela planifie une mise à jour de l'état `couleur` pour qu'il devienne `'red'` et demande un re-rendu.
• React relance le rendu de `ChangeurCouleur`.
• Lors de ce nouveau rendu, `useState('blue')` retourne maintenant la valeur actuelle `'red'` et la même fonction `setCouleur`.
• Le JSX est rendu avec `couleur` valant `'red'`, le fond devient donc rouge.

Le processus est similaire si l'utilisateur clique sur "Passer au Vert".

Rappel : Ne pas modifier l'état directement !

Il est fondamental de répéter qu'il ne faut jamais essayer de modifier la variable d'état directement. Faire ceci :

// INCORRECT !
couleur = 'red';

...ne fonctionnera pas comme attendu pour plusieurs raisons :

1. Cela ne déclenchera pas de re-rendu du composant. L'interface utilisateur ne sera pas mise à jour.
2. Si la variable a été déclarée avec `const`, cela générera une erreur JavaScript.
3. Cela va à l'encontre du modèle de fonctionnement de React et peut entraîner des comportements imprévisibles.

Utilisez toujours la fonction setter (`setCouleur` dans notre exemple) fournie par `useState` pour modifier l'état.

Mises à jour et Asynchronisme (Concept clé)

Un point important à comprendre est que les mises à jour d'état planifiées avec la fonction setter ne sont pas forcément immédiates et synchrones. React peut décider de les traiter de manière asynchrone et de les regrouper (batching) pour optimiser les performances, surtout si plusieurs appels `setEtat` se produisent dans le même gestionnaire d'événement ou dans le même cycle de vie.

Cela a une implication majeure : vous ne pouvez pas vous fier à la valeur de la variable d'état immédiatement après avoir appelé sa fonction setter dans le même bloc de code. La variable d'état conservera sa valeur du rendu *précédent* jusqu'à ce que le *prochain* rendu ait lieu.

function ExempleAsync() {
  const [valeur, setValeur] = useState(0);

  const mettreAJour = () => {
    setValeur(1);
    console.log(valeur); // Affiche encore 0 ici !
    
    setValeur(2);
    console.log(valeur); // Affiche toujours 0 ici !
    // Au prochain rendu, 'valeur' sera 2 (la dernière mise à jour planifiée l'emporte généralement)
  };
  // ...
}

Ce comportement asynchrone est crucial à comprendre pour éviter des bugs liés à l'attente d'une mise à jour immédiate. Nous verrons dans la section suivante comment gérer les cas où la nouvelle valeur d'état dépend de la valeur précédente.

Conclusion : L'outil pour faire évoluer l'état

La fonction de mise à jour retournée par `useState` est le mécanisme essentiel pour modifier l'état local d'un composant fonctionnel. En l'appelant avec la nouvelle valeur souhaitée, vous demandez à React de mettre à jour l'état et de déclencher un nouveau rendu pour que l'interface utilisateur reflète ce changement.

Il est impératif d'utiliser cette fonction et de ne jamais muter l'état directement. Comprendre la nature potentiellement asynchrone de ces mises à jour est également clé pour écrire une logique d'état correcte et fiable.