React 19.1: Actions API + Zod для типобезопасных форм без лишнего стейта

[hannadev]

React 19.1 приносит Actions API - это киллер-фича для форм, где валидация через Zod работает автоматически. Забудь про ручной стейт, useState для ошибок и танцы с бубном. Теперь формы типобезопасны из коробки, с серверными экшнами и валидацией на лету.

Это решает боль с дублированием кода: один Zod-схема для клиента и сервера. Формы рендерятся быстрее, типы из схемы льются в TS автоматически. Идеально для Next.js или чистого React - меньше бойлерплейта, больше фокуса на логике.

Actions API: что это и как оно меняет формы

Actions API в React 19.1 - это хуки вроде useActionState, которые берут на себя весь стейт формы: pending, ошибки, результат. Подключи Zod-схему - и валидация автоматом работает на клиенте и сервере. Нет нужды в react-hook-form или другом либах для базовых кейсов - React сам справляется.

Представь форму логина: юзер вводит email и пароль, жмет submit. ActionState ловит данные, валидирует через Zod, показывает ошибки под полями без лишнего кода. Если сервер вернул ошибку - она мержится с клиентской валидацией. Это чисто, типобезопасно и производительно - бандл не раздувается.

Ключевые плюсы подхода:

• Авто-рендер состояний: pending-спиннер, ошибки, успех - без useEffect.
• Типы из Zod: infer прямо в TS, никаких any.
• Синхронная валидация: клиент + сервер по одной схеме.
• Меньше ререндеров: стейт внутри хука, не провоцирует лишние обновы.

Старый подход	Actions API + Zod
useState + useEffect для ошибок	useActionState управляет всем
Дубли схем клиент/сервер	Одна Zod-схема везде
Ручная валидация onSubmit	Авто на blur/change/submit
Лишний стейт в компоненте	Ноль глобального стейта

Zod-схемы: типы и валидация в одном флаконе

Zod - это TS-first либа для схем, где валидация и типы генерятся автоматически. Определи схему для формы - и получи типы через z.infer. В React 19.1 это интегрируется с Actions: схема парсит данные перед отправкой, кидает ошибки в ActionState.

Пример схемы для user-формы: z.object({ email: z.string().email(), age: z.number().min(18) }). В action-функции safeParse проверяет данные, если fail - возвращает ошибки в формате { field: ‘error msg’ }. На клиенте resolver из @hookform/resolvers/zod (если юзаешь RHF) или нативно через form action.

Плюс runtime-валидация: Zod ловит не только типы, но и бизнес-логику - minLength, regex, custom validators. Серверный action в Next.js получает те же данные, парсит схемой - дублирования ноль.

• Базовая схема: const userSchema = z.object({ name: z.string().min(2), email: z.string().email() });
• Infer типов: type User = z.infer<typeof userSchema>; - TS сам допишет.
• Расширения: .refine() для кастомных чеков, .array() для списков.
• Интеграция: zodResolver для RHF или прямой parse в action.

const schema = z.object({
  email: z.string().email('Некорректный email'),
  password: z.string().min(8, 'Минимум 8 символов')
});

type FormData = z.infer<typeof schema>;

Практика: форма без state management

Соберем форму регистрации на Actions API. useActionState возвращает [state, action, isPending]. State - это ошибки или данные, action - функция для onSubmit. Zod парсит formData в action, возвращает результат.

В шаблоне:

с input’ами, ошибки из state.errors.field рендерятся под полями. На сервере action async-функция, safeParse + бизнес-логика. Клиентская валидация на blur через ZodResolver если с RHF, или нативно.

Это убирает useState полностью - React держит стейт формы внутри. Производительность на высоте: optimistic updates, revalidation через router.refresh() в Next.js.

Шаги реализации:

1. Определи Zod-схему и типы.
2. Создай server action: async function register(formData) { const parsed = schema.safeParse(formData); ... }
3. В компоненте: const [state, formAction] = useActionState(register, null);

Состояние	Как рендерится
pending	из isPending
error	{state.errors.email} под input
success	Redirect или success msg

'use client';
import { useActionState } from 'react';

const [state, submitAction, pending] = useActionState(registerAction, undefined);

return (
  <form action={submitAction}>
    <input name="email" />
    {state?.errors?.email && <p>{state.errors.email}</p>}
    <button disabled={pending}>Register</button>
  </form>
);

Оптимизации и подводные камни

Actions API быстрое, но есть нюансы. Форма клирнится после успеха - используй revalidatePath для персистентности. Zod ошибки на сервере мапь в ActionState формат: { errors: { field: msg } }. Для сложных форм комбинируй с RHF + zodResolver.

Производительность: debounce на async validators, validate onBlur для UX. Типобезопасность полная - TS жалуется если схемы не совпадают. Тестируй safeParse вместо parse - не крашит app.

• Сервер/клиент sync: Экспортируй схему в shared файл.
• Async валидация: z.preprocess(async (val) => await check(val), z.string()).
• Эдж-кейсы: file uploads через FormData, nested objects с .transform().

Код чистый - жизнь легкая

Actions API с Zod в React 19.1 - это когда формы пишутся за 20 строк вместо 100. Типы, валидация, стейт - все нативно, без либ. Осталось за кадром: кастомные хуки для reusable форм, интеграция с TanStack Query для мутаций.

Подумать стоит над миграцией legacy-форм: постепенно роллаут через новые actions. Для монолитов Next.js - идеал, для CRA подключи remotion или аналог.