ReactJS - Utilisation de useState : Un Guide pour Débutants

Salut à toi, futurs développeurs React ! Je suis ravi de devenir ton guide sur ce voyage passionnant dans le monde des hooks React, plus précisément le hook useState. En tant que quelqu'un qui enseigne la programmation depuis des années, je peux te dire que comprendre la gestion de l'état, c'est comme apprendre à rouler à vélo - cela pourrait sembler不稳定 au début, mais une fois que tu auras pris l'habitude, tu seras capable de zigzaguer à travers tes projets React avec facilité !

Qu'est-ce que useState et Pourquoi en Avons-Nous Besoin ?

Avant de plonger dans les détails, parlons pourquoi nous avons besoin de useState en premier lieu. Imagine que tu construis une application de compteur simple. Tu veux afficher un nombre et avoir des boutons pour l'augmenter ou le diminuer. Comment garderais-tu trace du compteur actuel ? C'est là que rentre en jeu useState !

useState est un hook React qui nous permet d'ajouter un état à nos composants fonctionnels. C'est comme donner à ton composant une mémoire pour se souvenir de choses entre les rendus.

Fonctionnalités de useState

Voyons les fonctionnalités clés de useState :

Fonctionnalité	Description
Ajouter un état aux composants fonctionnels	useState nous permet d'utiliser un état dans les composants fonctionnels, ce qui n'était auparavant possible que dans les composants de classe.
Retourne un tableau	useState retourne un tableau avec deux éléments : la valeur actuelle de l'état et une fonction pour la mettre à jour.
Peut contenir n'importe quel type de valeur	L'état peut être un nombre, une chaîne, un booléen, un objet, un tableau ou tout autre type JavaScript.
Déclenche des re-rendus	Lorsque l'état est mis à jour, cela provoque le re-rendu du composant, reflétant la nouvelle valeur de l'état.

Maintenant que nous savons ce que useState est capable de faire, voyons-le en action !

Application du Hook d'État

Commençons par un exemple simple - notre application de compteur. Voici comment nous pouvons l'implémenter en utilisant useState :

import React, { useState } from 'react';

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

return (
<div>
<p>Vous avez cliqué {count} fois</p>
<button onClick={() => setCount(count + 1)}>
Cliquez-moi
</button>
</div>
);
}

Décomposons cela :

1. Nous importons useState de React.
2. À l'intérieur de notre composant, nous appelons useState(0). Cela crée une variable d'état appelée count avec une valeur initiale de 0.
3. useState retourne un tableau, que nous déstructurons en count (la valeur actuelle de l'état) et setCount (une fonction pour mettre à jour l'état).
4. Dans notre JSX, nous affichons le compteur actuel et créons un bouton qui, lorsque cliqué, appelle setCount pour incrémenter le compteur.

Chaque fois que le bouton est cliqué, setCount est appelé, met à jour l'état et déclenche un re-rendu de notre composant avec la nouvelle valeur de count.

Variables d'État Multiples

L'une des beautés de useState est que tu peux l'utiliser plusieurs fois dans un seul composant. Élargissons notre compteur pour inclure un nom :

function NamedCounter() {
const [count, setCount] = useState(0);
const [name, setName] = useState('');

return (
<div>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Entrez votre nom"
/>
<p>{name ? `${name}'s count` : 'Count'}: {count}</p>
<button onClick={() => setCount(count + 1)}>
Incrémenter
</button>
</div>
);
}

Ici, nous utilisons useState deux fois - une fois pour notre count et une fois pour un champ de saisie de nom. Chaque variable d'état est complètement indépendante, ce qui nous permet de gérer facilement plusieurs pieces d'état.

Utilisation d'Objets comme État

Bien que l'utilisation de multiples appels useState fonctionne bien pour des pieces d'état indépendantes, il est parfois plus pratique de regrouper les états liés dans un objet. Voyons comment nous pouvons faire cela :

function UserProfile() {
const [user, setUser] = useState({
name: '',
age: 0,
hobby: ''
});

const handleChange = (e) => {
const { name, value } = e.target;
setUser(prevUser => ({
...prevUser,
[name]: value
}));
};

return (
<div>
<input
name="name"
value={user.name}
onChange={handleChange}
placeholder="Nom"
/>
<input
name="age"
type="number"
value={user.age}
onChange={handleChange}
placeholder="Âge"
/>
<input
name="hobby"
value={user.hobby}
onChange={handleChange}
placeholder="Loisir"
/>
<p>
{user.name} a {user.age} ans et aime {user.hobby}.
</p>
</div>
);
}

Dans cet exemple, nous utilisons un seul appel useState pour gérer un objet avec plusieurs propriétés. La fonction handleChange utilise l'opérateur de diffusion (...) pour créer un nouveauobjet avec toutes les propriétés précédentes, puis met à jour la propriété spécifique qui a changé.

Cette approche peut être très utile lors de la gestion de formulaires ou dans toute situation où vous avez plusieurs pieces d'état liées.

Un Mot de Précaution

Lorsque vous utilisez des objets (ou des tableaux) comme état, souvenez-vous toujours de créer un nouveau objet lors de la mise à jour de l'état, plutôt que de modifier le existant. React utilise l'égalité par référence pour déterminer si l'état a changé, donc modifier directement les propriétés d'un objet ne déclencheront pas un re-rendu.

Conclusion

Et voilà, les amis ! Nous avons traversé le pays de useState, de simples compteurs à la gestion d'états d'objets complexes. Souviens-toi, comme toute nouvelle compétence, maîtriser useState nécessite de la pratique. Ne sois pas découragé si cela ne clique pas immédiatement - continue à expérimenter, et bientôt tu将成为 un pro de la gestion de l'état !

Avant de nous séparer, voici un résumé rapide de ce que nous avons appris :

1. useState nous permet d'ajouter un état aux composants fonctionnels.
2. Il retourne un tableau avec la valeur actuelle de l'état et une fonction pour le mettre à jour.
3. Nous pouvons utiliser useState plusieurs fois pour des pieces d'état indépendantes.
4. Les objets peuvent être utilisés comme état pour regrouper des données liées.
5. Créez toujours de nouveaux objets lors de la mise à jour de l'état des objets.

Maintenant, va et crée des applications React étonnantes avec un état ! Et souviens-toi, dans le monde de React, la seule constante est le changement (d'état, c'est-à-dire !).

Credits: Image by storyset