Выпущен React Compiler версии 1.0

Команда React сообщает о важных нововведениях:

1. React Compiler версии 1.0 доступен сегодня.
2. Правила линтинга, основанные на компиляторе, добавлены в пресеты recommended и recommended-latest пакета eslint-plugin-react-hooks.
3. Опубликовано руководство по постепенному внедрению, а также налажено партнерство с Expo, Vite и Next.js, чтобы новые приложения могли сразу создаваться с включенным компилятором.

Сегодня выпускается первая стабильная версия React Compiler. Инструмент работает как с React, так и с React Native, автоматически оптимизируя компоненты и хуки без необходимости переписывания кода. Компилятор был протестирован в крупных приложениях Meta и полностью готов к использованию в production-среде.

React Compiler — это инструмент для этапа сборки, который оптимизирует React-приложения с помощью автоматической мемоизации. В прошлом году была опубликована первая бета-версия, и за это время было получено множество ценных отзывов. Результаты внедрения компилятора в таких проектах, как Sanity Studio и Wakelet, демонстрируют значительное повышение производительности.

Этот релиз — результат масштабной и сложной инженерной работы, растянувшейся почти на десятилетие. Первые исследования в области компиляторов начались с проекта Prepack в 2017 году. Хотя тот проект был закрыт, полученный опыт повлиял на дизайн хуков, которые создавались с учетом будущего компилятора. В 2021 году Сюань Хуанг представил первую итерацию нового подхода к React Compiler. Последующие переработки архитектуры компилятора заложили основу для более точного анализа и даже вывода типов.

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

Как начать использовать React Compiler

Для установки компилятора выполните одну из следующих команд:

npm

npm install --save-dev --save-exact babel-plugin-react-compiler@latest

pnpm

pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest

yarn

yarn add --dev --exact babel-plugin-react-compiler@latest

В рамках стабильного релиза была проделана работа по упрощению процесса подключения компилятора к проектам. React Compiler теперь поддерживает опциональные цепочки (optional chaining) и индексы массивов в качестве зависимостей, что приводит к уменьшению количества повторных рендеров и более отзывчивому интерфейсу.

Результаты в production-среде

Компилятор уже используется в таких приложениях, как Meta Quest Store. Наблюдается улучшение времени первоначальной загрузки и навигации между страницами до 12%, в то время как некоторые взаимодействия стали более чем в 2.5 раза быстрее. Использование памяти остается на прежнем уровне. Рекомендуется поэкспериментировать с компилятором в своем приложении, чтобы оценить аналогичный прирост производительности.

Обеспечение соблюдения Правил React с помощью линтинга

React Compiler включает правило для ESLint, которое помогает выявить код, нарушающий Правила React. Этот линтер не требует установки самого компилятора, поэтому обновление eslint-plugin-react-hooks до последней версии не несет рисков. Всем рекомендуется выполнить обновление.

Если у вас уже установлен eslint-plugin-react-compiler, его можно удалить и использовать eslint-plugin-react-hooks@latest.

Для установки обновленного линтера:

npm

npm install --save-dev eslint-plugin-react-hooks@latest

pnpm

pnpm add --save-dev eslint-plugin-react-hooks@latest

yarn

yarn add --dev eslint-plugin-react-hooks@latest

Пример конфигурации для Flat Config (eslint.config.js):

import reactHooks from 'eslint-plugin-react-hooks';

export default [
  reactHooks.configs.flat.recommended,
];

Пример конфигурации для Legacy Config (.eslintrc.json):

{
  "extends": ["plugin:react-hooks/recommended"]
}

Новые правила линтера, среди прочего, помогают выявлять:

• Паттерны setState, вызывающие бесконечные циклы рендеринга.
• Выполнение дорогостоящих операций внутри эффектов.
• Небезопасный доступ к рефам во время рендера.

Что делать с useMemo, useCallback и React.memo?

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

Для нового кода рекомендуется полагаться на компилятор и использовать useMemo/useCallback только там, где это действительно необходимо. В существующем коде можно либо оставить ручную мемоизацию на месте, либо аккуратно протестировать приложение после ее удаления.

Новые приложения должны использовать React Compiler

Налажено партнерство с командами Expo, Vite и Next.js для включения компилятора в процесс создания новых приложений.

• Expo: Начиная с SDK 54, компилятор включен по умолчанию в новых приложениях.

npx create-expo-app@latest

• Vite и Next.js: Пользователи могут выбрать шаблоны с включенным компилятором в create-vite и create-next-app.

npm create vite@latest
npx create-next-app@latest

Постепенное внедрение в существующие проекты

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

Экспериментальная поддержка SWC

Ведутся работы по интеграции React Compiler в качестве плагина для SWC, что должно значительно повысить скорость сборки в Next.js при включенном компиляторе. Для лучшей производительности сборки рекомендуется использовать Next.js версии 15.3.1 или выше.

Обновление React Compiler

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

Поскольку в редких случаях изменение мемоизации может привести к неожиданному поведению (например, к изменению частоты срабатывания useEffect), рекомендуется следовать Правилам React и использовать сквозное тестирование приложения.

Если покрытие тестами недостаточное, рекомендуется зафиксировать версию компилятора (например, 1.0.0), а не использовать диапазон версий SemVer (например, ^1.0.0). Это можно сделать с помощью флагов --save-exact (npm/pnpm) или --exact (yarn).