← Retour au blog

Copilot te piège : arrête de créer du "state" inutile !

Tu utilises Copilot pour coder plus vite ? Parfait. Mais attention, l'IA a une tendance toxique à vouloir tout stocker dans des `useState`. Si tu ne fais pas gaffe, tu es en train de pourrir tes composants React avec des bugs invisibles.

Le piège du state dérivé

Copilot adore ce pattern : tu as une liste d'objets et tu veux afficher leur somme totale. L'IA va te pondre un `useEffect` qui surveille ta liste pour mettre à jour un `useState` dédié au total.

Ça ressemble à ça :

```javascript const [total, setTotal] = useState(0)

useEffect(() => { setTotal(items.reduce((sum, i) => sum + i.price, 0)) }, [items]) ```

C'est techniquement "fonctionnel", mais c'est une hérésie architecturale. Pourquoi ? Parce que ton `total` n'est pas une donnée autonome. C'est une valeur dérivée. Il dépend uniquement de `items`. Le stocker dans un `state` crée une deuxième source de vérité inutile qui ne demande qu'à se désynchroniser.

Pourquoi ça flingue ton appli

En faisant ça, tu forces ton composant à effectuer un double rendu à chaque modification. Pire, ton `total` aura toujours une frame de retard sur tes `items`.

L'IA ne cherche pas la logique la plus propre, elle fait du "pattern matching" statistique. Elle a vu des milliers de bouts de code sur GitHub où des développeurs juniors ont utilisé des `useEffect` pour tout et n'importe quoi. Copilot ne réfléchit pas, il imite. Si tu suis aveuglément ses suggestions, tu finis avec un code lourd, lent et imprévisible.

Dès que tu peux calculer une valeur à la volée pendant le rendu, fais-le. C'est plus simple, plus rapide, et surtout, c'est impossible de se tromper.

```javascript // La version propre, sans fioritures const total = items.reduce((sum, i) => sum + i.price, 0) ```

À retenir

  • Ne stocke pas ce que tu peux calculer : Si une valeur dépend directement d'une autre donnée, calcule-la pendant le rendu, c'est tout.
  • Le `useEffect` n'est pas un couteau suisse : Ne l'utilise pas pour synchroniser des états entre eux, c'est la porte ouverte aux effets de bord imprévus.
  • Méfie-toi de l'IA : Copilot est un super assistant, mais il n'a aucune compréhension de ton architecture. C'est toi qui pilotes.
  • Gardez une source de vérité unique : Moins tu as de `useState` dans ton code, moins tu as de chances de te retrouver avec des incohérences à débugger pendant trois heures.