react-performance
Оптимизация производительности React-приложения
React-приложения могут замедляться, потому что рендеры, списки, бандлы, изображения и тяжелые вычисления незаметно дорожают. Этот навык дает практические паттерны для диагностики и снижения этих затрат.
Установить с помощью моего Агента
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Review the Skillstore skill "react-performance" from https://skillstore.io/skills/cjharmath-react-performance.md and its manifest at https://skillstore.io/api/skills/cjharmath-react-performance/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «react-performance». Список дашборда замедляется при изменении фильтров.
Ожидаемый результат:
Навык порекомендовал бы виртуализировать строки, мемоизировать компоненты строк, стабилизировать callbacks и провести профилирование до и после изменений.
Использование «react-performance». Поле поиска запускает дорогостоящую фильтрацию при каждом нажатии клавиши.
Ожидаемый результат:
Навык предложил бы debounce для ввода, мемоизацию отфильтрованных данных и измерение длительности рендера в React DevTools.
Использование «react-performance». Бандл маршрута задерживает первую загрузку.
Ожидаемый результат:
Навык предложил бы разделить тяжелые маршруты, лениво загружать изображения и проверить размер бандла после изменения.
Аудит безопасности
БезопасноThe static findings are false positives from Markdown examples for React performance patterns. Dynamic imports, a worker example, and NODE_ENV appear only in documentation snippets. No prompt injection, data exfiltration intent, or malicious workflow was found in SKILL.md.
Факторы риска
⚡ Содержит скрипты (4)
⚙️ Внешние команды (27)
🔑 Переменные окружения (2)
Поделиться и цитировать этот отчет
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
Копировать ссылку на отчёт
https://skillstore.io/skills/cjharmath-react-performance/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportЗначок Markdown
[](https://skillstore.io/skills/cjharmath-react-performance?utm_source=security_passport_badge)Значок HTML
<a href="https://skillstore.io/skills/cjharmath-react-performance?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/cjharmath-react-performance/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Встраиваемая карточка
<iframe src="https://skillstore.io/embed/skills/cjharmath-react-performance.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Академические ссылки (APA · BibTeX · CFF)
Цитата APA
CJHarmath. (2026). react-performance security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/cjharmath-react-performance/audits/8Цитата BibTeX
@techreport{cjharmath-cjharmath-react-performance-2026,
author = {CJHarmath},
title = {react-performance security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/cjharmath-react-performance/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-performance security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "CJHarmath"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/cjharmath-react-performance/audits/8"
identifiers:
- type: other
value: "skillstore:cjharmath-react-performance:audit:8"
description: "Skillstore immutable audit report identifier"
Оценка Skillstore
Почему такая оценка Достоверность доказательств: ВысокийЧто вы можете построить
Настройка сложных списков
Определить, когда длинному списку нужны виртуализация, мемоизированные строки, стабильные callbacks и измеренная производительность прокрутки.
Проверка паттернов рендера
Проверить React-функциональность на ненужные рендеры перед релизом или во время ревью производительности.
Снижение задержек взаимодействия
Спланировать небольшие изменения для медленных фильтров, поисков, дашбордов и маршрутов, которые задерживают действия пользователя.
Попробуйте эти промпты
Проверь этот React-компонент и определи вероятные ненужные рендеры. Сначала предложи самые небольшие изменения.
Преобразуй это представление большого списка в план виртуализации. Включи размеры элементов, мемоизацию и проверки доступности.
Проведи аудит этих селекторов Zustand и props компонентов. Предложи изменения для селекторов, shallow comparison и мемоизации.
Создай приоритизированный план производительности React для этой функции. Охвати профилирование, разделение бандла, вынос работы в worker и метрики валидации.
Лучшие практики
- Профилируйте перед изменением кода, затем измеряйте то же взаимодействие после каждой оптимизации.
- Применяйте мемоизацию только когда props стабильны, а стоимость рендера значима.
- Предпочитайте точечные селекторы и виртуализированные списки перед широкими архитектурными изменениями.
Избегать
- Мемоизация каждого значения без измерения стоимости рендера.
- Передача новых объектов или callbacks в мемоизированные дочерние компоненты при каждом рендере.
- Выбор целых stores, когда компонентам нужно только одно поле.