Les hooks en React

Les hooks sont des fonctions fournies par React pour vous permettre de placer certaines actions à des moments précis du cycle de vie de votre composant.

Dans ce cours, nous allons nous concentrer sur le hook useEffect qui permet de connecter votre composant à un système exterieur. Ici un système exterieur c'est n'importe quel système extérieur au composant. Il peut s'agit d'une API, d'un script JS, du localStorage, bref beaucoup de choses différentes.

La documentation de useEffect contient des exemples et plus d'informations vous pouvez la trouver ici.

La structure de useEffect

La structure de useEffect peut paraitre un peu complexe au premier abord, on va tâcher de la décomposer.

Voici la signature de useEffect :

useEffect(setup, dependencies);

setup: la fonction qui contient la logique de votre effet. Elle est appellée la première fois que votre composant est mis en place puis à chaque mise à jour du composant qui modifie les valeurs dependencies.

dependencies: une liste de valeurs "réactives" (des valeurs du state par exemple) que votre fonction setup utilise.

La particularité de setup

La fonction que vous passez à useEffect a une particularité : elle peut return une fonction dite "de nettoyage". Cette fonction sera appelléé à chaque mise à jour du composant ainsi que quand votre composant est retiré du DOM.

Les particularités des dependencies

Vos dependencies sont optionnelles, vous pouvez soit envoyer des dépendances, soit envoyer un tableau vide soit envoyer ne pas envoyer de tableau. Le comportement sera légèrement différent.

Si j'envoie un tableau de dépendances avec des valeurs

C'est le comportement que l'on a vu plus tôt : Votre setup est effectué après la première mise en place du composant puis à chaque fois que les dépendances sont modifiées.

Si j'envoie un tableau de dépendances vide

Votre effect ne sera effectué que juste après la première mise en place des composants.

Si je n'envoie pas de tableau de dépendance

Votre effect sera effectué à chaque mise à jour du composant.

Une très bonne démonstration intéractive de la différence entre les 3 est disponible dans la doc de React, je vous conseille d'aller l'essayer.

Exemples d'utilisation de useEffect

Utiliser un effet pour charger les données initiales

Dans cet exemple, nous voulons au départ récupérer des préférences utilisateurs qui sont dans le localStorage. Nous n'avons pas besoin que notre effet soit rappelé ultérieurement, simplement au chargement de la page, nous allons donc passer un tableau de dependencies vide.

    import { useState, useEffect } from 'react';

    const ProfileChoices = (props) => {
        const [profile, updateProfile] = useState(null);
        
        useEffect(() => {
           let localProfile = JSON.parse(localStorage.getItem('profile'));
           updateProfile(localProfile);
        }, []);
    }

Utiliser un effet pour sauvegarder des données quand elles sont modifiées

Dans cet exemple, nous voulons sauvegarder certains éléments du state dans le localStorage à chaque modification de ces éléments. Nous allons donc passer un tableau de dependencies qui contient les valeurs que nous voulons surveiller.

    import { useState, useEffect } from 'react';

    const ProfileChoices = (props) => {
        const [profile, updateProfile] = useState(null);
        const [otherData, setOtherData] = useState({info : "example", list: []});
        
        useEffect(() => {
           let jsonProfile = JSON.stringify(profile);
           localStorage.setItem('profile', jsonProfile);
        }, [profile]);
    }

03 February 2026