Mémoriser la saisie avec useState

Quand vous préparez une dépense, une valeur saisie ne doit pas disparaître dès que l’interface est actualisée. React fournit useState pour mémoriser une valeur propre à un composant et demander un nouveau rendu lorsque cette valeur change. Dans cette leçon, vous ajoutez un état local au formulaire ; le lien direct entre cet état et un champ sera traité dans la leçon suivante.

Déclarer un état local

Vous avez déjà assemblé le tableau de bord avec App et ses composants de présentation. Conservez cette composition et intervenez uniquement dans FormulaireDepense.tsx. Pour revoir la structure d’un composant fonctionnel et les props, reportez-vous aux deux leçons précédentes : ici, l’objectif est de comprendre la mémoire locale, pas de modifier les autres composants.

useState reçoit une valeur initiale et renvoie deux éléments : la valeur mémorisée et une fonction qui permet de la modifier. Dans l’exemple, montant commence à zéro ; setMontant est la fonction fournie par React pour demander sa mise à jour. Le tableau est décomposé directement dans la déclaration, conformément à l’usage du hook.

import { useState } from "react";

export default function FormulaireDepense() {
  const [montant, setMontant] = useState<number>(0);

  return (
    <section className="depenses-saisie" aria-label="Saisir une dépense">
      <h2>Ajouter une dépense</h2>
      <form>
        <label>
          Description
          <input className="depenses-saisie__champ" type="text" name="description" />
        </label>
        <label>
          Montant
          <input className="depenses-saisie__champ" type="number" name="montant" />
        </label>
        <label>
          Catégorie
          <select className="depenses-saisie__champ" name="categorie">
            <option value="">Choisir une catégorie</option>
          </select>
        </label>
        <label>
          Date
          <input className="depenses-saisie__champ" type="date" name="date" />
        </label>
        <button className="depenses-saisie__bouton" type="button" onClick={() => setMontant(montant + 1)}>
          Ajouter 1 € à la valeur mémorisée
        </button>
      </form>
      <p>Valeur mémorisée : {montant} €</p>
    </section>
  );
}

Le bouton de démonstration met à jour l’état d’une unité afin de rendre le mécanisme observable : chaque clic demande à React de remplacer la valeur par montant + 1. Le texte affiché est calculé à partir de l’état courant. Après le clic, React relance le rendu du composant et utilise la nouvelle valeur ; l’état n’est donc pas une simple variable locale réinitialisée à chaque exécution.

Valeur initiale et mise à jour

Le type générique number précise ici que l’état contient un nombre ; il reste cohérent avec une valeur de montant. La valeur initiale sert au premier rendu, avant toute mise à jour. Ensuite, la fonction renvoyée par useState est le moyen de demander un changement : modifier une variable ordinaire déclarée pendant le rendu ne remplacerait pas correctement cette valeur mémorisée.

Dans cette étape, l’état et le champ de montant coexistent volontairement sans être reliés. Vous pourrez ainsi isoler le rôle de useState avant d’apprendre à synchroniser une saisie avec une valeur React. Lors de la prochaine leçon, vous remplacerez cette démonstration par un champ dont la valeur et les changements sont gérés par l’état.

À retenir

• Importez useState depuis react pour créer un état local dans un composant fonctionnel.
• La valeur donnée à useState constitue l’état initial, ici le nombre 0.
• Le hook fournit la valeur courante et une fonction de mise à jour.
• Demandez une mise à jour avec cette fonction pour que React rende le composant avec la nouvelle valeur.

Dans la prochaine leçon, vous relierez cet état au champ de montant afin de conserver et refléter la saisie.