Retour à la leçon
Mission

Mission : éliminer la race condition de UserProfile

Diagnostiquer un affichage transitoire de données obsolètes et corriger un effet qui manque une dépendance essentielle.

Contexte

Sur UserProfile.jsx, l'équipe QA remonte qu'en cliquant très vite du profil A vers le profil B, l'écran affiche parfois brièvement les données de A avant que celles de B n'apparaissent enfin. Le code actuel est :

jsx
useEffect(() => {
    async function charger() {
        const res = await fetch(`/api/users/${userId}`);
        const data = await res.json();
        setUtilisateur(data);
    }
    charger();
}, [userId]);

Un second effet du même fichier, à dépendances vides, incrémente un compteur de vues toutes les secondes avec setInterval(() => setVues(vues + 1), 1000) et n'avance jamais au-delà de 1.