aidenybai/react-scan

Что это?

Ключевые возможности

• 01Подсвечивает на странице компоненты с ненужными повторными рендерами
• 02Не требует изменений кода при подключении через тег script
• 03Предоставляет панель инструментов на странице для изучения рендеров
• 04Предлагает API `scan`, `useScan` и `setOptions` для программного управления
• 05Позволяет отслеживать рендеры конкретного компонента с помощью `onRender`
• 06Включает расширение для браузера и руководства по настройке для фреймворков

Сценарии использования

• Поиск лишних повторных рендеров в медленном одностраничном приложении на React
• Проверка того, какие компоненты перерисовываются после изменения состояния во время разработки
• Аудит проекта на Next.js или Remix для выявления ненужных рендеров
• Отслеживание рендеров одного компонента с помощью хука `onRender`

Быстрый старт

1. 1

   Запустите команду init, чтобы автоматически определить ваш фреймворк и настроить React Scan

   npx -y react-scan@latest init
2. 2

   Или установите пакет вручную через npm

   npm install -D react-scan
3. 3

   Добавьте тег script в приложение (например, в index.html перед всеми скриптами)

Что важно знать

• !В README в качестве преемника рекомендуется React Doctor, поэтому React Scan может получать меньше внимания в разработке.
• !Для ручной настройки нужно добавить тег script или код для конкретного фреймворка; скрипт загружается с unpkg.com.

Темы

Частые вопросы

Что такое react-scan?

Инструмент для поиска проблем с производительностью в React: автоматически находит и подсвечивает компоненты с ненужными повторными рендерами без изменений кода. React Scan находит проблемы с производительностью в приложениях React: отслеживает рендеры и подсвечивает компоненты, которые перерисовываются без необходимости. Инструмент можно подключить одним тегом script или установить как npm-пакет — менять код приложения не нужно.

react-scan можно использовать бесплатно? Какая у него лицензия?

react-scan распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

react-scan всё ещё поддерживается?

Обновлялся за последние 6 месяцев. Последний коммит в react-scan — 16 авг. 2026 г..

Для чего можно использовать react-scan?

Поиск лишних повторных рендеров в медленном одностраничном приложении на React Проверка того, какие компоненты перерисовываются после изменения состояния во время разработки Аудит проекта на Next.js или Remix для выявления ненужных рендеров Отслеживание рендеров одного компонента с помощью хука `onRender`

Как установить react-scan?

Запустите команду init, чтобы автоматически определить ваш фреймворк и настроить React Scan: npx -y react-scan@latest init Или установите пакет вручную через npm: npm install -D react-scan Добавьте тег script в приложение (например, в index.html перед всеми скриптами)

Где скачать react-scan?

Исходный код и инструкции по установке — на GitHub: https://github.com/aidenybai/react-scan