Détecter les composants doublons : audit automatisé

Détecter les composants doublons : audit automatisé

Le doublon silencieux : Button.tsx et CTAButton.tsx font 90% la même chose, divergent en 6 mois, deviennent 2 maintenances. La détection doit être automatisée.

Signaux d'un doublon

• Même nom à un préfixe près (Card / UserCard / ProductCard qui partagent 80% du markup)
• Même structure JSX, props différentes
• Copy-paste évident (commentaires identiques, classes Tailwind identiques)

Script `audit:duplicates` (jscpd)

pnpm dlx jscpd src/ --min-lines 30 --min-tokens 70 --reporters console,json

Sortie : liste les blocs ≥ 30 lignes dupliqués. Threshold CI : 0 nouveau duplicate par PR.

Pattern de résolution : composant polymorphe

Au lieu de PrimaryButton + SecondaryButton + GhostButton :

const buttonVariants = cva("base classes", {
  variants: {
    variant: { primary: "...", secondary: "...", ghost: "..." },
    size: { sm: "...", md: "...", lg: "..." }
  }
});
<Button variant="ghost" size="lg" />

1 composant, N variantes typées. C'est le pattern shadcn/ui.

Anti-pattern : copier-coller "pour aller plus vite"

Gain immédiat : 5 minutes. Coût : 3 heures de refacto + 2 bugs de divergence dans 6 mois. ROI négatif à 100%. Toujours factoriser dès la 2e occurrence.

Race condition silencieuse

2 composants qui font le même fetch sans dédup = 2 requêtes parallèles, 2 setStates, ordre indéterminé. Solution : 1 hook useResource() partagé avec React Query (dedup native).