React 19 Compiler + Actions API: автооптимизация async форм без мемоизации

[hannadev]

React 19 Compiler меняет правила игры для асинхронных форм. Вместе с Actions API он автоматически оптимизирует рендеры, убирая boilerplate с useCallback и memo. Забудьте ручную мемоизацию - теперь стейт обновляется отзывчиво, даже при тяжёлых запросах.

Это решает боль с перерендерами в формах: кнопки не дергаются, данные показываются мгновенно с optimistic updates. Код становится чище, бандл меньше, а UX - огонь. Погнали разбирать, как это работает на практике.

Compiler: автоматическая мемоизация под капотом

React Compiler - это killer-фича React 19. Он сканирует код на этапе сборки и автоматически мемоирует компоненты, хуки и колбэки. Нет нужды таскать useMemo, useCallback или React.memo - компилятор сам оптимизирует, чтобы избежать лишних рендеров.

Для async операций в формах это магия: раньше submit-handler перерендеривал всю форму при каждом изменении стейта. Теперь Compiler видит паттерны и кэширует их умно. Представь форму профиля - input меняется, но тяжёлый async submit не триггерит цепочку ререндеров. Плюс интегрируется с Actions API для серверных вызовов без race conditions.

В итоге бандл летает, а линтер не ноет на пропс-дриллинг. Вот ключевые оптимизации:

• Авто-мемоизация колбэков: submitAction не пересоздаётся при каждом рендере, даже если стейт формы меняется.
• Смарт-кэш стейта: Compiler понимает зависимости и не трогает чистые части UI во время async.
• Zero-config для форм: Никаких wrapper’ов - просто пиши action и хук, компилятор подхватит.

До Compiler	С Compiler + Actions
useCallback для submit, memo для Form	Автооптимизация, код в 2 раза короче
Ручной трекинг pending/error	useActionState берёт на себя
Перерендеры при optimistic updates	Только нужные части UI обновляются

Нюанс: Compiler работает только в build-time, dev-режим показывает предупреждения для дебаггинга.

Actions API: async без боли

Actions - это серверные функции с директивой ‘use server’, которые клиент вызывает прямо из формы. Они тянут за собой стейт: pending, error, success - всё автоматически. useActionState хук возвращает [state, action, isPending] - и вуаля, форма управляется без кастомного редьюсера.

Пример: форма редактирования профиля. Пользователь меняет имя, жмёт submit - action улетает на сервер, UI показывает optimistic name сразу, кнопка disables через isPending. Если сервер вернул ошибку, откат без лишнего кода. Compiler здесь усиливает: action не ре-креируется зря, мемоизация на автопилоте.

Код супер-короткий:

const [state, submitAction, isPending] = useActionState(updateProfile, {error: null});

<form action={submitAction}>
  <input name="name" />
  <button disabled={isPending}>Сохранить</button>
</form>

Серверный action:

'use server';

export async function updateProfile(prevState, formData) {
  const name = formData.get('name');
  // async запрос к БД
  if (!valid) return {error: 'Имя короткое'};
  return {success: true};
}

Преимущества в списке:

• Optimistic updates с useOptimistic: Покажи изменения сразу, откати при ошибке - Compiler оптимизирует рендеры.
• useFormStatus для кнопок: Ближайшая форма в статусе pending? Кнопка сама disabled.
• Интеграция с SSR: Actions работают в Server Components, рендер на сервере без гидратации проблем.

Хук	Что даёт для форм	Compiler бонус
useActionState	state + action + pending	Мемоизация стейта
useOptimistic	Мгновенный UI	Нет ререндеров фона
useFormStatus	Статус submit	Авто-оптимизация кнопок

Важно: Actions стабильны только с React 19 RC+, проверь next.js совместимость.

Практика: форма с полной оптимизацией

Соберём реальную форму регистрации. Actions API + Compiler = ноль мемоизации, но всё летает. Стейты: loading spinner, error message, optimistic preview. Компилятор видит, что input-ончэйнджи не дергают submit, и не рендерит зря.

Шаг за шагом: action на сервере валидирует и сохраняет юзера. Клиент: useActionState трекает, useOptimistic показывает ‘Добро пожаловать, [name]!’ сразу. Если fail - откат + error toast. Без этого был бы useEffect-hell с race conditions.

Ключевые трюки:

1. Серверный action с ретраями: Встроенная обработка ошибок, prevState для retry.
2. Формы без JS: action в работает даже без клиентского бандла.
3. Интеграция с use(): Для async data в рендере - const user = use(fetchUser()); Compiler кэширует.

Пример полного снippet’а:

function RegisterForm() {
  const [state, registerAction, pending] = useActionState(registerUser, null);
  const [optimisticEmail, addOptimistic] = useOptimistic('', (state, email) => email);

  return (
    <form action={registerAction}>
      <input name="email" onChange={e => addOptimistic(e.target.value)} />
      {state?.error && <p>{state.error}</p>}
      <button disabled={pending}>Регистрация</button>
    </form>
  );
}

Это сокращает код на 70% vs старый useState + useEffect. Compiler tip: Добавь babel-plugin-react-compiler в vite/rollup для prod.

Когда Compiler + Actions взлетают на максимум

Комбо идеально для дашбордов, CRUD-форм, чатов. Async мутации без лагов: список обновляется optimistic, сервер подтверждает - рендер только дельты. В Next.js 15+ Turbopack ускоряет билд с Compiler’ом.

Ограничения честно: не для динамических eval-кодов, нужен стабильный build. Но для 90% форм - dream come true. Подумай над миграцией legacy-форм: начни с простых actions, Compiler сам подхватит оптимизации. А дальше эксперименты с use в Server Components для hybrid SSR.