Comprendre le hook useState ReactJS

L'Équipe Alphorm
L'Équipe Alphorm Ajouter un commentaire 8e lecture en min

Dans notre article précédent, nous avons exploré les fondamentaux de ReactJS, notamment la manipulation des props à travers les composants. Aujourd’hui, nous allons approfondir notre compréhension de ReactJS en nous concentrant sur le hook useState Reactjs , essentiel depuis la version 16.8 pour la gestion de l’état local dans les composants fonctionnels. Cet article vous guide à travers l’utilisation du hook useState avec des exemples pratiques et des exercices pour solidifier vos connaissances.

 

Explication du hook useState en ReactJS

Usestate : déjà c’est la notion la plus importante en reactJS, donc encore une fois vous avez fait un bon choix si vous êtes débutant sur cette technologie reactJS, et de même si vous voulez juste approfondir vos compétences en reactJS car depuis la version 16.8, les composants fonctionnels sont responsables de la gestion de la notion d’état (ou state).

Dans la partie précédente, nous avons vu comment manipuler les props à travers les composants, pour les adapter en fonction des données à afficher.

Mais comment faire pour permettre à nos utilisateurs d’interagir avec ces données ? Qu’ils puissent agir sur notre application, entrer des informations ou modifier les données affichées ?

Par exemple comment faire quelque chose comme ceci en reactJS :

Exemple d'implémentation du hook useState avec ReactJS
Illustration de l'utilisation du hook useState pour gérer l'état local dans un composant React.
Deuxième exemple montrant l'utilisation du hook useState dans ReactJS.
Approfondissement de l'utilisation du hook useState pour des cas plus complexes


Ça semble pratique non !? vous pouvez augmenter ou diminuer la valeur du compteur en cliquant sur le bouton de votre choix. Tout cela rend possible grâce à l’utilisation de hook useState en reactJS.

Passons maintenant aux programmations pour l’implémenter : Créons un composant compteur.js dans le dossier component : src/component/compteur.js

				
					import { useState } from "react";
export default function Compteur(){
// declaration d'un etat
const [count,setCount]  = useState(0)
return(
<div>
<p>Compteur:{count}</p>
<button onClick={()=>setCount(count+1)}>Augmenter</button>
<button onClick={()=> setCount(count-1)}>Diminuer</button>
</div>
);
}
				
			


Tout semble compréhensif non.

Il y a cette ligne :

				
					import { useState } from "react";
				
			

Le code importe le hook useState Reactjs depuis la bibliothèque React. useState est un Hook qui permet au composant de maintenir un état local.

Et puis, cette ligne :

				
					const [count,setCount] = useState(0)
				
			


C’est une manière de déclarer un état tels que :

  • count : est la variable d’état qui stocke la valeur actuelle du compteur.
  • setCount : est une fonction que vous utiliserez pour mettre à jour la valeur de count.
  • useState(0) : initialise count à 0, la valeur initiale du compteur.

Le composant rend un élément <div> contenant un paragraphe affichant la valeur actuelle du compteur.

Deux boutons sont également rendus. Lorsque vous cliquez sur le bouton « Augmenter », la fonction setCount est appelée avec la valeur actuelle de ‘count’ augmentée de 1. De même, le bouton « Diminuer » diminue la valeur de count de 1.

Ensuite, il faut importer votre composant et l’appeler dans le fichier index.js, voyez sa structure maintenant :

				
					import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/index.css'
import Compteur from './component/compteur';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Compteur/>
</React.StrictMode>
);
				
			


Voyons le résultat apres avoir lancer notre application :

Capture d'écran montrant le résultat d'un exercice réalisé avec le hook UseState ReactJS
Aperçu du résultat final d'un exercice pratique avec React

Mais, vous maitrisez comment manipuler le hook useState Reactjs pour un objectif précis. Passons maintenant aux exercices d’application.

 Pour approfondir vos connaissances et maîtriser pleinement ReactJS, découvrez notre formation vidéo sur React.

Exercice pratique : Utilisation de hook useState Reactjs

On va travailler ensemble sur un deuxième exercice pour bien assimiler les connaissances que nous avons acquises jusqu’à présent concernant le hook useState Reactjs. L’exercice consiste à afficher deux éléments d’état : une image et un bouton. Lorsque l’utilisateur arrive sur notre page, on lui montre une image par défaut et un bouton pour lui permettre de choisir s’il souhaite masquer ou afficher l’image. Je vous invite à découvrir l’image ci-dessous :

Début d'un exercice d'application sur ReactJS affichant le code initial.
Étape initiale de l'exercice d'application sur React
Progression de l'exercice d'application avec le hook UseState ReactJS avec ajout de fonctionnalités
Avancement dans l'exercice d'application sur React


Vous comprenez l’objectif sur ce deuxième exercice, passons alors à l’implémentation de notre code.

Affichage des états avec le hook useState Reactjs

On s’intéresse tout d’abord à l’affichage de l’image et le bouton. Du coup créons maintenant le composant image :

src/component/image .js

				
					import '../styles/image.css'
import React, { useState } from 'react';
export default function Image() {
return(
<section>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="image2.jpg"/><noscript><img decoding="async" src="image2.jpg"/></noscript>
<button>Voir/cacher</button>
</section>
)
}
				
			


Et puis on ajoute un peu de css pour bien ajouter une mise en page sur notre affichage.

Donc, créons le fichier image.css dans le dossier src/styles/image.css

				
					section button{
display: block;
margin-toprgin: auto;
margin-top: 20px;
padding: 7px 15px;
border-radius :5px;
border : none;
background-color : #000;
color: #ccc;
cursor: pointer;
}
section button:hover {
background-color :#ccc;
color : #000;
}
				
			

Mise en place des états avec useState

Maintenant, on passe au principal objectif de notre exercice. Regardons la modification dans notre composant.

				
					import {useState} from 'react';
import '../styles/image.css'
export default function Image() {
const [voir,setVoir]      = useState(true)
const [ bt,setBt] = useState('cacher')
function afficher(){
setVoir(!voir)
if(bt == 'cacher'){
setBt('voir')
}else{
setBt('cacher')
}
}
return(
<section>
{
(voir)?
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" data-lazy-src="image2.jpg"/><noscript><img decoding="async" src="image2.jpg"/></noscript> : null
}
<button onClick = {afficher}>{bt}</button>
</section>
)
}
				
			


const [voir, setVoir] =
useState(true)
: Déclare une variable d’état (voir) en utilisant le hook useState Reactjs avec une valeur initiale de true. La fonction setVoir est utilisée pour mettre à jour cet état.

const [bt, setBt] = useState('cacher') : Déclare une autre variable d’état (bt) avec une valeur initiale de 'cacher'. La fonction setBt sera utilisée pour mettre à jour cet état.

La fonction afficher() est définie pour basculer l’état de voir et mettre à jour l’état de bt en fonction de l’état précédent. Si bt est égal à 'cacher', il sera mis à 'voir', et vice versa.

Le composant rend une section (<section>) contenant conditionnellement une balise <img> avec la source "image2.jpg" en fonction de l’état de voir.

<button onClick={afficher}>{bt}</button> : Rend un bouton qui, lorsqu’il est cliqué, appelle la fonction afficher(). Le texte du bouton est défini par la variable d’état bt, qui est mise à jour dans la fonction afficher()

Voilà ce qui s’affiche sur notre navigateur si tout fonctionne bien :

Résultat affiché par le premier exercice ReactJS.
Aperçu du premier résultat d'exercice sur React.


Et vous pouvez la cacher en cliquant le bouton :

Vue du second exercice réalisé avec le hook UseState ReactJS
Visualisation du rendu de l'exercice 2 en React

 


Voilà, on a terminé notre exercice avec succès.

Conclusion

En conclusion, le hook useState en ReactJS est un outil puissant pour gérer l’état local dans les composants fonctionnels. Que vous débutiez ou que vous cherchiez à perfectionner vos compétences en ReactJS, savoir utiliser useState efficacement est crucial. Grâce aux exemples et exercices pratiques présentés, vous devriez maintenant être capable d’implémenter des états dynamiques dans vos applications ReactJS. Continuez à explorer et à expérimenter pour maîtriser pleinement cette fonctionnalité essentielle de ReactJS avec le hook UseEffect ReactJS.
 
ÉTIQUETÉ : Reactjs
Partager cet article
Par L'Équipe Alphorm Démocratiser la Connaissance Informatique pour Tous !
Suivre :
L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.
Laisser un commentaire