react-component-refactor

React Component Refactoring

Core Capability

Analyze existing code structure, identify reusable logic, and refactor according to React best practices. Strictly preserve original logic intent — only optimize and split at the structure level.

The difference from react-component-extraction: extraction pulls out a specific piece for reuse; refactoring restructures the entire component for clarity and maintainability. Think of extraction as surgery, refactoring as renovation.

Workflow

1. Confirm refactoring scope and output directory
2. Analyze code structure (identify reusable units)
3. Design refactoring plan (seek confirmation)
4. Execute refactoring
5. Verify logic equivalence

---

1. Pre-refactoring Preparation

Confirm User Input

Info	Description
Refactoring scope	File path or code snippet specified by user
Output directory	Where refactored files go (do not change without permission)
Refactoring goal	Expected outcome (e.g., split sub-components, extract Hooks, full refactor)

Code Structure Analysis

Analysis dimensions:
├── Component scale: total lines, JSX nesting depth
├── Responsibility identification: what different responsibilities does this component handle
├── Duplicate logic: similar JSX structures or logic patterns
├── State distribution: is state distribution reasonable
├── Side effects: number and clarity of useEffect responsibilities
└── Reusable units: what can become independent components or Hooks

---

2. Reusable Unit Identification Rules

Identify as independent component when:

Condition	Example
JSX structure exceeds 30 lines with relatively independent logic	Complex form sections, data display cards
Same structure appears 2+ times in the same file	Similar list items, repeated button groups
Has independent interaction state (expand/collapse)	Collapsible panels, dropdown menus, modal triggers
Can be used independently from current context	Generic Loading state, empty state placeholder, error block

Identify as custom Hook when:

Condition	Example
Contains 2+ related state values + useEffect	Data fetching logic (loading + data + error)
Same Hook combination used in multiple places	Pagination logic, form validation logic
Side effect logic not directly tied to UI rendering	Event listeners, timers, WebSocket connections
High complexity logic affecting main component readability	Complex filter/sort logic, permission check logic

Keep in original component when:

• Logic is simple (< 10 lines), splitting would increase cognitive overhead
• Highly coupled with parent state, splitting requires excessive props passing
• Used only once in current component with no reuse value

---

3. Refactoring Plan Design

Present the plan to the user for confirmation before executing:

Refactoring plan: [original filename]

Original file: src/pages/Order/index.tsx (320 lines)

Split plan:
├── ? OrderHeader.tsx        → Extract order header info display (original L12-L58)
├── ? OrderItemList.tsx      → Extract order item list (original L60-L130)
├── ? useOrderDetail.ts      → Extract order data fetching logic
└── ? index.tsx              → Refactored main file (keep core orchestration logic)

Output directory: src/pages/Order/components/

Confirm execution?

---

4. Code Generation Standards

TypeScript Type Standards

• Props interface must be explicitly defined, required/optional clearly distinguished
• Enums/unions prefer TypeScript native types

Component Structure

Each component file organized in this order: external imports → internal imports → type definitions → component implementation → exports

Custom Hook Standards

Hook returns use object format (when > 2 return values), including standard data / loading / error / refetch fields.

---

5. 1:1 Logic Preservation Guarantee

Never change these:

Prohibited change	Why
Business logic	Conditions, calculations, data processing must remain identical
Side effect timing	useEffect trigger timing and dependencies must not change
State initial values	All state initial values must match original code
Event handling logic	Event callback execution logic must not be simplified or modified
Render conditions	All conditional rendering logic must remain consistent
Props interface	Exposed Props signature must not have breaking changes

Logic Equivalence Verification Checklist

• [ ] Conditional rendering: all &&, ternary conditions match original
• [ ] List rendering: map data source, key values, render content match original
• [ ] Event binding: all handler trigger conditions and execution logic unchanged
• [ ] Side effect dependencies: useEffect dependency arrays and trigger timing unchanged
• [ ] State flow: state update logic completely identical to original

Difference Annotation

If original code has obvious bugs or anti-patterns, do not fix them — annotate and inform the user:

// ⚠️ Note: original code uses index as key here, consider changing to item.id later
{items.map((item, index) => <Item key={index} data={item} />)}

---

6. React Best Practices Check

• All components use function components + Hooks
• Props interface defined in TypeScript
• Functions passed to child components wrapped in useCallback
• Objects/arrays passed to child components wrapped in useMemo
• Pure display sub-components wrapped in React.memo
• Async operations in useEffect use AbortController for unmount scenarios
• List rendering uses stable, unique business IDs as keys

---

Output Format

## React Component Refactoring Report

### Refactoring Overview

- **Original file**: `[original file path]` (X lines)
- **Output directory**: `[user-specified directory]`
- **Split file count**: X

### Split Results

| File           | Type                 | Original lines | Description                |
| -------------- | -------------------- | -------------- | -------------------------- |
| ComponentA.tsx | Sub-component        | L12~L58        | Responsibility description |
| useXxx.ts      | Custom Hook          | L60~L90        | Responsibility description |
| index.tsx      | Refactored main file | —              | Core orchestration logic   |

### Logic Equivalence Verification

- [ ] Conditional rendering: ✅ Matches original
- [ ] List rendering: ✅ Key values and data source match
- [ ] Event binding: ✅ Trigger conditions and execution logic unchanged
- [ ] Side effect dependencies: ✅ useEffect dependency arrays unchanged
- [ ] State flow: ✅ State update logic completely identical

### Original Code Issues Found (annotated, not fixed)

- If none: ✅ No obvious bugs or anti-patterns found