Optimización de Server Actions en React 19: практичные паттерны useActionState и useFormStatus (2026)

Краткий ответ

useActionState организует единый контракт состояния, а useFormStatus управляет UX отправки кнопки. Такая связка уменьшает дублирование запросов и конфликтное состояние формы.

В React 19 Server Actions полезны не потому, что заменяют API route, а потому что собирают валидацию, сохранение и возврат ошибок в один согласованный объект ответа.

1. Базовая модель

useActionState возвращает три значения: state, formAction, pending.

const [state, formAction, pending] = useActionState(saveProfile, { ok: false, message: '', fieldErrors: {}, globalErrors: [], })

• state: нормализованный ответ с сервера
• formAction: action, привязанное к форме
• pending: флаг обработки

2. Единая схема ответа

type ActionState = { ok: boolean message: string fieldErrors: Record globalErrors: string[] }

Схема нужна такой же в регистрации, оплате и форме поддержки.

3. Роль useFormStatus

useFormStatus читает состояние только из формы.

'use client' import { useFormStatus } from 'react-dom'

function SubmitButton() { const { pending } = useFormStatus() return {pending ? 'Отправляется...' : 'Отправить'} }

Компонент должен находиться внутри формы, иначе статус пустой.

4. Паттерн против двойной отправки

1. 1Блокировать кнопку на pending
2. 2Передавать idempotency token в FormData
3. 3Проверять токен на сервере
4. 4Возвращать понятное сообщение о дубликате

На платёжных сценариях это сильно снижает конфликтные статусы.

5. Практический вывод

В проектах с частыми изменениями переводов именно стабильная структура данных спасает. Когда ключи state не меняются, добавление локализаций и UI-изменений почти не ломает тесты.

6. План внедрения

• Начать с формы низкого риска
• Зафиксировать ActionState
• Перенести критические формы постепенно
• 48 часов наблюдать метрики дубликатов и ошибочных отправок

FAQ

Q1. Обязательно ли полностью отказываться от API routes? A1. Нет, гибридный запуск обычно легче и безопаснее.

Q2. Что если pending не меняется? A2. Проверьте, что formAction и компонент useFormStatus в одном дереве.

Q3. Как измерить эффект? A3. Дублирующиеся отправки, P95 по отправке, успех с первого раза.

Q4. Как обрабатывать ошибки? A4. fieldErrors для полей, globalErrors для общих системных ошибок.

Q5. Есть ли риск для SEO? A5. Нет при нормальных метаданных и внутренней перелинковке.

Q6. Какую документацию вести? A6. Зафиксировать схему результата в PR шаблоне и проверять в кодревью.

Q7. Можно ли делать откат? A7. Да, миграция поэтапная позволяет быстро откатить отдельные формы.

Внутренние ссылки

• Next.js 15 App Router performance guide
• React 19 Server Components migration
• Turso vs Cloudflare D1 benchmark
• Cloudflare Workers AI comparison

Внешние ссылки

• https://react.dev/reference/react-dom/hooks/useActionState
• https://react.dev/reference/react-dom/hooks/useFormStatus