Ban useEffect en React — pattern defensif pour code genere par agents¶
Resume¶
Factory (startup IA coding tools) a banni useEffect de sa codebase React apres des bugs de production recurrents (race conditions, boucles infinies, dependency hell). Remplacement par 5 patterns : etat derive inline (pas de sync via effet), event handlers (logique explicite, pas implicite), useMountEffect() (wrapper one-shot pour le seul cas legitime), abstractions data-fetching, refs pour side effects imperatifs. Le point cle : les agents IA ajoutent useEffect par reflexe parce que c'est massivement present dans leur corpus d'entrainement. Bannir le hook force un style declaratif que les agents suivent mieux.
Analyse critique¶
L'argument est technique et concret — bugs de prod documentes (screenshots Slack), patterns de remplacement avec code. Le guide officiel React "You Might Not Need an Effect" valide la position depuis 2022. Ce n'est pas nouveau en soi, mais l'angle "les agents IA sur-utilisent useEffect" est un insight original et verifiable.
En pratique c'est un lint rule (no-restricted-syntax sur useEffect) + un wrapper useMountEffect(). Pas une revolution, mais un guardrail efficace. Le vrai apport est culturel : forcer la reflexion "est-ce que j'ai vraiment besoin d'un effet ?" avant d'ecrire du code reactif.
Les 5 patterns de remplacement :
| Pattern | Remplace | Principe |
|---|---|---|
| Etat derive inline | useEffect + setState depuis autre state | Calculer dans le render, pas synchroniser |
| Event handlers | useEffect qui reagit a une action utilisateur | Logique dans le handler, pas dans un effet |
useMountEffect() | useEffect(fn, []) | Wrapper explicite, seul cas autorise |
| Abstraction data-fetching | useEffect pour fetch API | React Query / SWR / loader |
| Refs pour imperatif | useEffect pour focus, scroll, mesure DOM | useRef + callback ref |
Pertinence ProbatioVault¶
Impact faible mais actionnable. ProbatioVault-app est en React Native. Nos agents step 6b generent du code React pour les stories app. Le risque : un agent ajoute un useEffect inutile qui passe les gates (pas de bug visible en review statique) mais cause une race condition en production.
Action : ajouter une regle dans les code contracts des stories app : interdire useEffect direct, fournir un helper useMountEffect() comme seul point d'entree autorise. Implementable comme lint rule ESLint (no-restricted-syntax).