Comprendre comment gérer les états dans les composants fonctionnels de ReactJS peut être déroutant pour les développeurs débutants et intermédiaires, surtout avec l’introduction des hooks comme useState.
Une mauvaise gestion des états conduit à des bugs inattendus, une interaction utilisateur dégradée, et un code difficile à maintenir, ralentissant ainsi le développement.
Découvrez comment utiliser efficacement le hook useState dans cet article pour gérer les états et améliorer l’interactivité de vos applications ReactJS avec des exemples pratiques et des exercices.
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 :
Ç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>
);
}
Dominez la création d'interfaces modernes avec React 18 et ses nouvelles fonctionnalités!
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 :
Mais, vous maitrisez comment manipuler le hook useState Reactjs pour un objectif précis. Passons maintenant aux exercices d’application.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui. Découvrez des cours variés pour tous les niveaux !
Conclusion
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.