react-component-extraction

React Component & Logic Extraction

Core Capability

Systematically analyze a target logic's external dependencies, evaluate extraction boundaries, design sensible component/Hook interfaces, and achieve zero-breakage extraction while keeping the code safe and robust.

The key insight: extraction isn't just moving code around. It's about finding the right boundary — the seam where responsibilities naturally separate — and designing an interface that preserves all existing behavior.

Workflow

1. Context dependency analysis
2. Evaluate extraction boundary (minimization principle)
3. Design interface structure
4. Confirm file location
5. Execute extraction
6. Verify compatibility

---

1. Context Dependency Analysis

Identify every external dependency the target logic relies on:

Dependency type	What to check
Props	Which parent props does the target logic use?
State	Which state values are used? Do they need to be lifted or passed in?
Context	Does it consume useContext? Will it still be within the Provider after extraction?
Ref	Does it depend on DOM refs or component refs?
External functions	Does it call parent callbacks, utility functions, or global methods?
Side effects	Does it contain useEffect? Are dependencies complete?
Styles	Does it depend on parent CSS classes or style variables?

---

2. Minimization Principle

Choose the lightest extraction that solves the problem:

Scenario	Recommended approach
Complex logic but simple UI	Extract as custom Hook
Independent, reusable UI structure	Extract as child component
Logic + UI tightly coupled, reused in multiple places	Extract as full component (with internal state)
Only used in current component, just too long	Extract as sub-component within the same file

---

3. Interface Design

• Props interface must be explicitly defined in TypeScript, with required/optional clearly distinguished
• Optional Props must have default values or null guards
• When a Hook returns more than 2 values, use an object return type for extensibility
• Don't expose internal implementation details through the interface

---

4. File Location Confirmation

Search the project's existing structure, then present candidates to the user for confirmation:

Suggested location for `UserCard` component:

  Option A: src/components/business/user/UserCard.tsx
            (Reason: same level as existing UserList, UserAvatar)

  Option B: src/pages/profile/components/UserCard.tsx
            (Reason: currently only used by Profile page)

Where would you like to place it?

---

5. Safety & Robustness

• Original callers must not break — extraction preserves existing behavior
• All optional Props have default values or ?. guards
• All useEffect have cleanup functions
• Components with async operations handle loading/error states
• Context dependencies confirmed to be within Provider subtree

---

Output Format

## Component Extraction Report

### Extraction Overview

- **Extraction type**: [Child component / Custom Hook / Full component]
- **File location**: `[confirmed file path]`
- **Original caller**: `[original file path]` ([modified / unmodified])

### Dependency Analysis

| Dependency type | Item | Handling                        |
| --------------- | ---- | ------------------------------- |
| Props           | —    | Passed via props                |
| State           | —    | Extracted with logic            |
| Context         | —    | Confirmed within Provider scope |

### Generated Files

`[new file path]` - Complete component/Hook code

### Compatibility Verification

- [ ] Original caller interface preserved
- [ ] Optional Props have default values or null guards
- [ ] useEffect has cleanup functions
- [ ] Async operations handle loading/error states