# react-performance-optimization

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.

- subagent · `type=agent` · Claude Code · 3935 installs
- Author: davila7
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/performance-testing/react-performance-optimization.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/agents/react-performance-optimization

## What it 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.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --agent performance-testing/react-performance-optimization
```

2. **Manually: put the files in place**
- File: `.claude/agents/react-performance-optimization.md` — For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

### Codex

**Manually: put the files in place**
- File: `.codex/agents/react-performance-optimization.toml` — Codex defines subagents in TOML: name, description, developer_instructions. Move the Markdown text into developer_instructions by hand. For all projects use ~/.codex/agents/

### Cursor

**Manually: put the files in place**
- File: `.cursor/agents/react-performance-optimization.md` — Cursor also reads .claude/agents/

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/performance-testing/react-performance-optimization.md

## When to use it
- 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
- 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

## Similar
- [react-performance](https://affpapa.org/en/nevibecode/skills/react-performance.md) — skill · 4900 installs
- [frontend-developer](https://affpapa.org/en/nevibecode/agents/voltagent-community-frontend-developer.md) — subagent · 40905 installs
- [ui-ux-designer](https://affpapa.org/en/nevibecode/agents/ui-ux-designer.md) — subagent · 27069 installs
- [fullstack-developer](https://affpapa.org/en/nevibecode/agents/fullstack-developer.md) — subagent · 18117 installs
- [javascript-pro](https://affpapa.org/en/nevibecode/agents/javascript-pro.md) — subagent · 4974 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/voltagent-community-ui-designer.md) — subagent · 1979 installs
- [ui-designer](https://affpapa.org/en/nevibecode/agents/ui-designer.md) — subagent · 1979 installs

From the same set: [davila7/claude-code-templates](https://affpapa.org/en/nevibecode/by/davila7/claude-code-templates.md) — 205 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md