Refactoring a React component without a plan turns into a 400-line rewrite that breaks two tests nobody understands. These 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 with refactor prompts for the general-purpose patterns.
Best for
- Production React codebases
- Next.js / Astro hybrid projects
- Pre-release performance fixes
- Test-coverage prep
- Component-library extraction
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. 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 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.
{paste}5. useMemo / useCallback correctness audit
Below is a component using useMemo and useCallback. For each: (a) is the memo actually needed, (b) is the dependency array correct, (c) does it cause re-renders by reference. Mark removable memos and missing ones.
{paste}6. React.memo audit
Below: a parent + 3 children, with React.memo on the children. 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 where actually 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 / event handler / external store, (b) does it have race conditions, (c) what would replace it. Aim to reduce 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), (c) async submission lifecycle, (d) accessibility. Output before/after.
{paste}9. Render-prop / HOC → 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.
{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, (b) re-render cost, (c) what would migrate vs stay. Output a verdict and 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.
{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 rationale for each.
{paste}Common mistakes
- Rewriting the component instead of refactoring — you lose the bug fixes nobody documented
- Sprinkling React.memo / useMemo / useCallback without measuring — most do nothing or hurt
- Over-splitting into 6 tiny components where 2 would do — premature abstraction is worse than the smell
- Moving local state to global store the moment two siblings need it
- Skipping the server vs client boundary discussion in App Router and then debugging “use client” cascades
- Replacing useEffect with another useEffect instead of deriving state or moving to an event handler
Related
- TypeScript error diagnosis prompts
- Refactor prompts
- Performance optimization prompts
- Accessibility audit prompts
- Test generation prompts
Tags: #Prompt #AI coding #AI coding