Certains éléments hors du cadre de l'application React doivent parfois être mis à jour. Par exemple: le titre du document (affiché dans l'onglet du navigateur), une valeur stockée dans le localStorage, des requêtes http, etc. Afin de gardez la valeur de ces éléments synchronisés avec celle d'une variable React, il est possible d'utiliser les hooks d'effet.
Les fonctions attribuées à ces hooks sont exécutées après chaque mise à jour des variables et du DOM par React. Ainsi, il est possible d'avoir accès aux valeurs les plus récentes des variables.
Déclaration
Par exemple, afin de stocker la valeur de la variable name dans localStorage dès que celle-ci change, il est possible de faire:
React.useEffect(() => {
window.localStorage.setItem('name', name);
});Exemple concret
Modifiez le nom en tapant un nouveau et remarquez comment celui-ci reste malgré que vous rechargiez la page, car sa valeur est stockée à chaque changement dans le localStorage.
Tableau de dépendances
useEffect exécutées après chaque mise à jour des variables et du DOM par React. Cependant, il n'est pas toujours pertinent qu'il soit exécuté. Par exemple, si la variable age change alors que seule la variable name est référencée à l'intérieur de useEffect, il n'y a pas de raison que useEffect soit exécuté. Le seul impact sera une diminution de performance.
Pour éviter cette situation, il est possible de spécifier un tableau de dépendances correspondant aux variables référencées dans le hook. Ainsi, useEffect n'est exécuté que si la valeur de la variable name change et ignore les changement de la valeur de age.
React.useEffect(() => {
window.localStorage.setItem('name', name);
}, [name]);