---
description: 
globs: 
alwaysApply: false
---
# React Component Refactoring Rules

1.  **Component Extraction:**
    *   Identify distinct sections or large pieces of JSX within a component.
    *   Extract these sections into separate, self-contained functional React components.

2.  **File Organization:**
    *   Create a dedicated directory (e.g., `src/components`) for reusable components.
    *   Place each extracted component in its own file within this directory.

3.  **Naming Convention:**
    *   Name component files using kebab-case (e.g., `UserProfile.tsx` -> `user-profile.tsx`).
    *   Export components using PascalCase (e.g., `export const UserProfile = ...`).

4.  **Data/Type Colocation:**
    *   If specific data structures, constants, or TypeScript types/interfaces are solely used by one component, move them into that component's file.
    *   Export data/types if needed by other parts of the application, otherwise keep them local.

5.  **Import Updates:**
    *   Modify the original parent component to import the newly created components.
    *   Replace the extracted JSX/logic with the imported component tag (e.g., `<UserProfile />`).
    *   Remove the original code (definitions, data, types) that was moved to the new component files.