How to use Claude Code to refactor legacy React components efficiently

Claude Code is a different beast compared to Cursor because it lives in your terminal and has a tighter loop with your filesystem. When I'm tackling a 500-line "God Component" from 2019—full of class components, componentDidUpdate hacks, and prop-drilling nightmares—I've found that treating it as a conversation about architecture rather than just a "refactor this" command yields way better results.

The biggest mistake is asking it to "refactor to hooks" in one go. That usually leads to hallucinated state logic or missing edge cases. Instead, I use a tiered approach.

First, I feed it the component and ask for a technical audit. I want it to map out the dependencies and state transitions before a single line of code changes.

claude "Analyze src/components/LegacyDashboard.tsx. Map out all side effects in componentDidUpdate and list every prop that triggers a re-render. Do not change code yet."

Once it identifies the "danger zones," I move into the actual extraction. I've had great success using a "Slice and Dice" prompt. I tell it to extract specific logic into custom hooks first, keeping the UI intact. This isolates the business logic and makes it testable.

claude "Extract the data fetching and polling logic from LegacyDashboard.tsx into a new hook called useDashboardData.ts. Ensure the loading and error states are preserved exactly as they are."

One major gotcha with Claude Code is that it can sometimes be too aggressive with "cleaning up" code, removing comments or utility functions it thinks are redundant but are actually critical for legacy support. To prevent this, I always initialize my session with a specific constraint in the prompt.

My current "Safety First" config logic:

• Explicitly forbid removal of legacy comments unless they are outdated.
• Demand a diff check for any changes affecting the useEffect dependency arrays.
• Force the creation of a temporary "Legacy" folder for the old versions of components so I can diff them manually if the AI breaks a weird edge case.

When it comes to the actual UI migration from Class to Functional components, I use a prompt that focuses on the "Lifecycle Mapping." I explicitly tell it: "Map componentDidMount to useEffect(..., []) and componentDidUpdate to useEffect(..., [deps])." This prevents it from guessing and ensures the execution order remains identical.

For those who are worried about breaking things, I've started piping my test suite directly into the loop. If I'm using Jest, I'll run:

claude "Refactor the state management in UserProfile.tsx to use useReducer. After the change, run 'npm test UserProfile.test.ts' and fix any regressions automatically."

This creates a self-healing loop. The AI writes the code, triggers the test, sees the failure, and iterates until the green light hits. It's significantly faster than the manual "Write -> Switch to Terminal -> Run Test -> Copy Error -> Paste to AI" cycle in Cursor.

The productivity gain here isn't just in the typing speed; it's in the cognitive load. I no longer have to hold the entire dependency tree of a legacy component in my head. I let Claude Code act as the "map" while I act as the "architect" approving the structural changes.