Déclaration d'une variable d'état

Initialiser la mémoire du composant

La première étape pour utiliser l'état dans un composant fonctionnel est de le déclarer. Déclarer une variable d'état signifie indiquer à React qu'il doit suivre une certaine donnée pour ce composant, lui donner une valeur initiale, et nous fournir les moyens de lire et de mettre à jour cette donnée. C'est précisément ce que fait le Hook `useState`.

Comme mentionné précédemment, `useState` doit être appelé au niveau supérieur de votre composant fonctionnel (pas dans des conditions, des boucles, ou des fonctions imbriquées). Vous devez également vous assurer d'avoir importé `useState` depuis 'react'.

import React, { useState } from 'react';

L'appel à `useState` et sa valeur de retour

Vous appelez la fonction `useState()` en lui passant un unique argument : la valeur initiale de l'état que vous souhaitez créer. Cette valeur initiale ne sera utilisée que lors du tout premier rendu du composant. Lors des rendus suivants, React se souviendra de la valeur actuelle de l'état et l'utilisera à la place.

La valeur initiale peut être de n'importe quel type JavaScript : un nombre, une chaîne de caractères, un booléen, `null`, `undefined`, un tableau, un objet, etc.

La fonction `useState` retourne ensuite un tableau contenant exactement deux éléments :

1. L'état actuel : La valeur courante de la variable d'état (qui sera la valeur initiale lors du premier rendu).
2. La fonction de mise à jour : Une fonction spéciale que vous utiliserez plus tard pour modifier la valeur de l'état.

La syntaxe de déclaration avec déstructuration

La manière idiomatique et quasi universelle de récupérer ces deux éléments retournés par `useState` est d'utiliser la syntaxe de déstructuration de tableau ES6.

const [nomDeLaVariableEtat, setNomDeLaVariableEtat] = useState(valeurInitiale);

Expliquons cette ligne en détail :

• `const [...]` : Nous déclarons des constantes (ou des variables avec `let` si nécessaire, mais `const` est courant car on ne réassigne pas le tableau lui-même).
• `[nomDeLaVariableEtat, setNomDeLaVariableEtat]` : C'est la déstructuration de tableau. Nous assignons le premier élément du tableau retourné par `useState` à la variable `nomDeLaVariableEtat` et le second élément (la fonction de mise à jour) à la variable `setNomDeLaVariableEtat`.
• `useState(valeurInitiale)` : L'appel au Hook avec la valeur de départ souhaitée.

L'avantage de la déstructuration de tableau ici est que vous pouvez choisir les noms que vous voulez pour votre variable d'état et sa fonction de mise à jour. La convention forte est d'utiliser un nom descriptif pour l'état (ex: `count`, `isModalOpen`, `userName`) et le même nom préfixé par `set` pour la fonction de mise à jour (ex: `setCount`, `setIsModalOpen`, `setUserName`).

Exemples :

function ExemplesDeclaration() {
  // Déclare une variable d'état 'score' initialisée à 0
  const [score, setScore] = useState(0);

  // Déclare une variable d'état 'message' initialisée à '' (chaîne vide)
  const [message, setMessage] = useState('');

  // Déclare une variable d'état 'isActive' initialisée à false
  const [isActive, setIsActive] = useState(false);

  // Déclare une variable d'état 'user' initialisée à null
  const [user, setUser] = useState(null);
  
  // Déclare une variable d'état 'items' initialisée avec un tableau vide
  const [items, setItems] = useState([]);

  // Déclare une variable d'état 'config' initialisée avec un objet
  const [config, setConfig] = useState({ theme: 'light', notifications: true });

  // ... reste du composant où vous pouvez maintenant lire 'score', 'message', etc.
  // ... et appeler setScore, setMessage, etc. pour les modifier.

  return (
    

      
Score initial : {score}
      
Message initial : "{message}"
      
Actif initialement : {isActive ? 'Oui' : 'Non'}
    
  );
}

Déclarations multiples

Comme montré dans l'exemple ci-dessus, vous pouvez appeler `useState` autant de fois que nécessaire dans un même composant pour déclarer différentes variables d'état indépendantes. Chaque appel à `useState` crée une "case mémoire" distincte gérée par React.

Conclusion : L'acte de naissance de l'état

La déclaration d'une variable d'état via `const [etat, setEtat] = useState(initial);` est la première étape fondamentale pour utiliser l'état local dans un composant fonctionnel. Cette syntaxe concise, combinant l'appel au Hook `useState` avec la déstructuration de tableau, vous permet de définir la valeur initiale de votre état et d'obtenir immédiatement la variable pour lire sa valeur actuelle ainsi que la fonction pour la modifier ultérieurement.