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

Как работает компилятор

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

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

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

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

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

Распространённые проблемные шаблоны

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

Типичные случаи:

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

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

При возникновении проблем выполните следующие действия:

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

Если ошибка компилятора неожиданно нарушает процесс сборки, вероятно, это ошибка в самом компиляторе. Сообщите о ней в репозитории facebook/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. Создайте задачу:
   • Версии React и компилятора
   • Минимальный код, воспроизводящий проблему
   • Ожидаемое и фактическое поведение
   • Текст ошибок, если они есть

Дальнейшие действия

• Изучите правила React, чтобы избежать проблем
• Ознакомьтесь с руководством по постепенному внедрению, чтобы узнать о стратегиях поэтапного перехода