Component Refactoring Skill
Refactor high-complexity React components with the patterns and workflow below.
Complexity Threshold: Components with lineCount > 300 should be considered for refactoring.
Core Refactoring Patterns
- Pattern 1: Extract Custom Hooks (for complex state/business logic)
- Pattern 2: Extract Sub-Components (for monolithic JSX)
- Pattern 3: Simplify Conditional Logic (for deep nesting/complex ternaries)
- Pattern 4: Extract API/Data Logic (use @tanstack/react-query or similar hooks)
- Pattern 5: Extract Modal/Dialog Management (isolated open/close states)
Refactoring Workflow
- Analyze Component (Check file size and search for long functions/JSX blocks)
- Plan Refactoring based on identified patterns.
- Execute Incrementally (extract logic/JSX into new files, verify lint and type-checks)
- Verify that the component is now more readable and maintainable.