React Refactor Assistant

Find → Preview → Fix messy React code — instantly and safely.

Demo

What it fixes

Prop drilling across 5+ components

Props drilled through layers that never use them → one-click React Context generation.

Unused exports in large codebases

Functions, components, and types exported but never imported anywhere → safely removed.

Wrapper components that do nothing

Components that exist only to forward props to a single child → collapsed; parent uses child directly.

Messy props interfaces

Interface fields your component doesn't destructure → automatically cleaned up.

How it works

Nothing is applied without your approval. Every change is previewed and fully reversible.

1. Click Analyze — scans your React project.
2. Review — issues appear in the Explorer tree view. Click any issue to see a diff preview.
3. Apply — fix individually or batch-select multiple. Every change is verified against TypeScript.
4. Safe by design — if something breaks, the tool rolls back everything automatically.

No config files. No CLI. No pipeline to set up.

Quick start

# Install from VS Code Marketplace
# Or search "React Refactor Assistant" in Extensions view

1. Open a React/TypeScript project.
2. Ctrl+Shift+P → React Refactor: Analyze Workspace.
3. See findings in the React Refactor tree view.
4. Click any issue → diff preview.
5. Right-click → Apply to fix.

Real examples

Prop drilling

// Before: 3 components, one prop
<Page>
  <Sidebar user={user}>
    <Profile user={user} />  {/* only Profile uses 'user' */}
  </Sidebar>
</Page>

// After: one click → context auto-generated
<Page>
  <UserProvider>
    <Sidebar>
      <Profile />
    </Sidebar>
  </UserProvider>
</Page>

Unused export

// Before: exported, but nothing imports it
export function formatDate(date: Date): string { ... }

// After: safely unexported
function formatDate(date: Date): string { ... }

Forwarding wrapper

// Before: WrapperBox forwards everything to Card
<Page>
  <WrapperBox>
    <Card />
  </WrapperBox>
</Page>

// After: parent uses Card directly
<Page>
  <Card />
</Page>

Safety

• Preview first — see exactly what changes before they happen.
• TypeScript verified — every apply runs a full type check.
• Automatic rollback — if verification fails, zero side effects.

VS Code commands

Issues also appear as 💡 Quick Fix suggestions at the cursor position in any .ts / .tsx file.

Requirements

• VS Code 1.85+
• TypeScript 4.0+
• React project (JSX components)

License

MIT