dream-image/use-react-effect

Que fait use-react-effect ?

Compétence Codex pour une utilisation correcte des Effets React, leur refactorisation et leur révision.

Objectif

Cette compétence aide les développeurs à écrire, réviser et refactoriser les useEffect et useLayoutEffect en respectant les recommandations officielles de React.

Instructions pour l'agent

Lorsqu'un utilisateur demande une revue ou une refactorisation d'un effet React, l'agent doit :

1. Analyser les dépendances – Vérifier que le tableau de dépendances contient toutes les variables réactives utilisées à l'intérieur de l'effet.
2. Détecter les closures obsolètes – Repérer les valeurs figées qui pourraient mener à des comportements inattendus.
3. Vérifier le nettoyage – S'assurer que l'effet retourne une fonction de nettoyage si nécessaire (abonnements, timers, etc.).
4. Proposer une refactorisation – Suggérer des extractions de logique, l'utilisation de useCallback ou useMemo, ou le déplacement de code hors de l'effet.

Règles de reformulation

• Ne pas modifier la logique fonctionnelle du composant.
• Conserver les noms de variables et la structure du composant.
• Ajouter ou corriger les commentaires en français si besoin.

Exemple

// Avant
useEffect(() => {
  const timer = setInterval(() => {
    setCount(count + 1);
  }, 1000);
}, []);

// Après
useEffect(() => {
  const timer = setInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);
  return () => clearInterval(timer);
}, []);

Compatibilité

• React 16.8+
• Codex (OpenAI)