Сканируйте ваш React-код на антипаттерны с помощью React Doctor

React-приложения редко разваливаются в один момент. Они деградируют постепенно — лишний useEffect здесь, несколько дополнительных уровней проброса пропсов там, тихо отсутствующий атрибут доступности. К тому времени, когда эти проблемы всплывают в продакшене, их исправление обходится дорого.

React Doctor — это CLI-инструмент с открытым исходным кодом, созданный для выявления этих проблем до того, как они накопятся. Выполните одну команду, получите оценку здоровья кода от 0 до 100 и получите практические рекомендации по всей кодовой базе.

Что на самом деле делает React Doctor (и чего не делает)

React Doctor — это инструмент статического анализа, а не профайлер времени выполнения. Он не измеряет время рендеринга и не отслеживает повторные рендеры компонентов в работающем приложении. Вместо этого он читает ваш исходный код и выявляет структурные проблемы ещё до запуска приложения.

Это различие важно. Такие инструменты, как React DevTools Profiler, показывают, что работает медленно во время выполнения. React Doctor показывает, почему ваш код структурно хрупок — проброс пропсов, затрудняющий рефакторинг, эффекты, которых не должно существовать, неиспользуемые экспорты, раздувающие бандл, и нарушения доступности, влияющие на реальных пользователей.

Это также больше, чем линтер. Такие инструменты, как ESLint, выявляют синтаксические ошибки и обеспечивают соблюдение правил стиля. React Doctor анализирует общее здоровье проекта, сканируя такие категории, как архитектура, размер бандла, безопасность, мёртвый код и паттерны, специфичные для фреймворка. Он автоматически определяет ваш фреймворк и конфигурацию React, а затем активирует соответствующие правила.

Как просканировать ваш React-проект за 30 секунд

Установка не требуется. Перейдите в корневую директорию проекта и выполните:

npx -y react-doctor@latest .

Добавьте --verbose, чтобы увидеть точные пути к файлам и номера строк для каждой проблемы:

npx -y react-doctor@latest . --verbose

React Doctor выполняет два прохода параллельно: проход линтинга по активным правилам и проход по мёртвому коду, который отмечает неиспользуемые файлы, экспорты, типы и дубликаты. Результаты оцениваются по степени серьёзности — ошибки весят больше, чем предупреждения — и формируют итоговую оценку здоровья: 75+ — Отлично, 50–74 — Требует доработки, ниже 50 — Критично.

Антипаттерны React, которые он выявляет

Вот типы структурных проблем, которые React Doctor обычно обнаруживает:

Ненужное использование useEffect — Когда деривация состояния происходит внутри эффектов вместо рендера, вы получаете баги с устаревшими данными и труднопонимаемую логику. Собственные рекомендации React всё больше склоняются к деривации значений во время рендера там, где это возможно, а не к использованию эффектов.

Глубокая передача пропсов — Передача пропсов через множество слоёв компонентов — это структурный тревожный сигнал. Решением часто является Context, композиция или колокация состояния.

Ключи списков, которые могут вызвать нестабильный рендеринг — Использование нестабильных идентификаторов (таких как индексы массива) может привести к тонким багам UI при переупорядочивании списков.

Тяжёлые импорты библиотек — Импорт целых библиотек может раздуть бандлы. React Doctor может выделить паттерны, где разделение кода через React.lazy() или инструменты фреймворка типа next/dynamic может помочь.

Пробелы в доступности — Отсутствующие атрибуты, такие как alt на изображениях или другие упущения в доступности, могут незаметно проскользнуть через разработку, но влияют на реальных пользователей.

Потенциальные секреты в исходном коде — Статическое сканирование может обнаружить паттерны, напоминающие API-ключи или токены, закоммиченные в репозиторий.

Интеграция React Doctor в рабочий процесс команды

Для команд наиболее ценной интеграцией является workflow GitHub Actions:

- uses: actions/checkout@v5
  with:
    fetch-depth: 0
- uses: millionco/react-doctor@main
  with:
    diff: main
    github-token: ${{ secrets.GITHUB_TOKEN }}

Опция diff сканирует только файлы, изменённые в pull request, сохраняя быстроту CI. Когда предоставлен github-token, результаты публикуются непосредственно в виде комментария к PR — не нужно копаться в логах.

Для рабочих процессов с помощью ИИ вы можете обучить кодирующих агентов, таких как Cursor или Claude Code, правилам лучших практик React, используемым React Doctor:

curl -fsSL https://react.doctor/install-skill.sh | bash

Это позволяет вашему агенту диагностировать проблемы и предлагать исправления, используя тот же набор правил, что применяет React Doctor.

Реальные оценки здоровья

React Doctor был запущен на нескольких известных React-проектах с открытым исходным кодом:

Даже зрелые, хорошо поддерживаемые проекты имеют возможности для улучшения. Эти проблемы накапливаются незаметно, и автоматизированное сканирование — один из простейших способов выявить их на ранней стадии.

Заключение

React Doctor не заменяет код-ревью, но он убирает его рутинные части. Структурные проблемы, пробелы в доступности, мёртвый код и риски безопасности выявляются автоматически, поэтому человеческие ревьюеры могут сосредоточиться на логике и проектных решениях.

Запустите его один раз на вашем текущем проекте. Полученная оценка расскажет вам о здоровье вашей кодовой базы больше, чем неделя ручного ревью.

Часто задаваемые вопросы

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.