react-refactoring

What problem does it solve?

The React component base often becomes hard to maintain when files grow beyond 200 lines or when logic, data fetching, and rendering are tightly coupled. This skill guides a structured approach to refactoring for readability and reusability.

Core Features & Use Cases

• Single Responsibility: Break large components into focused sub-components and custom hooks.
• Incremental Refactoring: Start with isolating state and effects, then decompose UI into smaller pieces.
• Use Case: When you encounter a monolithic Dashboard.tsx with numerous useEffect and inline logic, apply this skill to extract logic into hooks and split UI into components.

Quick Start

Start by identifying a candidate component, extract rendering sections, and move business logic into a new hook (e.g., useComponentLogic). Then compose the UI from smaller parts.