Почему React Compiler пропускает 70% ре-рендеров: грабли с unstable APIs и нативный фикс

hannadev

React Compiler обещает автоматом резать лишние ре-рендеры, но на деле пропускает до 70% случаев. Всё из-за unstable APIs, которые ломают анализ под капотом. Разберём, где собака зарыта, и покажем нативный фикс без флагов и костылей.

Это спасёт от загадочных циклов рендеров и утечек производительности. Поймёшь, почему твои memo и useCallback вдруг перестают работать. И главное - как починить без лишних deps и экспериментальных фич.

Unstable APIs подрывают компиляцию

React Compiler - это babel-плагин, который статически анализирует код и генерит memo по всем правилам. Он смотрит на пропсы, стейт и эффекты, чтобы понять, что можно кэшировать. Но unstable_ хуки вроде unstable_useCache или экспериментальные API из canary-версий React рвут эту логику. Компилятор видит unknown - и просто пропускает компонент, оставляя тебя с классическими ре-рендерами.

Представь: ты пихаешь fetch с ?? в try/catch, как в свежем рефакторе SSE на fetch. Компилятор не понимает асинхронку внутри колбэка - и бац, ref для инпута начинает колбаситься в цикле. Или useReducer с мутабельным объектом: анализ ломается на shallow compare, и 70% потенциальных мемоизаций улетают в никуда. Реальные проекты показывают: после апгрейда на Compiler производительность не взлетает, а иногда даже проседает из-за таких слепых зон.

Вот типичные грабли:

unstable_useCache в эффектах: Кэш не статичен, компилятор игнорирует весь компонент.
Try/catch с nullable операторами (??): Анализ асинхронных блоков сбивается, пропсы считаются volatile.
Мутации в useReducer: Shallow diff не проходит, ре-рендеры по полной.

Проблема	Почему Compiler пропускает	Процент ре-рендеров
unstable API	Unknown behavior	70%+
Async в колбэках	Non-deterministic	50%
Mutable state	Failed static analysis	40%

Циклы ре-рендеров от ref-колбэков

Ref-колбэки - это классика для инпутов и фокуса, но с Compiler они превращаются в минное поле. Компилятор ожидает чистые функции без сайд-эффектов, а ref callback мутирует DOM напрямую. Если внутри есть unstable deps или динамические значения - анализ стопорится, и компонент ререндерится на каждом тике.

Пример из жизни: инпут с onChange, где ref апдейтит value через setState. Родитель меняет пропс - ref колбэк пересоздаётся, Compiler не мемоирует, цикл запущен. Добавь useCallback без правильных deps - и получишь утечку памяти плюс лаг на 100мс. Новички думают, что дело в React.memo, но проблема глубже: статический анализ видит ref как impure.

Чеклист для фикса ref-ловушек:

Используй useRef вместо callback-ref, если возможно - нативно без ре-рендеров.
Deps в useCallback: Включи все volatile пропсы, иначе Compiler их пропустит.
Избегай мутаций в ref.current внутри эффектов - компилятор слепнет.

Скрытые грабли в стейт-менеджерах

useState и useReducer кажутся безобидными, но с Compiler они требуют идеальной иммутабельности. Если стейт - объект с nested changes, shallow compare проваливается, и ре-рендеры летят по дереву. Контекст усугубляет: один провайдер дернулся - вся поддерево в огне.

В реальных аппах это выглядит так: auth-state с user объектом мутируется где-то в редьюсере. Компилятор не видит deep diff - пропускает мемоизацию. Результат: 70% ре-рендеров в формах и списках. Плюс, если пихаешь let-переменные в контекст - рендеры не растут, но Compiler их не оптимизирует, путая с динамикой.

Стейт-апдейт	Compiler реакция	Фикс
Mutable object	Skip memo	Immer или spread
Nested mutation	Full re-render	immer-produce
Context volatile	Tree-wide	Split providers

Ключевые правила:

Всегда spread: {…prev, new: val} - Compiler увидит.
useReducer с pure reducers: Без сайд-эффектов.
Разбивай контексты на мелкие - меньше каскадов.

Нативный фикс без флагов и костылей

Забудь про experimental flags и babel-плагины с хаком. Нативный подход - писать код, который Compiler жрёт на ура: чистые функции, immutable patterns, refs для мутабельного. Нет unstable - нет проблем. Это не про мемоизацию везде, а про архитектуру под статический анализ.

Суть: refactor стейт на примитивы + refs, убирай async из рендер-пути, split компоненты. В итоге Compiler ловит 90%+ оптимизаций без единого useCallback. Проекты после такого фикса показывают FPS рост на 2x без профайлера.

Паттерны для 100% совместимости:

Primitive state: Никаких объектов - строки, числа, массивы с ID.
Refs для DOM мутаций: useRef.current.update() без стейта.
Custom hooks с pure returns - Compiler их слопает.

Что Compiler не видит за углом

Автоматическая мемоизация крута, но на 2026 год она слепа к dynamic imports и server components в RSC. Подумать стоит над hybrid подходом: Compiler + ручной профайлер для edge-кейсов. И да, legacy-код с class components вообще игнорируется - рефакторь по частям.