How to use Claude to refactor React derived state
A React developer reviewed an initial Claude Code refactor before expanding it to hundreds of edits; most worked, but declaration errors required manual repairs.
news.ycombinator.com
Suggested prompt
Suggested prompt written by Agents In Use, not the source author. Replace bracketed inputs and review tool permissions first.
Inspect [React codebase] for useState/useEffect calculations derived solely from effect inputs. Plan replacements with useMemo only where behavior is preserved. Change [small initial file set] for review before proceeding. Keep declarations before their uses and avoid unrelated restructuring.
Reach people exploring AI agents
See placements →Evidence at a glance
Sourced account- Source author
- koreth1
- Original account
- Read the source ↗
- Published
- Source link checked
- Reported result
- Most changes were correct, but some introduced undefined variable references and other mistakes. The author believed it probably saved time despite the frustration.
- Human involvement
- The developer reviewed the first files and later repaired broken code manually with another developer.
A linked account supports attribution. It does not mean we independently reproduced its result.
Report an issue with this case
Open correction emailOpens your email app with the case link included. Nothing is sent automatically.
How the agent did it
- Asked for a behavior-preserving derived-state refactor in plan mode.
- Requested changes to a few files and reviewed the initial batch.
- Authorized Claude Code to modify the rest of the codebase.
koreth1 gave Claude Code a repetitive React refactoring task using Opus 4.6. The goal was to find values calculated with useState and useEffect that depended only on the effect inputs, then replace those calculations with useMemo. The developer explicitly required unchanged behavior and began in plan mode.
Claude produced a plan that included a way to identify safe changes. The developer then limited the first implementation to a few files and reviewed the results. Those initial edits looked good, so they authorized changes across the remaining codebase. Claude made hundreds of edits, and the author reported that most were correct.
The larger pass nevertheless introduced mistakes. Some useMemo declarations appeared after code that used their values, producing undefined variable references. Attempts to get Claude to fix those errors led it toward larger structural changes, such as extracting helper functions, instead of simply moving declarations earlier. The developer eventually stopped steering it and repaired the broken code manually with another teammate.
The author thought the process probably still saved time, but found it substantially more frustrating than expected. Who it's for: developers considering a repetitive React refactor who can review broad changes and repair behavior or ordering mistakes.
Prompt
Suggested prompt (written by Agents In Use, not the author's)
Source: Hacker News · koreth1
Frequently asked questions
How did the developer review the first changes?
They asked Claude Code to start with only a few files, reviewed that batch, and authorized the rest after the initial changes looked good.
What went wrong during the broader refactor?
Some useMemo declarations were placed after code using their values. Claude also pursued larger structural fixes, and two developers ultimately repaired the broken code by hand.
More details
Remaining steps
- Attempted agent-led repairs, then fixed broken code with a teammate.
About this account
Claude planned and carried out hundreds of refactoring edits after the developer approved a small initial batch.
Platform: Hacker News. Attribution: https://news.ycombinator.com/item?id=47373241. Prompt: Suggested (written by Agents In Use, not the author's). Sourced by the Agents In Use pipeline.
Credit: koreth1 on Hacker News
Source published
Added to Agents In Use
Source checked
Tools and topics
Claude Code · Opus 4.6 · React
React · Refactoring · useMemo
Editorial completeness: 100/100. Measures documented fields, not agent performance or verified outcomes.