Articles Septembre

Comprendre le Hook useEffect en React

Le hook useEffect est un outil incontournable dans React, permettant de gérer des effets secondaires dans les composants fonctionnels. Depuis son introduction avec React 16.8, useEffect a facilité la gestion des mises à jour du DOM, des appels API, des abonnements, et d’autres actions qui se produisent en dehors du cycle de rendu de React. Cet article explore en profondeur le fonctionnement et les cas d’utilisation de useEffect.

Qu’est-ce qu’un effet secondaire ?

Un effet secondaire désigne toute action qui se produit à l’extérieur du flux principal d’exécution de React, c’est-à-dire tout ce qui n’est pas directement lié à la mise à jour du rendu d’un composant. Par exemple, faire un appel à une API, ajouter un gestionnaire d’événements, ou manipuler directement le DOM en dehors de React sont des effets secondaires.

Dans une application React classique, tous ces effets doivent être gérés de manière appropriée pour éviter les fuites de mémoire, les comportements inattendus ou les mises à jour inutiles du DOM.

Syntaxe du Hook useEffect

La syntaxe de base de useEffect est la suivante :

useEffect(() => {
// Code de l’effet secondaire
return () => {
// Code de nettoyage (facultatif)
};
}, [dépendances]);

• Le premier argument est une fonction qui contient l’effet secondaire. Elle est exécutée après chaque rendu du composant.
• Le deuxième argument est un tableau de dépendances. Ce tableau détermine quand l’effet doit être exécuté. Si ce tableau est vide, l’effet ne sera exécuté qu’une seule fois, après le premier rendu (comportement similaire à componentDidMount en classes).
• La fonction de nettoyage (facultative) peut être retournée dans l’effet pour effectuer des actions de nettoyage avant que le composant ne soit démonté ou avant que l’effet ne soit réexécuté. Cela est utile pour des cas comme la désinscription d’événements ou l’annulation d’appels API.

Exemples d’utilisation

1. Effectuer un appel API

L’un des cas d’utilisation les plus courants de useEffect est la récupération de données depuis une API. Voici un exemple de base :

import React, { useState, useEffect } from ‘react’;

function App() {
const [data, setData] = useState(null);

useEffect(() => {
fetch(‘https://api.exemple.com/data’)
.then(response => response.json())
.then(data => setData(data))
.catch(error => console.error(‘Erreur lors de la récupération des données :’, error));
}, []); // Le tableau vide garantit que l’effet ne s’exécute qu’une seule fois

if (!data) return <div>Chargement…</div>;

return <div>Données : {JSON.stringify(data)}</div>;
}

export default App;

Dans cet exemple, l’effet secondaire se produit une seule fois après le premier rendu, ce qui est idéal pour récupérer des données initiales. L’effet ne sera pas réexécuté tant que le tableau des dépendances reste vide.

2. Ajouter et nettoyer un gestionnaire d’événements

Dans certains cas, vous devrez peut-être ajouter un gestionnaire d’événements et le nettoyer lorsqu’un composant est démonté. useEffect est parfait pour cela :

import React, { useEffect } from ‘react’;

function App() {
useEffect(() => {
const handleResize = () => {
console.log(‘Fenêtre redimensionnée’);
};

window.addEventListener(‘resize’, handleResize);

// Fonction de nettoyage pour retirer l’événement
return () => {
window.removeEventListener(‘resize’, handleResize);
};
}, []); // Aucun changement spécifique de dépendances

return <div>Redimensionnez la fenêtre pour voir les logs</div>;
}

export default App;

Ici, nous ajoutons un gestionnaire d’événements resize au niveau de l’objet window et nous nous assurons de le retirer lorsqu’il n’est plus nécessaire, ce qui évite les fuites de mémoire.

3. Effet secondaire en fonction des dépendances

Il est aussi possible de déclencher un effet secondaire lorsque certaines dépendances changent, comme une donnée dans l’état. Cela est fait en ajoutant des dépendances dans le tableau des dépendances :

import React, { useState, useEffect } from ‘react’;

function App() {
const [count, setCount] = useState(0);

useEffect(() => {
console.log(‘Le compteur a changé à’, count);
}, [count]); // Cet effet s’exécutera chaque fois que ‘count’ change

return (
<div>
<p>Compteur : {count}</p>
<button onClick={() => setCount(count + 1)}>Incrémenter</button>
</div>
);
}

export default App;

Dans cet exemple, l’effet est exécuté chaque fois que la valeur de count change.

Nettoyage des effets secondaires

Lorsque vous utilisez des effets secondaires, il est important de libérer les ressources et d’effectuer un nettoyage lorsque le composant est démonté ou avant que l’effet ne soit réexécuté. Cela peut être fait dans la fonction de nettoyage retournée par useEffect :

useEffect(() => {
const timer = setInterval(() => {
console.log(‘Chaque seconde’);
}, 1000);

// Fonction de nettoyage pour arrêter le timer
return () => clearInterval(timer);
}, []); // Effet exécuté une seule fois

Ici, clearInterval(timer) garantit que l’intervalle est nettoyé lorsque le composant est démonté.

Conclusion

Le hook useEffect est un outil très puissant et flexible dans React, permettant de gérer les effets secondaires de manière propre et efficace. En comprenant son fonctionnement, vous pouvez l’utiliser pour gérer des appels API, manipuler le DOM, ajouter des écouteurs d’événements et bien plus encore, tout en vous assurant que les ressources sont correctement nettoyées. C’est un élément essentiel pour écrire des applications React performantes et maintenables.