Skip to main content

Chapitre 6 : Effets et synchronisation(useEffect)

Hook useEffect

Concepts clés abordés​

  • Hook useEffect

Hook useEffect​

Un composant React a pour rôle principal de décrire une interface. Il ne doit pas contenir directement du code qui provoque des actions extérieures (appel réseau, timer, abonnement).

useEffect est le hook qui permet d’exécuter ce type de code après que le composant ait été affiché à l’écran (et non pendant). Il contient :

  • une fonction contenant l’effet
    • le retour est optionnel il permet de faire un clean up.
  • un tableau de dépendances

Le tableau de dépendances doit contenir tout objet défini en dehors du useEffect. Il permet de dire à React quand le code dans l’effet doit s’exécuter. C’est comme une liste de choses à surveiller. Les différents cas sont :

  • pas de tableau: l’effet s’exécute après chaque affichage (rendu)
  • tableau vide: l’effet s’exécute une seule fois, après le premier affichage
  • avec dépendances: l’effet s’exécute à chaque fois qu’une des dépendances change

Exemple :
J’ai un composant “UsersList”, et j’ai besoin de récupérer la liste des utilisateurs sur un serveur.

Le composant possède dans son état interne une liste de “users”, appelé “users” et qui peut être mis à jour avec “setUsers”.
Il fetch les données dans le useEffect, et met à jour la liste des users.
Une fois la liste des users mis à jour, le composant se met à jour pour afficher le contenu de la nouvelle liste.

Questions clés (validation des acquis du chapitre)​

  • A quoi sert useEffect ? À exécuter du code après l’affichage du composant, afin de
  • Quand est-il exécuté ? Après le rendu, selon le tableau de dépendances.
  • A quoi sert le tableau de dépendances ? À contrôler quand l’effet doit se déclencher.

Exercices :​

Exercice - Utiliser useEffect​

Voici le code qui te permet de récupérer de la data de faux produits afin que tu puisses travailler sur de la vraie donnée :

fetch('https://fakestoreapi.com/products/1')
.then(res=>res.json())
.then(json=>console.log(json))

  1. Créer un composant “ProductsList”
  2. Reprendre le composant “Article” des exercices précédents, et y insérer le nouveau composant.
  3. Fetch les données via l’appel API
  4. ProductsList doit afficher les fake produits retournés
  5. Bonus : Ajouter un bouton “refresh” qui permet de rafraichir la data des produits.

Utiliser useEffect et le tableau de dépendances.

Liens utiles :
https://dmitripavlutin.com/react-useeffect-explanation/
https://fr.react.dev/reference/react/useEffect