Chapitre 2 : useEffect

Ce chapitre est **crucial**. useEffect est le hook le plus complexe à maîtriser, mais aussi le plus utilisé après useState.

Un effet de bord (side effect) est toute opération qui affecte quelque chose en dehors du composant :

• Appeler une API
• Modifier le titre de la page
• S'abonner à un événement (WebSocket, resize, scroll)
• Manipuler le DOM directement
• Utiliser un timer (setTimeout, setInterval)

Ces opérations ne peuvent pas être faites directement dans le corps du composant, car celui-ci est exécuté à chaque rendu.

snippet.javascript

import { useEffect } from 'react';
 
function MyComponent() {
    useEffect(() => {
        // Code exécuté après le rendu
        console.log('Composant rendu !');
    });
 
    return <div>Mon composant</div>;
}

Le deuxième argument de useEffect contrôle quand l'effet s'exécute :

snippet.javascript

useEffect(() => {
    console.log('Exécuté après CHAQUE rendu');
});

Rarement utile - peut causer des problèmes de performance.

snippet.javascript

useEffect(() => {
    console.log('Exécuté UNE SEULE FOIS après le premier rendu');
}, []);

Équivalent à componentDidMount en classes.

snippet.javascript

useEffect(() => {
    console.log('Exécuté quand userId change');
    fetchUser(userId);
}, [userId]);

L'effet s'exécute :

1. Après le premier rendu
2. Après chaque rendu où userId a changé

snippet.javascript

function UserProfile({ userId }) {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
 
    useEffect(() => {
        // Fonction async dans useEffect
        const fetchUser = async () => {
            setLoading(true);
            setError(null);
 
            try {
                const response = await fetch(`/api/users/${userId}`);
                const data = await response.json();
                setUser(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };
 
        fetchUser();
    }, [userId]);  // Re-fetch quand userId change
 
    if (loading) return <p>Chargement...</p>;
    if (error) return <p>Erreur : {error}</p>;
    if (!user) return null;
 
    return <div>{user.name}</div>;
}

useEffect peut retourner une fonction qui sera appelée :

• Avant la prochaine exécution de l'effet
• Quand le composant est démonté

snippet.javascript

useEffect(() => {
    // Setup
    const subscription = api.subscribe(data => {
        setData(data);
    });
 
    // Cleanup
    return () => {
        subscription.unsubscribe();
    };
}, []);

snippet.javascript

function WindowSize() {
    const [size, setSize] = useState({
        width: window.innerWidth,
        height: window.innerHeight
    });
 
    useEffect(() => {
        const handleResize = () => {
            setSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        };
 
        window.addEventListener('resize', handleResize);
 
        // Cleanup : retirer l'écouteur
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);  // [] car on veut s'abonner une seule fois
 
    return <p>{size.width} x {size.height}</p>;
}

snippet.javascript

function Timer() {
    const [seconds, setSeconds] = useState(0);
 
    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(s => s + 1);
        }, 1000);
 
        // Cleanup : arrêter le timer
        return () => {
            clearInterval(interval);
        };
    }, []);
 
    return <p>{seconds} secondes</p>;
}

snippet.javascript

// DANGER ! Boucle infinie
useEffect(() => {
    setCount(count + 1);  // Modifie l'état
});  // Pas de tableau = exécuté à chaque rendu
// Modifie l'état → re-rendu → useEffect → modifie l'état → ...

Solution : toujours mettre un tableau de dépendances.

snippet.javascript

// PROBLÈME : userId n'est pas dans les dépendances
useEffect(() => {
    fetchUser(userId);
}, []);  // Fetch uniquement au montage, ignore les changements de userId

Solution : ajouter toutes les valeurs utilisées dans le tableau.

snippet.javascript

useEffect(() => {
    fetchUser(userId);
}, [userId]);  // Correct

snippet.javascript

// PROBLÈME : l'objet est recréé à chaque rendu
function MyComponent({ user }) {
    const options = { limit: 10 };  // Nouvel objet à chaque rendu
 
    useEffect(() => {
        fetchData(options);
    }, [options]);  // options change à chaque rendu !
}

Solution : déplacer hors du composant ou utiliser useMemo (module suivant).

snippet.javascript

// INCORRECT - useEffect ne peut pas être async
useEffect(async () => {  // Erreur !
    const data = await fetchData();
}, []);
 
// CORRECT - définir une fonction async à l'intérieur
useEffect(() => {
    const loadData = async () => {
        const data = await fetchData();
        setData(data);
    };
    loadData();
}, []);

snippet.javascript

function MyComponent() {
    console.log('1. Rendu');
 
    useEffect(() => {
        console.log('3. Effet');
        return () => console.log('2. Cleanup (si re-rendu)');
    });
 
    return <div>Test</div>;
}
 
// Premier rendu :
// 1. Rendu
// 3. Effet
 
// Re-rendu :
// 1. Rendu
// 2. Cleanup
// 3. Effet

OUI :

• Appels API
• Abonnements (WebSocket, events)
• Timers
• Modifier le DOM directement
• Synchroniser avec un système externe

NON :

• Calculer une valeur dérivée de l'état → useMemo
• Transformer des données pour le rendu → faire dans le rendu
• Réagir à une action utilisateur → gestionnaire d'événement

Créer un composant qui met à jour le titre de la page avec le compteur.

Solution :

snippet.javascript

function Counter() {
    const [count, setCount] = useState(0);
 
    useEffect(() => {
        document.title = `Compteur : ${count}`;
    }, [count]);
 
    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(c => c + 1)}>+1</button>
        </div>
    );
}

Créer un composant qui charge une liste de posts depuis une API.

Solution :

snippet.javascript

function PostList() {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
 
    useEffect(() => {
        const fetchPosts = async () => {
            try {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts');
                if (!response.ok) throw new Error('Erreur réseau');
                const data = await response.json();
                setPosts(data.slice(0, 10));
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };
 
        fetchPosts();
    }, []);
 
    if (loading) return <p>Chargement...</p>;
    if (error) return <p>Erreur : {error}</p>;
 
    return (
        <ul>
            {posts.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}

1. useEffect exécute du code après le rendu
2. Tableau vide [] = une seule fois au montage
3. Avec dépendances = quand ces valeurs changent
4. Fonction de retour = nettoyage (cleanup)
5. Toujours lister les dépendances utilisées dans l'effet
6. Async : définir une fonction async à l'intérieur, pas sur useEffect

← Chapitre précédent | Retour au module | Chapitre suivant : useRef →