Logo

useState en React : Gérer l'état local de vos composants

Introduction

Lorsque vous développez des applications React, vous aurez souvent besoin de suivre et de mettre à jour des données qui changent au fil du temps dans un composant.

Le hook useState est votre outil principal pour gérer ces changements d'état de manière simple et directe.

1. Comprendre l'état local

L'état local représente les données qui peuvent changer et qui sont propres à un composant. Ces données influencent le rendu et le comportement de votre interface.

  • Données spécifiques à un composant
  • Peut être modifié au cours du temps
  • Déclenche un nouveau rendu quand il change
  • Isolé à l'intérieur du composant

2. Syntaxe de base de useState

La déclaration de useState suit un modèle simple de déstructuration : `const [state, setState] = useState(valeurInitiale)`.

import React, { useState } from 'react';

function Exemple() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Fermer' : 'Ouvrir'}
      </button>
      {isOpen && <p>Contenu caché</p>}
    </div>
  );
}

3. Comprendre le fonctionnement

Dans l'exemple précédent, `isOpen` est l'état actuel, et `setIsOpen` est la fonction qui permet de le modifier.

  • `useState(false)` initialise l'état à `false`
  • `setIsOpen(true)` change la valeur à `true`
  • `setIsOpen(!isOpen)` inverse la valeur courante

4. Exemples de cas d'usage

// Compteur
const [count, setCount] = useState(0);
const increment = () => setCount(count + 1);

// Formulaire
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => setInputValue(e.target.value);

5. Bonnes pratiques

  • Initialiser avec une valeur par défaut adaptée
  • Nommer clairement vos états et fonctions de mise à jour
  • Utiliser des fonctions de mise à jour pour les états complexes

Exemple avancé : Gestion d'état complexe

function FormulaireProfil() {
  const [profil, setProfil] = useState({
    nom: '',
    email: '',
    accepteNewsletter: false
  });

  const mettreAJourProfil = (champ, valeur) => {
    setProfil(prev => ({
      ...prev,
      [champ]: valeur
    }));
  };

  return (
    <form>
      <input
        value={profil.nom}
        onChange={(e) => mettreAJourProfil('nom', e.target.value)}
      />
    </form>
  );
}

Conclusion

useState permet de gérer simplement l'état local dans vos composants React, en offrant une approche déclarative pour suivre et mettre à jour les données.

Logo