Установка

Предварительные требования

React Compiler лучше всего работает с React 19, но также поддерживает React 17 и 18. Подробнее см. в разделе Совместимость с версиями React.

Установка

Установите React Compiler как devDependency:

Или с Yarn:

Или с pnpm:

Базовая настройка

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

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

Babel

Создайте или обновите babel.config.js:

module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // must run first!
    // ... other plugins
  ],
  // ... other config
};

Vite

Если вы используете Vite, можно добавить плагин в vite-plugin-react:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

В качестве альтернативы можно использовать отдельный плагин Babel для Vite:

// vite.config.js
import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react(),
    babel({
      babelConfig: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

Next.js

Дополнительную информацию см. в документации Next.js.

React Router

Установите vite-plugin-babel и добавьте плагин Babel компилятора:

// vite.config.js
import { defineConfig } from "vite";
import babel from "vite-plugin-babel";
import { reactRouter } from "@react-router/dev/vite";

const ReactCompilerConfig = { /* ... */ };

export default defineConfig({
  plugins: [
    reactRouter(),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"], // if you use TypeScript
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
  ],
});

Webpack

Сторонний загрузчик webpack уже доступен здесь.

Expo

Инструкции по включению и использованию React Compiler в приложениях Expo см. в документации Expo.

Metro (React Native)

React Native использует Babel через Metro, поэтому инструкции по установке см. в разделе Использование с Babel.

Rspack

Инструкции по включению и использованию React Compiler в приложениях Rspack см. в документации Rspack.

Rsbuild

Инструкции по включению и использованию React Compiler в приложениях Rsbuild см. в документации Rsbuild.

Интеграция с ESLint

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

Установите плагин ESLint:

Если вы ещё не настроили eslint-plugin-react-hooks, следуйте инструкциям по установке из файла readme. Правила компилятора доступны в наборе recommended-latest.

Правило ESLint:

• Выявляет нарушения правил React
• Показывает, какие компоненты нельзя оптимизировать
• Выводит полезные сообщения об ошибках, помогающие устранить проблемы

Проверка настройки

После установки убедитесь, что React Compiler работает правильно.

Проверка React DevTools

Компоненты, оптимизированные React Compiler, будут отмечены значком «Memo ✨» в React DevTools:

1. Установите расширение для браузера React Developer Tools
2. Откройте приложение в режиме разработки
3. Откройте React DevTools
4. Найдите эмодзи ✨ рядом с именами компонентов

Если компилятор работает:

• В React DevTools у компонентов будет значок «Memo ✨»
• Ресурсоёмкие вычисления будут автоматически мемоизированы
• Ручная useMemo не требуется

Проверка результата сборки

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

import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>Hello World</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}

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

Исключение отдельных компонентов из обработки

Если после компиляции у компонента возникают проблемы, его можно временно исключить с помощью директивы "use no memo":

function ProblematicComponent() {
  "use no memo";
  // Component code here
}

Эта директива указывает компилятору пропустить оптимизацию данного компонента. Устраните причину проблемы и удалите директиву после её решения.

Дополнительную помощь по устранению неполадок см. в руководстве по отладке.

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

Теперь, когда React Compiler установлен, узнайте больше о следующем:

• Совместимость с версиями React для React 17 и 18
• Параметры конфигурации для настройки компилятора
• Стратегии постепенного внедрения в существующие кодовые базы
• Методы отладки для устранения проблем
• Руководство по компиляции библиотек для компиляции вашей библиотеки React