Отладка и устранение неполадок

Это руководство помогает находить и исправлять проблемы при использовании React Compiler. Узнайте, как отлаживать проблемы компиляции и решать типичные неполадки.

Вы узнаете

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

Как ведёт себя компилятор

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

Ошибки компилятора и проблемы во время выполнения

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

Проблемы во время выполнения возникают, когда скомпилированный код ведёт себя иначе, чем ожидалось. Чаще всего, если вы столкнулись с проблемой React Compiler, это проблема во время выполнения. Обычно так бывает, когда код нарушает Правила React тонкими способами, которые компилятор не смог обнаружить, и компилятор по ошибке скомпилировал компонент, который должен был пропустить.

При отладке проблем во время выполнения сосредоточьтесь на поиске нарушений Правил React в затронутых компонентах, которые не обнаруживало правило ESLint. Компилятор полагается на то, что код следует этим правилам, и когда они нарушены так, что он этого не видит, возникают проблемы во время выполнения.

Типичные ломающие шаблоны

Один из главных способов, которым React Compiler может сломать приложение, — если код написан так, что корректность зависит от мемоизации. Это значит, что приложение зависит от мемоизации конкретных значений, чтобы работать правильно. Поскольку компилятор может мемоизировать иначе, чем ваш ручной подход, это может привести к неожиданному поведению: эффекты срабатывают слишком часто, возникают бесконечные циклы или пропадают обновления.

Типичные сценарии:

• Эффекты, которые полагаются на ссылочное равенство — когда эффекты зависят от того, что объекты или массивы сохраняют одну и ту же ссылку между рендерингами
• Массивы зависимостей, которым нужны стабильные ссылки — когда нестабильные зависимости заставляют эффекты срабатывать слишком часто или создают бесконечные циклы
• Условная логика на основе проверок ссылок — когда код использует проверки ссылочного равенства для кэширования или оптимизации

Процесс отладки

Следуйте этим шагам, когда возникают проблемы:

Ошибки сборки компилятора

Если ошибка компилятора неожиданно ломает сборку, это, скорее всего, ошибка в компиляторе. Сообщите о ней в репозиторий react/react и приложите: - Сообщение об ошибке - Код, который вызвал ошибку - Версии React и компилятора

Проблемы во время выполнения

Для проблем с поведением во время выполнения:

1. Временно отключите компиляцию

Используйте "use no memo", чтобы понять, связана ли проблема с компилятором:

function ProblematicComponent() {
  "use no memo"; // Skip compilation for this component
  // ... rest of component
}

Если проблема исчезает, она, скорее всего, связана с нарушением Правил React.

Можно также попробовать убрать ручную мемоизацию (useMemo, useCallback, memo) из проблемного компонента и проверить, что приложение работает правильно вообще без мемоизации. Если ошибка остаётся, когда вся мемоизация убрана, у вас нарушение Правил React, которое нужно исправить.

2. Исправляйте проблемы шаг за шагом

1. Найдите первопричину (часто это мемоизация ради корректности)
2. Проверяйте после каждого исправления
3. Уберите "use no memo", когда проблема исправлена
4. Убедитесь, что у компонента в React DevTools есть значок ✨

Сообщения об ошибках компилятора

Если вы считаете, что нашли ошибку компилятора:

1. Убедитесь, что это не нарушение Правил React — проверьте с помощью ESLint
2. Создайте минимальное воспроизведение — изолируйте проблему в небольшом примере
3. Проверьте без компилятора — подтвердите, что проблема возникает только при компиляции
4. Заведите issue:
5. Версии React и компилятора
6. Код минимального воспроизведения
7. Ожидаемое и фактическое поведение
8. Любые сообщения об ошибках

Следующие шаги

• Просмотрите Правила React, чтобы предотвращать проблемы
• Посмотрите руководство по постепенному внедрению — там стратегии постепенной выкатки

Источник — https://react.dev/learn/react-compiler/debugging

Комментарии