React Component Refactoring Skill

This skill provides a systematic approach to refactoring complex React components. The goal is to transform monolithic, tangled code into clean, modular, and maintainable structures, specifically targeting code length and structure issues.

When to Use

Trigger this skill when you encounter:

1. Excessive Length: File size exceeds 200-300 lines.
2. Tangled Logic: Business logic, API calls, and state management are mixed directly with UI rendering.
3. Complex State: Multiple useState or useEffect calls make the flow hard to follow.
4. Deep Nesting: Render methods contain deeply nested conditionals or loops.
5. Cognitive Overload: The component is difficult to read or understand quickly.

Core Principles

1. Single Responsibility: Each component or hook should do one thing well.
2. Separation of Concerns: Strictly separate View (JSX/UI) from Logic (State/Effects/Handlers).
3. Composition: Build complex interfaces by composing smaller, focused sub-components.
4. Colocation: Keep related styles, types, and helpers close to where they are used.