react-dedup

Scan all .tsx and .ts files in the target directory for repeated JSX structures, hook call sequences, and style objects. Then cross-reference each pattern against existing shared components and either reuse, extend, or extract components based on how often the pattern repeats.

Extract a new shared component only when a pattern repeats three or more times and no existing component covers it. Patterns used once or twice, or components that look similar but serve different purposes, should be left alone to avoid premature abstraction.

Duplication includes identical JSX layouts with different data, the same hook call sequences in multiple components, repeated style objects, and repeated loading/error/empty conditional rendering. Sharing a common UI primitive like a Box component does not count as duplication.

Yes, the workflow is designed for TypeScript React codebases using .tsx files. It includes updating type definitions, maintaining barrel exports, and running TypeScript checks and tests after refactoring to confirm no regressions.

Avoid refactoring when two components look similar now but serve fundamentally different purposes and will diverge, when the duplication is only a simple one-liner, or when the code is stable and working with no real repetition. Premature abstraction creates maintenance burden.