React Compiler 1.0 и конец эпохи ручной мемоизации

React Compiler 1.0 и конец эпохи ручной мемоизации

Есть инструменты которые меняют то как ты пишешь код. React Compiler — из тех что меняют то о чём ты думаешь пока пишешь код. С октября 2025 года он в стабильном релизе, и к марту 2026 его влияние на повседневную разработку стало очевидным.

Что такое React Compiler и зачем он нужен

React-разработчики годами жили с одной фоновой задачей: вручную контролировать ререндеры. useMemo для кэширования вычислений, useCallback для стабильных ссылок на функции, React.memo для компонентов — всё это не логика приложения, а оптимизационный шум вокруг неё.

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

После почти десяти лет работы — от первых экспериментов с Prepack в 2017 году до стабильного релиза — React Compiler наконец готов к продакшену.

Реальные цифры

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

Разработчики которые перевели реальные проекты на компилятор сообщают ещё об одном эффекте: около 30% кодовой базы становится проще читать — потому что уходит слой ручной оптимизации который загромождал логику.

Как подключить

Компилятор поддерживает несколько систем сборки. Для Vite — через vite-plugin-react, для Next.js — встроенная поддержка начиная с версии 15.3.1:

npm install --save-dev --save-exact babel-plugin-react-compiler@latest
// vite.config.ts
import react from '@vitejs/plugin-react'
 
export default {
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler']
      }
    })
  ]
}

Для новых Expo-проектов компилятор включён по умолчанию — дополнительная настройка не нужна.

Постепенная миграция

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

// babel.config.js
module.exports = {
  plugins: [
    ['babel-plugin-react-compiler', {
      sources: (filename) => filename.includes('/src/components/')
    }]
  ]
}

Утилита react-compiler-healthcheck покажет проблемные места в коде до включения компилятора.

Что делать с useMemo и useCallback

Короткий ответ: не удалять, но перестать писать по привычке.

Компилятор покрывает подавляющее большинство случаев. useMemo и useCallback остаются полезными как явные escape hatches — когда тебе нужна точная стабильность зависимости для useEffect или когда работаешь с кодом вне дерева React.

Но рефлекторно оборачивать всё подряд «на всякий случай» — это теперь legacy-подход. В 2026 году правильная установка такая: пишешь чистый компонент, доверяешь компилятору, вмешиваешься только если видишь реальную проблему.

Совместимость с экосистемой

Большинство популярных библиотек работают корректно. Исключения есть — react-hook-form в некоторых паттернах (конкретно useWatch и getValues) может вести себя неожиданно. Команда React официально рекомендует проверять совместимость через healthcheck перед миграцией.

Поддержка React 17+ есть через опциональный пакет react-compiler-runtime — инкрементальная миграция без обновления React версии.

Что это значит для фронтенда в 2026

По данным Stack Overflow Developer Survey 2025, React держит 44.7% рынка, Next.js — 20.8%. На этом фоне React Compiler — не нишевое улучшение, а изменение которое затрагивает огромную часть продакшн-кода в индустрии.

В 2026 году ручное использование useMemo, useCallback и React.memo воспринимается как legacy-оптимизация — компилятор берёт эту работу на себя на этапе сборки.

Это не просто удобство. Это изменение того каким должен быть хороший React-код — он снова может быть простым.

2

16.03.2026

|

react.dev
2026