React - Bibliothèque Javascript pour le frontend
Page 7: Le hook useEffect pour gérer les effets secondaires d'un composant
Toutes les pages 
React - Bibliothèque Javascript pour le frontend
Page 7
Le hook useEffect pour gérer les effets secondaires d'un composant
Le hook useEffect pour gérer les effets secondaires d'un composant
Le hook useEffect pour gérer les effets secondaires d'un composant fonctionnel React
Qu’est ce que le hook useEffect ?
Le hook useEffect est l’un des hooks les plus utilisés en React. Il sert à gérer les effets secondaires suite au chargement d’un composant. Pour dire simple, on peut imaginer useEffect comme une sorte de boîte à outils qui permet d’exécuter des tâches spécifiques après qu’un composant soit chargé (ou même parfois après le rerendering d’un composant).Si vous êtes un développeur habitué au Javascript, alors vous exécutez souvent des fonctions juste après le chargement de la page via le gestionnaire onLoad ou via le gestionnaire addEventListener('load') (qui est plus moderne). Cela indique au navigateur qu’il doit exécuter une fonction une fois tous les éléments synchrones de la page ont été chargés, comme les textes ou les images.
En React, on peut faire ceci à l’aide du hook useEffect. La différence dans ce cas réside dans la fait que la fonction associée s’exécutera après le chargement du composant concerné et pas forcément toute la page, mais dans la pratique, cela revient à peut près à la même chose.
Utiliser useEffect dans un composant
Imaginez que l’on souhaite afficher le message « Composant chargé » dans la console suite au chargement du composant principalimport { useEffect } from "react";
function App() {
useEffect(()=>{
console.log("Composant chargé")
},[])
return (
<></>
);
}
export default App;
Expliquons un peu ce code:
function App() {
useEffect(()=>{
console.log("Composant chargé")
},[])
return (
<></>
);
}
export default App;
D'abord, il faut importer le module useEffect depuis le module principal react. Comme pour useState, votre IDE se chargera probablement de l'importer pour vous une fois il en détecte la présence dans votre code.
Le hook useEffect renferme généralement deux arguments, la fonction à exécuter et qui, dans notre cas affiche le message "Composant chargé" dans la console, et un tableau vide [] qui indique que le hook sera exécutée une seule fois et il ne se réexécutera pas même après le rerendering du composant.
En réalité, le hook useEffect ne se contente pas de s'exécuter une seule fois comme expliqué précédemment, mais il surveille les states de l'applications et se réexécute (souvent) après qu'ils aient changé de valeur. C'est justement le rôle du tableau du deuxième argument. Il sert à lister les states qui entraineront la réexécution de useEffect quand ils auront changé, en d'autre terme, quand un rerendering de l'application sera détecté.
Quand vous aurez exécuté ce code, il est probable que vous verrez s'afficher le message "Composant chargé" deux fois. C'est du au Strict Mode appliqué par défaut en mode développement. Vous pouvez désactiver ce mode en supprimant le wrapper <React.StrictMode> présent dans le fichier index.js.
Exemple complet
Maintenant, on va reprendre le code qu'on a vu dans la leçon consacrée au hook useState, et on va y intégrer l'appel de useEffect comme ceci:import { useEffect, useState } from "react";
function App() {
const [compteur,setCompteur]=useState(0)
const handleCompteur=()=>{
setCompteur(compteur+1)
}
useEffect(()=>{
console.log('Composant chargé')
},[compteur])
return (
<>
<h1>{compteur}</h1>
<button onClick={handleCompteur}>
Incrémenter le compteur
</button>
</>
);
}
export default App;
Vous avez constaté que le tableau qui constitue le deuxième argument de useEffect renferme désormais le state compteur. Dans ce cas, la fonction passée à useEffect sera d'abord exécutée au chargement de l'application (comme vu précédemment), mais aussi à chaque fois que le state compteur changera de valeur. Autrement dit, après chaque clic que le bouton qui incrémente le compteur.function App() {
const [compteur,setCompteur]=useState(0)
const handleCompteur=()=>{
setCompteur(compteur+1)
}
useEffect(()=>{
console.log('Composant chargé')
},[compteur])
return (
<>
<h1>{compteur}</h1>
<button onClick={handleCompteur}>
Incrémenter le compteur
</button>
</>
);
}
export default App;
Page 7
Le hook useEffect pour gérer les effets secondaires d'un composant
Le hook useEffect pour gérer les effets secondaires d'un composant
