ReactJS - Utilisation de useEffect : Un guide complet pour les débutants

Bonjour là-bas, futurs magiciens de React ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de useEffect dans React. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je serai votre guide amical, et nous avancerons pas à pas. À la fin de ce tutoriel, vous serez capable de manier useEffect comme un pro !

Qu'est-ce que useEffect ?

Avant de plonger dedans, comprenons ce qu'est useEffect. Imaginez que vous faites un gâteau. Vous mélangez les ingrédients, le mettez dans le four, et puis... quoi ? Vous pourriez vouloir régler un minuteur, non ? C'est un peu ce que fait useEffect dans React. Il vous permet d'effectuer des "effets secondaires" dans vos composants.

Les effets secondaires sont des actions qui se produisent parallèlement au travail principal de votre composant, qui est de rendre l'interface utilisateur. Ceux-ci pourraient inclure :

• La récupération de données depuis une API
• La modification manuelle du DOM
• La configuration des souscriptions

Maintenant, entrons dans le vif du sujet !

Signature de useEffect

Le hook useEffect a une manière spécifique d'être écrit. Décortiquons-le :

useEffect(() => {
// Votre code d'effet ici
}, [dependencies]);

Voici ce que signifie chaque partie :

1. useEffect : C'est le nom du hook que nous utilisons.
2. () => { ... } : C'est une fonction flèche où nous mettons notre code d'effet.
3. [dependencies] : C'est un tableau optionnel où nous listons toutes les valeurs sur lesquelles notre effet dépend.

Voyons un exemple simple :

import React, { useEffect, useState } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);

return () => clearInterval(interval);
}, []);

return <div>Secondes : {seconds}</div>;
}

Dans cet exemple, nous créons un simple minuteur. Le hook useEffect configure un intervalle qui incrémente notre état seconds chaque seconde. Le tableau de dépendances vide [] signifie que cet effet ne s'exécutera qu'une fois lorsque le composant est monté.

Fonctionnalités du Hook d'Effet

Maintenant que nous avons vu un exemple de base, explorons quelques fonctionnalités clés du hook d'effet :

1. Timing : Les effets s'exécutent après chaque rendu par défaut.
2. Exécution conditionnelle : Nous pouvons contrôler quand les effets s'exécutent en utilisant le tableau de dépendances.
3. Nettoyage : Les effets peuvent retourner une fonction de nettoyage pour éviter les fuites mémoires.

Voyons chaque uno de ces en détail.

Timing

Par défaut, useEffect s'exécute après chaque rendu. Cela signifie que si vous mettez à jour l'état dans votre effet, cela pourrait provoquer une boucle infinie ! Voici un exemple de ce qu'il ne faut pas faire :

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

useEffect(() => {
setCount(count + 1); // Cela provoquera une boucle infinie !
});

return <div>{count}</div>;
}

Exécution Conditionnelle

Pour éviter que les effets ne s'exécutent inutilement, nous pouvons fournir un tableau de dépendances :

function ConditionalEffect({ userId }) {
const [user, setUser] = useState(null);

useEffect(() => {
fetchUser(userId).then(data => setUser(data));
}, [userId]);

return <div>{user ? user.name : 'Chargement...'}</div>;
}

Dans cet exemple, l'effet ne s'exécutera que lorsque userId change.

Nettoyage

Certains effets doivent être nettoyés pour éviter les fuites mémoires. Voici comment nous pouvons le faire :

function CleanupExample() {
useEffect(() => {
const subscription = subscribeToSomething();

return () => {
subscription.unsubscribe();
};
}, []);

return <div>J'ai souscrit !</div>;
}

La fonction retournée par l'effet sera appelée lorsque le composant est démonté.

Récupération de Données Using Effect

Un usage commun de useEffect est de récupérer des données depuis une API. Voici un exemple :

function DataFetcher() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
setData(data);
setLoading(false);
})
.catch(error => {
setError(error);
setLoading(false);
});
}, []);

if (loading) return <div>Chargement...</div>;
if (error) return <div>Erreur : {error.message}</div>;
return <div>Données : {JSON.stringify(data)}</div>;
}

Ce composant récupère des données lorsque'il est monté, gère les états de chargement et d'erreur, et affiche les données lorsqu'elles sont prêtes.

Mutations DOM

useEffect peut également être utilisé pour manipuler directement le DOM. Voici un exemple :

function DOMManipulator() {
useEffect(() => {
const element = document.getElementById('my-element');
element.style.color = 'red';

return () => {
element.style.color = '';
};
}, []);

return <div id="my-element">Je suis rouge !</div>;
}

Cet effet change la couleur d'un élément en rouge lorsque le composant est monté, et la réinitialise lorsque le composant est démonté.

Fonction de Nettoyage

Nous avons touché au sujet des fonctions de nettoyage, mais penchons-nous un peu plus en détail. Les fonctions de nettoyage sont cruciales pour éviter les fuites mémoires et le comportement inutile. Voici un exemple plus complexe :

function WindowResizer() {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
const handleResize = () => setWindowWidth(window.innerWidth);
window.addEventListener('resize', handleResize);

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);

return <div>Largeur de fenêtre : {windowWidth}px</div>;
}

Dans cet exemple, nous ajoutons un écouteur d'événement lorsque le composant est monté, et le supprimons lorsque le composant est démonté. Cela empêche l'écouteur de rester actif après que nous n'en avons plus besoin.

Résumé

Résumons ce que nous avons appris sur useEffect :

Fonctionnalité	Description
Signature	useEffect(() => { ... }, [dependencies])
Timing	S'exécute après chaque rendu par défaut
Exécution Conditionnelle	Utilisez le tableau de dépendances pour contrôler quand l'effet s'exécute
Nettoyage	Retournez une fonction de l'effet pour le nettoyage
Récupération de Données	Peut être utilisé pour récupérer des données depuis des APIs
Manipulation DOM	Peut manipuler directement le DOM
Fonction de Nettoyage	Cruciale pour éviter les fuites mémoires

Et voilà ! Vous avez appena fait vos premiers pas dans le monde de useEffect. Souvenez-vous, comme avec tout outil puissant, il faut de la pratique pour le maîtriser. Alors n'ayez pas peur d'expérimenter et de faire des erreurs - c'est ainsi que nous apprenons tous. Bon codage, et que vos effets soient toujours propres et vos composants toujours réactifs !

Credits: Image by storyset