react-performance-optimization — Claude Code subagent: what it does
A subagent that tracks down React performance problems: wasted re-renders, bloated bundles, memory leaks. Useful when a page drags or Core Web Vitals slip.
npx claude-code-templates@latest --agent performance-testing/react-performance-optimizationWhat react-performance-optimization does
The subagent works like a React performance specialist. It looks at component re-renders and reconciliation, digs through the bundle, hunts memory leaks and checks how data loading behaves. Core Web Vitals — LCP, FID, CLS — get their own pass. Its toolset is plain: Read, Write, Edit and Bash, so it reads code, edits files and runs build or profiling commands.
The instructions ship with concrete patterns: component memoization via React.memo paired with useMemo, code splitting through lazy and Suspense. The author asks for measurable fixes with before/after comparisons, so expect actual diffs and numbers rather than generic advice.
One thing to weigh before you install it: the description is marked PROACTIVELY, which means the agent can pick up performance-looking tasks on its own. If you would rather keep it out of routine component edits, check your subagent settings before pointing it at a live branch.
What it helps with
- find why a component re-renders on every keystroke
- shrink the bundle with code splitting
- clear memory leaks and missing effect cleanups
- diagnose failing LCP, FID and CLS scores
- compare performance before and after a fix
Example prompts for the agent
- profile this todo list: why does it re-render on every keystroke in the search field
- split the app bundle and move the Dashboard page into its own chunk with lazy and Suspense
- find the memory leak in this component and show me before/after measurements
How to install react-performance-optimization
1claude-code-templates
npx claude-code-templates@latest --agent performance-testing/react-performance-optimization2Manually: put the files in place
.claude/agents/react-performance-optimization.mdFor all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention
Manually: put the files in place
.codex/agents/react-performance-optimization.tomlCodex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/
Manually: put the files in place
.cursor/agents/react-performance-optimization.mdCursor also reads .claude/agents/
Step by step, with commands for each platform: Claude Code subagents: how to create one, call it and keep context clean
Questions about react-performance-optimization
How do I install react-performance-optimization in Claude?
Use the templates CLI: npx claude-code-templates@latest --agent performance-testing/react-performance-optimization. The subagent file then lives at .claude/agents/react-performance-optimization.md.
What does react-performance-optimization do?
It analyzes React app performance: re-renders, bundle size, memory leaks, data loading and Core Web Vitals. It edits code and runs commands through Bash.
Does this subagent run on its own?
The description carries a PROACTIVELY marker, so the agent can pick up tasks that look like performance work without an explicit call. Restrict it in your subagent settings if that gets in the way.
