ReactJS useState Hook : guide du débutant

Introduction

ReactJS, une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur, introduit des hooks pour simplifier et améliorer la logique des composants. L’un des hooks les plus couramment utilisés dans React est le hook useState, qui gère l’état d’un composant. Comprendre comment cela fonctionne peut vous aider à libérer tout le potentiel de React.

Dans ce guide du débutant, nous explorerons ce que sont les hooks, comment initialiser et mettre à jour l'état avec useState, et nous plongerons dans la conservation et la mise à jour de différents types d'état. À la fin, vous serez en mesure de gérer en toute confiance l’état de vos composants. Allons-y !

Que sont les crochets ?

Crochets dans React

Hooks sont des fonctions qui vous permettent d'utiliser state et d'autres fonctionnalités de React sans écrire de composant de classe. Avant les hooks, la gestion de l’état des composants n’était possible qu’à l’intérieur des composants de classe. Avec des hooks comme useState, vous pouvez ajouter un état aux composants fonctionnels, les rendant plus polyvalents.

React fournit plusieurs hooks, tels que :

• useState – pour gérer l’état.
• useEffect – pour les effets secondaires comme la récupération de données.
• useContext – pour gérer le contexte au sein de votre application.

Les hooks simplifient la gestion de l'état et réduisent le besoin de composants complexes basés sur les classes. La beauté des hooks réside dans leur capacité à fournir les fonctionnalités dont vous avez besoin tout en conservant un code plus propre et plus lisible.

Comment initialiser useState

Initialisation de base

L'initialisation de useState dans un composant fonctionnel est simple. Cela commence par importer le hook depuis React et l'appeler dans votre composant. La syntaxe ressemble à ceci :

import React, { useState } from 'react';

function Counter() {
  // Declare state variable and its updater function
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

Panne:

• useState(0) initialise l'état avec une valeur initiale de 0.
• count est la variable d'état, et setCount est la fonction utilisée pour mettre à jour cet état.
• Chaque fois que vous cliquez sur le bouton, l'état est mis à jour et le composant s'affiche à nouveau avec la nouvelle valeur.

Comment lire l'état

Accéder à l'état actuel

La lecture de l'état actuel est simple. Vous utilisez simplement la variable d'état (count dans l'exemple précédent) directement dans votre JSX. Étant donné que React restitue le composant lorsque l'état change, la valeur mise à jour est automatiquement reflétée dans l'interface utilisateur.

Modifions notre exemple précédent pour montrer comment nous pouvons accéder à l'état :

Current count: {count}

Ce code accède à l'état du décompte et l'affiche dynamiquement.

Comment mettre à jour l'état

Utilisation de la fonction State Setter

La mise à jour de l'état dans React est effectuée à l'aide du deuxième élément de useState, qui est la fonction setter. Cette fonction prend la valeur mise à jour et restitue le composant avec ce nouvel état.

Voici un exemple de comment incrémenter et décrémenter un compteur :

 setCount(count   1)}>Increment
 setCount(count - 1)}>Decrement

React garantit que chaque fois que l'état est mis à jour, les modifications sont reflétées de manière transparente dans l'interface utilisateur. Il est important de se rappeler que les mises à jour d'état sont asynchrones dans React, ce qui signifie que vous ne verrez pas toujours l'état mis à jour immédiatement après avoir appelé la fonction setter.

Que peut détenir l’État ?

Différents types de valeurs

L'état dans React peut contenir une variété de types de données, notamment :

• Types primitifs comme les nombres, les chaînes et les booléens.
• Objets et tableaux.
• Valeurs Null et non définies.

Regardons des exemples :

Tenir une chaîne dans l'état :

const [name, setName] = useState("John");

Maintenir un tableau dans l'état :

const [items, setItems] = useState([1, 2, 3]);

Maintenir un objet dans l'état :

const [user, setUser] = useState({ name: "John", age: 30 });

Le hook useState de React vous permet de gérer ces différents types de données, mais des précautions doivent être prises lors de la mise à jour de types complexes, comme les objets et les tableaux, comme nous l'explorerons ensuite.

Mise à jour des objets et des tableaux dans l'état

Mises à jour immuables

Lorsque vous travaillez avec des objets ou des tableaux dans React, il est crucial de les mettre à jour de manière immuable. React ne compare pas en profondeur les objets imbriqués, donc la modification directe d'un objet ne déclenchera pas de nouveau rendu. Au lieu de cela, vous devez créer un nouvel objet ou un tableau avec les valeurs mises à jour.

Exemple : mise à jour d'un objet

const [user, setUser] = useState({ name: "John", age: 30 });

function updateName() {
  setUser(prevState => ({
    ...prevState,
    name: "Doe"
  }));
}

Dans cet exemple :

• Nous répartissons l'état existant (prevState) dans un nouvel objet en utilisant ...prevState.
• Ensuite, nous modifions la propriété name sans muter l'objet utilisateur d'origine.

Exemple : mise à jour d'un tableau

const [items, setItems] = useState([1, 2, 3]);

function addItem() {
  setItems(prevItems => [...prevItems, 4]);
}

Ici:

• Nous répartissons le tableau précédent (prevItems) et ajoutons le nouvel élément (4), créant ainsi un nouveau tableau.

Section FAQ

Pourquoi utiliser useState plutôt que l'état basé sur les classes ?

Les hooks, comme useState, simplifient la gestion de l'état au sein des composants fonctionnels, rendant le code plus lisible et moins encombré par rapport aux composants de classe.

useState peut-il contenir plusieurs types de données ?

Oui, useState peut contenir des chaînes, des nombres, des tableaux, des objets, des booléens et même des valeurs nulles ou non définies.

La mise à jour de l’état est-elle asynchrone ?

Oui, React met à jour les lots vers l'état et les modifications peuvent ne pas être reflétées immédiatement après l'appel de la fonction setter.

Comment mettre à jour des états complexes comme des objets ou des tableaux ?

Pour éviter de muter l'état d'origine, créez toujours une copie de l'objet ou du tableau, puis mettez-la à jour de manière immuable à l'aide de l'opérateur de propagation (...).

Conclusion

Le hook useState est l'un des hooks les plus puissants et les plus fréquemment utilisés dans React. Il vous aide à gérer l'état local au sein des composants fonctionnels, rendant votre code React plus propre et plus efficace. Que vous manipuliez des variables simples ou des objets et tableaux complexes, comprendre comment utiliser et mettre à jour correctement l'état est essentiel pour créer des applications React dynamiques. Continuez à vous entraîner et bientôt vous maîtriserez facilement la gestion de l'état de React !

Maintenant que vous êtes passé de zéro à héros avec useState, essayez de l'incorporer dans vos projets et voyez la magie de React en action !