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
On utilise le hook useEffect pour exécuter une fonction (callback) de manière asynchrone ( et le cas échéant une fonction de "nettoyage") lorsque l'état de la fonction-composant change. Cette fonction, appelé l'effet, 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 l'effet. Dans l'exemple ci-dessous, l'effet ne sera re-exécuté que si la variable interval est modifiée entre 2 rendus.
Comme indiquée dans ce même exemple, la fonction de "nettoyage" (optionnelle) peut être ajoutée comme retour de la fonction callback.
Exemple : la fonction-composant compteur()
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>
)
};
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.
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".
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.
