Aller au contenu principal


Le hook : useEffect

Un Hook est une fonction qui permet d' « accocher » une des fonctionnalités React. à une fonction-composant.

Pour utiliser useEffet dans notre fonction-composant, il faut l'importer.

import React, {useEffect] from react

Billet créé le :
30 Sep 2022
Dernière MAJ :
13 fév 2024

On utilise le hook useEffect pour exécuter une fonction, dite callback, (l'effet) lorsque l'état de la "fonction-composant" change. Cette fonction est également exécutée après le 1er rendu de la fonction-composant. La syntaxe à utiliser est la suivante :

useEffet(callback,[dependencies])

L'argument "dependencies" est un tableau (array) qui conditionne l'exécution de la fonction.

La fonction callback peut éventuellement rendre une fonction de "nettoyage" pour éviter la saturation de mémoire.

Exemple 1 :

Dans cette portion de code de gestion d'un composant GPS, des variables d'état sont utilisées par mémoriser la position de l'utilisateur.
La fonction "callback"  du hook 'useEffect" est en gras dans le code ci-dessous. Ses effets sont :

  • la recherche de la position actuelle (donc la modification de l'état du composant GPS) par la fonction  "requestCurrentLocation();" ;

  • la mise à jour cette position (donc la modification de l'état du composant GPS) par la fonction "locationUpdate();"  ;

  •  le "nettoyage" en arrêtant de mettre à jour de la position.

    //
    const [ longitude, setLongitude ] = useState(2.1044);
    const [ latitude, setLatitude ] = useState(48.8775);
   // .......

 useEffect(
        () => {
            requestCurrentLocation();
            watchID = locationUpdate();
        
        return () => {
            // fonction de nettoyage pour éviter la saturation de mémoire
            () => {
                Geolocation.clearWatch(watchID);
                }
        };
    }, []);

La fonction clearWatch() est appelée en retour pour annuler l'action répétée de "watchPosition()" : c'est le "nettoyage".

Exemple 2 : un compteur

Dans cette exemple dont le code figure dans l'onglet ci-dessous, l'effet ne sera re-exécuté que si la variable "interval" est modifiée entre 2 rendus.

La fonction clearInterval() est appelée en retour pour annuler l'action répétée et minutée initiée via setInterval() : c'est le "nettoyage".

 

Lorsque le paramètre optionnel de dépendance est omis, l'effet, transmis par useEffet est appelé après chaque rendu.
Lorsque le paramètre optionnel de dépendance est un tableau vide, l'effet, est appelé uniquement au rendu initial.
Lorsque le paramètre optionnel de dépendance est le tableau [arg1, arg2 , ...] ou arg1, arg2 sont des variables d''état ou des props de la fonction-compsant, l' effet ne sera appelé que si la valeur d'une des variables arg1 ou arg2 ou ... du tableau est modifiée.

Exemple : la fonction-composant compteur()

Cliquez sur le bouton pour copier le code 
dans le presse papier
    const Compteur = () => {
   const[ interval, setInter] = useState(5000);
   const [count, setCount] = useState(0);
   useEffect(
        () => {
               // paramètre obligatoire : le code de la fonction callback (l'effet à exécuter)
               const ref = setInterval(
                    () => {
                            setCount((count) => count + 1);
                            }, interval);
               console.log("Réf : " + ref + " compteur : " + count);
               return (
                    // fonction de nettoyage pour éviter la saturation mémoire
                       () => {
                                clearInterval(ref);
                                console.log("fin execution compteur, clear : " + ref);
                                }
            )
    },
    // paramètre optionnel : le tableau de dépendance
    [] );
   console.log(" le rendu n° : " + count);
   return (
           <View >
               <Text >
               Compteur: {count}
               </Text>
           </View>
    )
};

Cliquer pour agrandir l'image

L'image ci-dessus illustre l'exécution de la fonction-composant compteur.

On y  observe que l'effet de useEffect n'est exécuté qu'une seule fois et cela, après le 1er rendu (log :  rendu n°0).
En effet la fonction setInterval() 

  • produit le log "réf:16 compteur : 0" ;

  • lance le setter "setcount" toutes les 5000ms qui produira donc un nouveau rendu toutes les 5s (affichage des log "rendu n° ..") sans ré-exécution de l'effet.

Ce comportement est dû au paramètre optionnel de dépendance qui est un tableau vide.

Lorsque vous ajoutez "count" dans le tableau de dépendances, vous obtenez le comportement l'illustré ci-dessous car cette fois, useEffect est appelé toutes les 5s à chaque modification de count.