Project Details
Exercice : utiliser le hook useEffect
Auteur : Bilal Zouine
Description :
Cet exemple montre comment utiliser le hook useEffect
en combinaison avec
localStorage
pour sauvegarder et récupérer la valeur d'un compteur à chaque fois qu'il est incrémenté.
- Gestion de l'État :
Utilise le hook
useState
pour déclarer un état local pour le compteur. - Incrémentation du Compteur :
Fournit une fonction
increment
qui incrémente la valeur du compteur et la sauvegarde danslocalStorage
. - Récupération de la Valeur :
Utilise
useEffect
pour récupérer la valeur du compteur depuislocalStorage
lors du chargement du composant. - Mise à Jour de localStorage :
Met à jour
localStorage
chaque fois que le compteur change, grâce à un second hookuseEffect
. - Affichage de l'Interface : Rendu d'un bouton pour incrémenter le compteur et d'un élément pour afficher la valeur actuelle du compteur.
Code :
import React, { useState, useEffect } from 'react';
function LocalStorageExample() {
// Déclare un état pour le compteur
const [count, setCount] = useState(0);
// Fonction pour incrémenter le compteur
const increment = () => {
// Incrémente l'état du compteur
setCount(count + 1);
// Sauvegarde le compteur incrémenté dans localStorage
localStorage.setItem('count', count + 1);
}
// Utilisation de useEffect pour récupérer la valeur du compteur au chargement
useEffect(() => {
const counter = localStorage.getItem('count');
// Si une valeur est trouvée dans localStorage, elle est définie dans l'état
if (counter) {
setCount(Number(counter));
}
}, []);
// useEffect pour mettre à jour localStorage quand le compteur change
useEffect(() => {
if (count > 0) {
localStorage.setItem('count', count);
}
}, [count]);
return (
<div className="container">
<h2 className="alert bg-danger text-white text-center w-50 mx-auto mt-5">
Exemple d'utilisation de useEffect avec localStorage
</h2>
<div className="alert alert-primary d-flex justify-content-center align-item-center w-50 mx-auto p-5 mt-5">
{/* Bouton pour incrémenter le compteur */}
<button onClick={increment} className='btn btn-success btn-sm py-0 fw-bold'>
Incrémenter Count
</button>
{/* Affiche la valeur actuelle du compteur */}
<strong className='p-2 px-4 rounded fw-bold text-white bg-info mx-2'>
{count}
</strong>
</div>
</div>
)
}
export default LocalStorageExample;