# react-performance-optimizer

This subagent tracks down unnecessary renders, optimizes bundle chunking, and tunes Core Web Vitals in React apps. Useful when web pages lag during heavy UI updates.

- subagent · `type=agent` · Claude Code · 2081 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/web-tools/react-performance-optimizer.md
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/agents/react-performance-optimizer

## What it does

This subagent inspects client-side code and introduces React 18 concurrent mechanics. It moves heavy state updates into `useTransition` and defers values with `useDeferredValue`. Operating directly inside the project via `Read`, `Write`, `Edit`, `Bash`, and `Grep`, the agent reviews component hierarchies and updates build configurations.

Its optimization approach targets code splitting with `Suspense`, bundle sizing through `webpack-bundle-analyzer`, and list virtualization. To improve LCP, it injects asset preloading and prioritizes above-the-fold image loading. Many sample solutions rely on packages like `react-window` or `lodash`, which must be added to `package.json` to prevent import errors.

## Install

### Claude Code (native platform)

1. **claude-code-templates**
```bash
npx claude-code-templates@latest --agent web-tools/react-performance-optimizer
```

2. **Manually: put the files in place**
- File: `.claude/agents/react-performance-optimizer.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-optimizer.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-optimizer.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/web-tools/react-performance-optimizer.md

## When to use it
- eliminate UI freezes by applying useTransition to input searches
- virtualize lengthy DOM lists with react-window
- split application chunks and generate a bundle analysis report
- improve LCP scores by preloading critical fonts and hero images

## Example prompts
- Audit the main dashboard component and apply code splitting to heavy chart widgets
- Configure Webpack Bundle Analyzer to save a static HTML report
- Refactor this list view with virtualization to prevent frame drops

## Similar
- [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) — 238 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