# react-performance-optimizer

Субагент находит узкие места в рендеринге React, настраивает виртуализацию списков и помогает урезать размер бандла. Пригодится при просадках FPS и плохих метриках Core Web Vitals.

- субагент · `type=agent` · Claude Code · 2081 установка
- Автор: davila7
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/web-tools/react-performance-optimizer.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/agents/react-performance-optimizer

## Что делает

Субагент анализирует компоненты и предлагает паттерны React 18: перевод тяжёлых вычислений на `useTransition` и `useDeferredValue`, отложенную загрузку маршрутов через `React.lazy` и предварительную подгрузку чанков. Для работы ассистент использует встроенные инструменты `Read`, `Write`, `Edit`, `Bash` и `Grep`, поэтому может самостоятельно проверять исходный код и конфиги сборщика.

В рендеринге агент делает упор на разделение бандла, настройку `webpack-bundle-analyzer` и виртуализацию списков через библиотеки вроде `react-window`. Для ускорения метрики LCP субагент настраивает предзагрузку шрифтов и критических стилей через теги `link`. Если в проекте нет `lodash` или специализированных библиотек виртуализации, код из шаблонов субагента потребует установки внешних пакетов.

## Установка

### Claude Code (родная платформа)

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

2. **Вручную: положить файлы**
- Файл: `.claude/agents/react-performance-optimizer.md` — Для всех проектов — ~/.claude/agents/. Claude делегирует задачу сам по полю description или по @-упоминанию

### Codex

**Вручную: положить файлы**
- Файл: `.codex/agents/react-performance-optimizer.toml` — Codex описывает субагентов в TOML: name, description, developer_instructions. Текст из Markdown перенесите в developer_instructions вручную. Для всех проектов — ~/.codex/agents/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/agents/react-performance-optimizer.md` — Cursor понимает и .claude/agents/

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/agents/web-tools/react-performance-optimizer.md

## Когда брать
- устранить задержки интерфейса через useTransition и useDeferredValue
- настроить виртуализацию тяжёлых списков с помощью react-window
- разделить бандл на чанки и настроить webpack-bundle-analyzer
- ускорить отрисовку первого экрана и показатель LCP

## Примеры запросов агенту
- Проверь компонент SearchResults и переведи фильтрацию списка на concurrent-паттерны React
- Настрой сборку Webpack так, чтобы сформировать отчёт bundle-report.html
- Оптимизируй отображение длинного каталога с помощью виртуализации

## Похожие
- [frontend-developer](https://affpapa.org/nevibecode/agents/voltagent-community-frontend-developer.md) — субагент · 40905 установок
- [ui-ux-designer](https://affpapa.org/nevibecode/agents/ui-ux-designer.md) — субагент · 27069 установок
- [fullstack-developer](https://affpapa.org/nevibecode/agents/fullstack-developer.md) — субагент · 18117 установок
- [javascript-pro](https://affpapa.org/nevibecode/agents/javascript-pro.md) — субагент · 4974 установки
- [ui-designer](https://affpapa.org/nevibecode/agents/voltagent-community-ui-designer.md) — субагент · 1979 установок
- [ui-designer](https://affpapa.org/nevibecode/agents/ui-designer.md) — субагент · 1979 установок

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 238 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md