Exercices

LocalStorage Weather Api ToDo et LocalStorage

React+ionic

Ionic Create project 4.React Outils utiles 5.Lifecycle Methods 6.JSX

Gestion Ventes

Produit CRUD

6.Form :Ajouter un produit 8.Liste produits 9.Pagination 10.Liste produits +Pagination 11.Liste produits +Datatable 11.Liste produits +load more 12.Supprimer un produit 14.Details d'un produit 15.Recherche et Autocomplete

Reacts:Utils

Gestion des erreurs Variables d'environment Cookies Internationalization proptypes Form validation React Animation Fragment Google Maps

Utilisateur CRUD

18.Inscription upload file 19.Connexion et Les sessions 19.Connexion: JWT Token

Ventes CRUD

17.Vendre un produit 18.Facture Generate PDF 19.Statisques Charts

Redux





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 dans localStorage.
  • Récupération de la Valeur : Utilise useEffect pour récupérer la valeur du compteur depuis localStorage lors du chargement du composant.
  • Mise à Jour de localStorage : Met à jour localStorage chaque fois que le compteur change, grâce à un second hook useEffect.
  • 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.
Illustration de l'exercice
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;