Component Refactoring Skill

Refactor high-complexity React components with proven patterns and workflows.

Complexity Threshold: Components with cyclomatic complexity > 50 or line count > 300 should be candidates for refactoring.

Use When:

• bun analyze-component shows high complexity.
• Users ask for "code splitting", "hook extraction", or "cleanup".
• A component file exceeds 300 lines of code.

Core Refactoring Patterns

1. Extract Custom Hooks

Goal: Separate UI from State/Logic.

Before: