Эксперт по React и Next.js

ИИ код-ревью для React

diffray понимает React. Правила хуков, паттерны компонентов, оптимизация производительности и доступность — ИИ-ревью для современных React-приложений.

React18+
Next.js13+ App Router
Remix2.x
Gatsby5.x
Vite + React5.x

Создан для React-разработчиков

ИИ-агенты, понимающие паттерны React, хуки и современные лучшие практики.

Хуки и состояние

Находите нарушения правил хуков React, устаревшие замыкания и баги управления состоянием.

  • Зависимости useEffect
  • Условные хуки
  • Обновление состояния в циклах

Производительность

Выявляйте лишние перерисовки, отсутствующую мемоизацию и раздутие бандла.

  • useMemo/useCallback
  • Оптимизация рендера
  • Разделение кода

Доступность

Убедитесь, что компоненты доступны с правильными ARIA и поддержкой клавиатуры.

  • ARIA атрибуты
  • Навигация клавиатурой
  • Управление фокусом

Дизайн компонентов

Проверяйте паттерны компонентов, пропсы и лучшие практики композиции.

  • Типы пропсов
  • Композиция компонентов
  • Использование key

Частые проблемы React, которые мы находим

Отсутствующие зависимости useEffect
Устаревшие данные, бесконечные циклы, гонки
Агент Bugs проверяет массивы зависимостей
Лишние перерисовки
Медленный UI, трата ресурсов, плохой UX
Агент Performance находит отсутствующую мемоизацию
XSS через dangerouslySetInnerHTML
Уязвимость безопасности, кража данных
Агент Security отмечает небезопасную инъекцию HTML
Отсутствующие метки доступности
Недоступно для скринридеров, юридические риски
Проверки доступности интерактивных элементов

Кастомные правила для вашего React-стека

Применяйте паттерны React вашей команды. Требуйте определённое использование хуков, структуры компонентов или стандарты доступности.

  • Требуйте useCallback для обработчиков событий
  • Требуйте error boundaries в роутах
  • Валидируйте доступность форм
  • Проверяйте правильные состояния загрузки
.diffray/rules/react.yaml
rules:
  - id: react_use_error_boundary
    agent: bugs
    title: Routes need error boundaries
    description: All route components should
      have error boundaries for resilience
    importance: 8
    match:
      file_glob:
        - 'app/**/page.tsx'
        - 'pages/**/*.tsx'
    checklist:
      - Verify ErrorBoundary wraps component
      - Check for error fallback UI
      - Ensure errors are logged
    tags:
      - react
      - reliability
      - next-js

FAQ по React

Создавайте лучшие React-приложения

Присоединяйтесь к React-командам, использующим diffray для экспертного ИИ код-ревью.

Валидация хуков
Проверки производительности
Аудит доступности