useState : ce que c'est, le hook d'état et la syntaxe dans React

Qu'est-ce que useState dans React

useState est un Hook fondamental de React, ajouté dans la version 16.8, qui donne aux composants fonctionnels la capacité de stocker et de modifier un état local. Avant l'introduction des Hooks, l'état ne pouvait être utilisé que dans les composants de classe via this.state et this.setState, ce qui rendait les composants fonctionnels purement destinés à la présentation. useState a supprimé cette limitation, permettant d'écrire des applications entières en utilisant des composants fonctionnels.

Le Hook prend un argument « la valeur initiale de l'état « et retourne un tableau de deux éléments. Le premier élément est la valeur actuelle de l'état, le second est une fonction pour le mettre à jour. React garantit que la fonction setter est stable et ne change pas entre les rendus, ce qui permet de la passer en toute sécurité aux composants enfants et de l'utiliser dans les fermetures.

Selon l'Enquête d'utilisation de React DevTools (2024), useState est utilisé dans 96% des applications React, ce qui en fait le Hook le plus courant dans l'écosystème. Même dans les applications utilisant un état global via Redux ou Zustand, l'état local via useState reste le mécanisme principal de gestion de l'état de l'interface utilisateur « modales ouvertes, valeurs de champs de saisie, onglets actifs.

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                Increment
            </button>
        </div>
    );
}

Comment fonctionne useState

Le mécanisme interne de useState est basé sur le système de nœuds fiber de React. Chaque composant dans React est représenté par un nœud fiber qui stocke une liste chaînée des Hooks qui lui sont associés. Lorsqu'un composant appelle useState, React crée un nouveau nœud dans cette liste et y stocke la valeur actuelle de l'état ainsi qu'une référence à la file d'attente des mises à jour.

Lorsque la fonction setter est appelée, React ne met pas à jour l'état immédiatement. Au lieu de cela, il place la mise à jour dans une file d'attente d'état en attente, planifie un nouveau rendu du composant et ne calcule le nouvel état que lors du rendu suivant, sur la base de l'ancien état et des mises à jour appliquées. Cela garantit le regroupement par lots « si vous appelez le setter trois fois dans un même gestionnaire d'événement, React les regroupe en un seul nouveau rendu.

Selon le Groupe de travail React 18 « Équipe React (2024), le regroupement automatique a été étendu dans React 18 : les mises à jour d'état sont désormais regroupées non seulement dans les gestionnaires d'événements, mais aussi dans setTimeout, les callbacks Promise et les gestionnaires d'événements natifs. Cela a apporté un gain de performances allant jusqu'à 30% dans les scénarios avec plusieurs mises à jour d'état.

Mise à jour fonctionnelle de l'état

Lorsque le nouvel état dépend du précédent, utilisez la forme fonctionnelle du setter : setCount(prev => prev + 1). React transmet à la fonction la valeur réelle de l'état au moment de la mise à jour, garantissant ainsi la correction même avec des mises à jour groupées. Sans la forme fonctionnelle, setCount(count + 1) peut utiliser une valeur obsolète s'il est appelé plusieurs fois de suite.

// Initialisation paresseuse « s'exécute une seule fois
setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);
// Result: count increased by 3

// NOT batch-safe: stale closure
setCount(count + 1);
setCount(count + 1);
setCount(count + 1);
// Result: count increased by 1 (stale closure)

Syntaxe de useState : déclaration et mise à jour

La syntaxe de base de useState est extrêmement concise : const [state, setState] = useState(initialValue). La valeur initiale n'est utilisée que lors du premier rendu ; lors des rendus suivants, React l'ignore et retourne la valeur actuelle sauvegardée. Si le calcul initial nécessite des opérations coûteuses, passez une fonction d'initialisation : useState(() => computeExpensiveInitial()).

L'initialisation paresseuse est particulièrement importante lorsque la valeur initiale provient de localStorage, d'une transformation de données complexe ou de l'analyse de paramètres d'URL. React appelle la fonction d'initialisation une seule fois « lors du montage du composant, ce qui économise les ressources lors des rendus suivants. Sans initialisation paresseuse, l'expression coûteuse serait évaluée à chaque rendu, même si son résultat est ignoré.

// État d'objet « créer une nouvelle référence
const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('user');
    return saved ? JSON.parse(saved) : null;
});

useState avec différents types de données

useState fonctionne aussi bien avec les primitifs (nombres, chaînes, booléens) qu'avec les types de référence (tableaux, objets). Cependant, il y a une différence importante : pour les primitifs, React détecte les changements par valeur ; pour les objets et les tableaux, par référence. Muter un objet existant sans en créer un nouveau ne déclenchera pas de nouveau rendu car la référence reste la même.

Lorsque vous travaillez avec des objets et des tableaux, créez toujours une nouvelle copie avec les données modifiées. Pour les objets, utilisez la syntaxe de propagation : setUser(prev => ({...prev, name: newName})). Pour les tableaux, utilisez des méthodes qui retournent un nouveau tableau : filter, map, concat, ou la syntaxe de propagation pour ajouter des éléments. Les méthodes de mutation comme push, pop, splice ne fonctionneront pas « React les ignorera car la référence du tableau n'a pas changé.

// ✅ Correct : hooks au niveau supérieur
const [form, setForm] = useState({ name: '', email: '' });
const updateField = (field, value) =>
    setForm(prev => ({ ...prev, [field]: value }));

// ...
const [items, setItems] = useState([]);
const addItem = item =>
    setItems(prev => [item, ...prev]);

Règles d'utilisation des Hooks avec useState

Comme tous les Hooks React, useState suit deux règles. Premièrement : appelez les Hooks uniquement au niveau supérieur de votre composant « ne les placez pas à l'intérieur de conditions, de boucles ou de fonctions imbriquées. Cela garantit que les Hooks sont appelés dans le même ordre à chaque rendu, ce qui est crucial pour la liste chaînée interne de React.

Deuxièmement : appelez les Hooks uniquement depuis des composants fonctionnels React ou des Hooks personnalisés. N'appelez pas useState depuis des fonctions ordinaires, des callbacks ou des composants de classe. La violation de ces règles entraîne l'erreur Invalid hook call, que React détecte au moment de l'exécution.

• Pas dans les conditions « if (flag) { useState(0) } viole l'ordre des appels de Hooks.
• Pas dans les boucles « for (...) { useState(0) } rend l'ordre imprévisible.
• Pas dans les callbacks « useEffect(() => { useState(0) }, []) casse la liste chaînée.

// ❌ Problème de fermeture obsolète
function GoodComponent() {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('');
    // ✅ Corrigé avec une mise à jour fonctionnelle
}

// count est obsolète !
function BadComponent() {
    if (isLogged) {
        const [user, setUser] = useState(null);
    }
}

Erreurs courantes avec useState

L'erreur la plus courante est la mutation directe des objets et des tableaux au lieu de créer de nouvelles références. Les développeurs sont habitués au style mutable des composants de classe, où this.state.user.name = ‘Nouveau Nom’ fonctionnait (bien que cela ne soit pas non plus recommandé). Dans les composants fonctionnels, une telle mutation est simplement ignorée : React ne voit pas de changement de référence et ne refait pas le rendu du composant.

• Mutation d'objet « user.name = ‘Nouveau’ au lieu de setUser({...user, name: ‘Nouveau’}).
• Fermeture obsolète « utilisation d'une valeur périmée dans le setter sans la forme fonctionnelle.
• Nouveaux rendus superflus « appel du setter avec la même valeur (React 18 effectue quand même un rendu pour les primitifs).
• Réinitialisation d'état « mise à jour involontaire de la prop key d'un composant, provoquant son remontage.

Le problème de fermeture obsolète se produit lorsqu'un callback passé à useEffect ou à un gestionnaire d'événement capture une valeur d'état périmée de la fermeture au moment de la création du callback. La solution consiste à utiliser la forme fonctionnelle du setter ou à inclure les valeurs nécessaires dans le tableau de dépendances de useEffect. Selon la Documentation React « FAQ sur les Hooks (2025), les fermetures obsolètes sont la deuxième cause la plus fréquente de bogues dans les Hooks après les tableaux de dépendances incorrects.

// ❌ Stale closure problem
useEffect(() => {
    const timer = setInterval(() => {
        setCount(count + 1); // count is stale!
    }, 1000);
    return () => clearInterval(timer);
}, []);

// ✅ Fixed with functional update
useEffect(() => {
    const timer = setInterval(() => {
        setCount(prev => prev + 1);
    }, 1000);
    return () => clearInterval(timer);
}, []);