Introduction

Le crochet useEffectest l'un des crochets React importants que vous devez connaître. Il vous permet d'effectuer des effets secondaires dans les composants fonctionnels chaque fois qu'un changement se produit. Ainsi, avec le useEffectcrochet, vous pouvez faire beaucoup de choses dans React, comme récupérer des données, travailler avec le DOM, et bien plus encore.

Dans cet article, nous allons découvrir le crochet UseEffect dans React avec quelques exemples pratiques. Allons droit au but.

Comment utiliser UseEffect ?

Le crochet useEffectaccepte deux paramètres. Le premier est obligatoire, il s'agit d'une fonction de rappel. D'autre part, le deuxième paramètre (tableau de valeurs ou tableau vide) est facultatif et nous l'utilisons lorsque nous voulons que le hook s'exécute après le moment où une valeur spécifique est rendue dans notre application.

Pour commencer à utiliser le hook useEffect, vous devrez d'abord l'importer depuis le package React.

Voici un exemple:

import React, { useEffect } from 'react';

Lorsque quelque chose dans votre application est mis à jour et que vous souhaitez faire quelque chose, vous devez utiliser useEffect. L'exemple suivant accède au DOM pour changer l'arrière-plan du corps avec useEffect:

useEffect(()=>{
  document.body.style.background = "black";
});

Voici l'exemple :

useEffect(()=>{
  document.body.style.background = "blue";
},[]);

Nous pouvons également effectuer des effets secondaires lorsqu'une valeur spécifique de notre composant change.

Voici un exemple:

useEffect(()=>{
  console.log('Only run on name change')
},[name]);

La fonction de nettoyage

Lorsque votre application doit définir un grand nombre d'effets secondaires, vous devrez utiliser une fonction de nettoyage qui éliminera chaque effet secondaire lorsqu'il se produira. Sinon, vous affecterez les performances de votre application.

Prenons un exemple simple où vous aurez une page Web qui affiche la largeur de l'écran en pixels lorsqu'un utilisateur redimensionne la page. Pour cela, nous aurons besoin d'un événement de redimensionnement.

Voici l'exemple :

import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const App = () =>{
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
useEffect(()=>{
    window.addEventListener("resize", ()=>{
      setScreenWidth(window.innerWidth);
    });
    // Return the cleanup function which cleans the effect(event).
    return ()=>{
      window.removeEventListener("resize", ()=>{
        setScreenWidth(window.innerWidth);
      });
    }
  });
return <>
  <div>{screenWidth}</div>
  </>
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />,
  rootElement
);

La fonction de nettoyage est renvoyée dans la fonction de rappel et nous permet de supprimer les événements une fois qu'ils se sont produits.

Récupérer des données avec UseEffect

Un autre effet secondaire du hook useEffectest la récupération de données à partir d'API. Vous pouvez récupérer vos données comme vous le faites avec Vanilla JavaScript, il vous suffit de le faire à l'intérieur de la fonction de rappel du crochet useEffectsi vous utilisez .then()et catch()pour gérer la promesse retournée.

Voici un exemple de récupération des données des utilisateurs à partir de l'API GitHub :

const App = ()=>{
 // The API URL.
 const APIurl = 'https://api.github.com/users';
 
// useState.
 const [users, setUsers] = useState([]);
 
// useEffect.
 useEffect(()=>{
  fetch(APIurl)
   .then(res => res.json())
   .then(data => setUsers(data));
},[]);
return(
<>
 <ul>
 {users.map(user => (
  <li key={user.id}>{user.login}</li>
 ))}
 </ul>
</>
)
}

Voici un exemple:

const App = ()=>{
// The API URL.
  const APIurl = 'https://api.github.com/users';
// useState.
  const [users, setUsers] = useState([]);
// useEffect.
  useEffect(()=>{
    getUser();}
    ,[]);
// Separate function.
  async function getUser() {
    const response = await fetch(APIurl);
    const data = await response.json();
    setUsers(data);
  }return(
    <>
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
    </>
  );
}

Conclusion

useEffectest le crochet le plus important que vous devez comprendre lorsque vous traitez avec React. Il vous permet d'ajouter facilement des fonctionnalités et d'effectuer des effets secondaires dans les composants fonctionnels.

Merci d'avoir lu cet article. J'espère que tu as trouvé ça utile.

Lectures complémentaires

Si vous êtes intéressé par un contenu plus utile lié à JavaScript et au développement Web, vous pouvez vous inscrire à ma newsletter.