Skip to main content
affpapa.org
RU EN
subagent

react-performance-optimizer — Claude Code subagent: how it works

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.

Install into Claude Code · claude-code-templates All methods and platforms ↓ 
npx claude-code-templates@latest --agent web-tools/react-performance-optimizer
Open on GitHub

What react-performance-optimizer 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.

What it helps with

  • 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 for the agent

  • 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

How to install react-performance-optimizer

1claude-code-templates

npx claude-code-templates@latest --agent web-tools/react-performance-optimizer

2Manually: put the files in place

.claude/agents/react-performance-optimizer.md

For all projects use ~/.claude/agents/. Claude delegates by the description field or an @-mention

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-optimizer

How to install react-performance-optimizer in Claude Code?

Run npx claude-code-templates@latest --agent web-tools/react-performance-optimizer or save the template directly into .claude/agents/react-performance-optimizer.md.

What does react-performance-optimizer do?

It audits React projects for slow component updates, cuts down bundle overhead, and adjusts assets to meet Core Web Vitals targets.

What tools does this subagent require?

It uses Read, Write, Edit, Bash, and Grep to search through files and apply performance modifications.

Similar subagents

All subagents for Frontend and UI →
frontend-developer VoltAgent Community Subagent for building complete frontend applications with React 18+, Vue 3+, and Angular 15+. Handles component architecture, state management, testing, and accessibility. 40,905installs ui-ux-designer Seth Hobson This subagent creates interfaces, wireframes, and design systems. Use it for user flows, accessibility work, and consistent UI patterns. CX Codex 27,069installs fullstack-developer VoltAgent Community This subagent carries a feature across the database, API, and frontend layers. Use it when one change needs a consistent end-to-end implementation. 18,117installs javascript-pro Seth Hobson A subagent for modern JavaScript, async code, and Node.js APIs. Use it to debug event-loop issues, review complex patterns, and plan TypeScript migrations. CX Codex 4,974installs ui-designer VoltAgent Community Designs visual interfaces, builds component libraries, and creates handoff documentation. Ideal when code needs structured UI states and design tokens. 1,979installs ui-designer Seth Hobson Designs interfaces, components, and responsive layouts with implementation in mind. Use it when building screens, forms, tables, or a design system. CX Codex 1,979installs

From the same set224

The whole set →
devops-troubleshooter This subagent investigates logs, deployment failures, and monitoring issues. Use it to trace an incident and work out a fix. 2,328installs dependency-checker A PostToolUse hook that runs a package audit after you touch a dependency file, so outdated or vulnerable packages surface right away. 2,314installs security-scanner This hook runs a security pass whenever Claude edits or writes a file. It looks for vulnerabilities and hardcoded secrets. 2,256installs nextjs-code-quality-enforcer A PostToolUse hook that checks every Next.js file you write: App Router structure, Server and Client Component directives, imports, types. It runs right after an edit. 2,249installs add-changelog Generates and maintains CHANGELOG.md using the Keep a Changelog format. Reads recent commits and git tags to structure release notes. 2,025installs unused-code-cleaner A subagent that finds unused imports, functions and classes and removes them one at a time, validating after each step. Handy after a refactor or before a production deploy. 1,990installs report-generator Converts collected research notes into an organized Markdown document with numbered citations. It takes over at the final stage once all investigation data is ready. 1,930installs fact-checker A Claude subagent that pulls verifiable claims out of a text and rates how trustworthy the sources behind them are. Handy before you publish a draft or repeat someone's number. 1,919installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor