Normalize Components

What problem does it solve?

This workflow addresses the issue of overly large and complex React components that hinder maintainability and readability by systematically breaking them down into smaller, more manageable modules.

Core Features & Use Cases

• Component Decomposition: Splits components exceeding 300 lines into smaller, focused sub-components.
• Hook Extraction: Identifies and extracts reusable stateful logic into custom hooks.
• Concern Separation: Enforces separation of concerns by isolating UI, state, and business logic.
• Use Case: Refactor a monolithic UserProfile component into smaller components like UserProfileHeader, UserProfileDetails, and custom hooks for useFetchUserData and useUpdateProfile.

Quick Start

Use the normalize-components workflow to split the component located at src/presentation/components/knowledge/KnowledgePage.tsx.