Back to Collections
Collection • 4 Prompts

Prompts Every React Developer Should Keep

Audit, debug, and refactor React code with prompts that enforce discipline.

Prompts in this collection

Claude

Audit this React component for unnecessary re-renders. List each cause (prop identity, context, state colocation), rank by measured impact, then propose the minimal fix for each — memo, callback stability, or state restructuring. Show before/after code. Do not suggest rewrites larger than the problem. [PASTE COMPONENT]

▸ ready to run
Claude

Audit this React component for unnecessary re-renders. List each cause (prop identity, context, state colocation), rank by measured impact, then propose the minimal fix for each — memo, callback stability, or state restructuring. Show before/after code. Do not suggest rewrites larger than the problem. [PASTE COMPONENT]

React Performance Audit Prompt

A performance-review prompt that forces ranking by impact before any fix, which stops the usual memo-everything reflex. The minimal-fix constraint keeps diffs reviewable. Paste one component at a time for best results.

1.3K210
Claude

Review every useEffect in this file. For each: state what it synchronises, whether it should be an event handler instead, and whether the dependency array is correct. Flag effects that should not exist. Output a table: effect | purpose | verdict | fix. [PASTE FILE]

▸ ready to run
Claude

Review every useEffect in this file. For each: state what it synchronises, whether it should be an event handler instead, and whether the dependency array is correct. Flag effects that should not exist. Output a table: effect | purpose | verdict | fix. [PASTE FILE]

useEffect Dependency Doctor

Turns the vaguest part of React — effects — into a table audit with a verdict per effect. The 'should this be an event handler' question catches the majority of real-world effect misuse. Great pre-review pass.

983175
Claude

Given this stack trace and code context, produce a ranked list of at most four hypotheses for the root cause. For each: the evidence for, the evidence against, and the single cheapest experiment that would confirm or kill it. Do not propose any fix until one hypothesis survives. [TRACE + CONTEXT]

▸ ready to run
Claude

Given this stack trace and code context, produce a ranked list of at most four hypotheses for the root cause. For each: the evidence for, the evidence against, and the single cheapest experiment that would confirm or kill it. Do not propose any fix until one hypothesis survives. [TRACE + CONTEXT]

Stack Trace Hypothesis Ranker

A debugging discipline in prompt form: hypotheses with evidence both ways and a cheapest-experiment step, with fixes explicitly forbidden until confirmation. Cuts wild-goose-chase time dramatically on unfamiliar codebases.

1.5K240
Claude

This function is too long and untested. Produce: (1) a characterisation test suite that pins current behaviour including its bugs, (2) a seam-by-seam extraction plan, (3) the refactored version. Behaviour changes are forbidden — flag suspected bugs in comments instead of fixing them. [PASTE FUNCTION]

▸ ready to run
Claude

This function is too long and untested. Produce: (1) a characterisation test suite that pins current behaviour including its bugs, (2) a seam-by-seam extraction plan, (3) the refactored version. Behaviour changes are forbidden — flag suspected bugs in comments instead of fixing them. [PASTE FUNCTION]

Legacy Function Strangler

A refactoring prompt that puts characterisation tests before any code movement and outlaws behaviour changes — suspected bugs get flagged, not silently fixed. The output is a safe, reviewable migration rather than a rewrite gamble.

643105