useState : La gestion d'état dans vos composants React

Publié le 22 novembre 2024

Dans le développement React, la gestion d'état est une notion importante à appréhender. Le hook useState est souvent le premier outil qu'on apprend pour gérer l'état local dans les composants fonctionnels. Dans cet article nous allons découvrir le fonctionnement du hook useState. Mais d'abord, qu'est-ce qu'un hook ?

C'est quoi un hook ?

Les hooks sont des fonctions introduites dans React 16.8 qui permettent d'ajouter des fonctionnalités comme la gestion d'état ou le cycle de vie à des composants fonctionnels. Ils simplifient la logique des composants en remplaçant le besoin de classes, rendant le code plus lisible et réutilisable.

Par exemple, useState est un hook qui permet de gérer l'état local, et useEffect gère les effets de bord comme les appels d'API ou les abonnements.

Qu'est-ce que useState ?

useState est un hook fourni par React qui permet d'ajouter un état local à des composants fonctionnels. Il retourne un tableau contenant deux éléments :

La valeur actuelle de l'état
Une fonction pour mettre à jour cet état

Il remplace efficacement l'utilisation des classes pour la gestion d'état dans les composants modernes.

Comment utiliser useState ?

L'utilisation de useState est simple. Voici un exemple basique où nous gérons un compteur :

import React, { useState } from 'react';
    
function Counter() {
    const [count, setCount] = useState(0); // Déclare un état local

    return (
        <div>
            <p>Le compteur est à : {count}</p>
            <button onClick={() => setCount(count + 1)}>Incrémenter</button>
        </div>
    );
}

export default Counter;

Dans cet exemple :

useState(0) initialise l'état avec une valeur de 0.
count contient la valeur actuelle de l'état.
setCount est une fonction utilisée pour mettre à jour l'état.

Pourquoi utiliser useState ?

Voici quelques avantages clés de useState :

Simplicité : Facile à comprendre et à implémenter.
Localisation : Permet de gérer l'état au sein d'un seul composant, sans interférence globale.
Interopérabilité : Fonctionne avec d'autres hooks comme useEffect pour des comportements complexes.

Erreurs courantes avec useState

État non initialisé correctement : Veillez à passer une valeur par défaut cohérente lors de l'initialisation.
Mises à jour asynchrones : Évitez d'utiliser la valeur actuelle de l'état directement dans des fonctions de mise à jour. Utilisez une fonction de mise à jour basée sur l'état précédent :
```
setCount(prevCount => prevCount + 1);
```
Redondance dans les appels : Ne pas appeler plusieurs fois setState inutilement dans une même exécution.

FAQ : Questions Fréquentes sur useState

Combien d'états puis-je créer dans un seul composant ?

Il n'y a pas de limite au nombre de useState que vous pouvez déclarer dans un composant. Utilisez-en autant que nécessaire pour structurer votre logique.

Puis-je utiliser `useState` avec des objets ?

Oui, mais veillez à toujours créer une nouvelle copie de l'objet lors de la mise à jour :

setUser(prevUser => ({
    ...prevUser,
    name: 'Nouvelle valeur'
}));

Quand devrais-je éviter d'utiliser useState ?

useState convient parfaitement pour gérer un état local simple dans un composant. Cependant, il peut ne pas être adapté dans les cas suivants :

Lorsque l'état devient trop complexe, comme un objet avec plusieurs niveaux d'imbrication. Dans ce cas, préférez useReducer, qui est conçu pour gérer des états complexes et des mises à jour plus structurées.
Si l'état doit être partagé entre plusieurs composants, il est souvent préférable d'utiliser un gestionnaire d'état global comme useContext ou une bibliothèque comme Redux.
Lorsque l'état dépend fortement de données externes, comme une API ou une base de données. Utiliser useState dans ce contexte peut entraîner des problèmes de synchronisation ; préférez un outil comme React Query ou un custom hook pour gérer ces données.

Choisir le bon outil pour la gestion d'état dépend du contexte et des besoins spécifiques de votre application.

Sources

Mots clés

JavaScript