Refactoring a React component without a plan turns into a 400-line rewrite that breaks two tests nobody understands. These 13 prompts force the model to name the specific smell (prop-drilling, fat component, missed memo, server/client confusion, effect overuse), propose the smallest viable change, and explain the trade-off before touching a line. Pair them with the general refactor prompts for non-React patterns.
TL;DR
- Make the model diagnose before it rewrites. Every prompt below asks for the smell and the smallest fix first.
- The biggest 2026 change: React Compiler 1.0 (stable since October 2025; in Next.js 16 it’s stable but still opt-in, off by default) auto-inserts the equivalent of
useMemo,useCallback, andReact.memoat build time. If your project hasreactCompiler: true, your memo prompts should ask whether a manual memo is even needed anymore. - For App Router work, default to Server Components and only add
"use client"for state, effects, event handlers, or browser APIs. - Best models for this as of June 2026: Claude Opus 4.7 (87.6% SWE-bench Verified) or Sonnet 4.6 for fast iterations inside Claude Code or Cursor; GPT-5.5 is a strong second opinion. Paste the real component, not a paraphrase.
Best for
- Production React codebases (React 19.x)
- Next.js 16 App Router and Astro hybrid projects
- Pre-release performance fixes
- Test-coverage prep
- Component-library extraction
Which model and tool to run these in
| Setup | Why | As of June 2026 |
|---|---|---|
| Claude Opus 4.7 in Claude Code | Top SWE-bench Verified (87.6%); reads the whole file tree, edits in place | Max $100/$200; Pro $20 bundles Claude Code |
| Sonnet 4.6 in Cursor | Fast, cheap iterations; 1M-token context | Cursor Pro $20, runs Sonnet 4.6 / Opus 4.7 / GPT-5.5 |
| GPT-5.5 (ChatGPT Plus) | Strong second opinion on tricky boundary calls | Plus $20; in-app context ~320 pages |
For agentic refactors that touch multiple files, keep the scope narrow per prompt — see why Claude Code refactor scope drifts if your agent starts rewriting half the app.
1. Smell identifier
Below is a React component. List the top 5 code smells in priority order.
For each: the smell, why it matters in production, and the smallest refactor
that addresses it. Do not rewrite yet.
[paste component]2. Extract-custom-hook refactor
Below is a component with mixed UI + logic. Extract the logic into a custom
hook. Output: (a) the new hook with its API, (b) the simplified component,
(c) what the hook explicitly does NOT own, (d) where to put the hook file.
[paste]3. State-lift / drill-down refactor
Below: 2 sibling components that share state via prop-drilling 3 levels deep.
Propose the right placement of state - local, lifted, context, or external
store. Justify against re-render cost and ownership clarity.
[paste]4. Server vs client component split (Next.js 16 App Router)
Below is a Next.js App Router component that mixes server fetching and client
interactivity. Refactor into a server boundary + client boundary split.
Output: (a) which file becomes "use client", (b) what data passes between
them, (c) what does NOT cross the boundary (keep secrets and data fetching
server-side).
[paste]5. useMemo / useCallback correctness audit
Below is a component using useMemo and useCallback. First tell me whether
React Compiler is enabled in this project (assume Next.js 16 reactCompiler:true
unless I say otherwise). If it is, most manual memos are redundant - flag them
for removal. If it is NOT, audit each: (a) is the memo actually needed,
(b) is the dependency array correct, (c) does it cause re-renders by reference.
[paste]6. React.memo audit
Below: a parent + 3 children, with React.memo on the children. If React
Compiler is on, React.memo is usually unnecessary - say so per child.
Otherwise, for each child check: (a) does memoization save work, (b) are props
stable, (c) does a function or object prop break memo. Remove unneeded memos;
add equality functions only where measurably useful.
[paste]7. useEffect simplification
Below is a component with [N] useEffects. For each: (a) is this effect
necessary or should it be derived state computed during render, an event
handler, or an external store, (b) does it have race conditions, (c) what
replaces it. Apply the "You Might Not Need an Effect" rules and aim to cut
effects by at least 50%.
[paste]8. Form-control refactor
Below is a form with [N] controlled inputs. Refactor for: (a) consistent
change-handler pattern, (b) validation placement (per-field vs schema with
Zod), (c) async submission lifecycle, (d) accessibility (labels, aria-invalid,
focus management). Output before/after.
[paste]9. Render-prop / HOC to hook migration
Below is a component using render-props or an HOC pattern. Migrate to a custom
hook. Output: (a) the hook, (b) the new component, (c) any usage sites that
change.
[paste]10. Long-component splitter
Below is a [N]-line component. Propose the right splits into smaller
components. For each split: name, props it owns, what stays internal. Avoid
premature abstraction - justify each split with a real reason, not "it's long".
[paste]11. Context-vs-store decision
Below is a component using React Context for [state]. Evaluate: (a) is Context
the right fit or should this be Zustand / Jotai / Redux Toolkit, (b) the
re-render cost (Context re-renders all consumers on any change), (c) what
would migrate vs stay. Output a verdict and a migration sketch.
[paste]12. Test-friendly refactor
Below is a component I cannot test easily. Refactor for testability:
(a) extract pure functions, (b) isolate side effects, (c) replace
impossible-to-mock parts. Output: refactored component + 3 test scaffolds
using React Testing Library + Vitest.
[paste]13. Suspense / error-boundary placement
Below is a component tree with async data. Propose where to place Suspense
boundaries and Error Boundaries. Output: tree diagram with boundary markers
and a one-line rationale for each.
[paste]Common mistakes
- Rewriting the component instead of refactoring - you lose the bug fixes nobody documented.
- Sprinkling
React.memo/useMemo/useCallbackby hand on a React Compiler project - the compiler already did it, and manual memos can fight the compiler. - Over-splitting into 6 tiny components where 2 would do - premature abstraction is worse than the smell.
- Moving local state to a global store the moment two siblings need it. Lift first; reach for Zustand later.
- Skipping the server vs client boundary discussion in App Router and then debugging
"use client"cascades for a day. - Replacing one
useEffectwith another instead of deriving state during render or moving logic to an event handler.
FAQ
Do I still need useMemo and useCallback in 2026?
Mostly no, if your project runs React Compiler 1.0 (stable since October 2025; in Next.js 16 it’s stable but still opt-in, off by default, enabled via reactCompiler: true). The compiler analyzes your component tree at build time and inserts the equivalent of useMemo, useCallback, and React.memo automatically; compiler-optimized components show a “Memo” badge in React DevTools. On projects without the compiler, the manual hooks still matter, which is why prompts 5 and 6 ask the model to confirm the setup first.
Which model should I use for React refactors?
As of June 2026, Claude Opus 4.7 leads SWE-bench Verified at 87.6%, with Sonnet 4.6 as the fast, cheaper workhorse; both run in Claude Code and Cursor. GPT-5.5 is a solid second opinion for tricky boundary calls. Run multi-file refactors inside an agent (Claude Code or Cursor) so it can read neighboring files, but keep each prompt scoped to one smell.
How do I stop the AI from rewriting the whole component?
Every prompt here ends the diagnosis phase with “Do not rewrite yet” or asks for the smallest change. Run the smell identifier (prompt 1) first, pick one smell, then run the matching targeted prompt. If an agent still over-reaches, tighten its instructions and scope.
What about the “You Might Not Need an Effect” rule?
If a value can be computed from existing props or state, calculate it during render instead of syncing it in a useEffect. Effects belong to synchronization with external systems (network, DOM, subscriptions), not to deriving state. Prompt 7 applies this directly. See React’s official guide linked below.
Related
- TypeScript error diagnosis prompts
- Refactor prompts
- Performance optimization prompts
- Accessibility audit prompts
- Test generation prompts
- Claude Code execution prompts
External: React Compiler docs and You Might Not Need an Effect.
Tags: #Prompt #AI coding