Form actions и useActionState

Form action — это функция, которая при сабмите запускается с FormData; <form action={fn}> заменяет onSubmit + preventDefault + чтение каждого поля. React вызывает твою функцию с FormData формы, поэтому ты читаешь поля по name, а не подключаешь контролируемое состояние к каждому инпуту. Никакого события предотвращать не нужно; сабмит — это и есть вызов action.

function ContactForm() {
  async function submit(formData: FormData) {
    const email = formData.get("email") as string;
    await sendMessage(email, formData.get("body") as string);
  }
  return (
    <form action={submit}>
      <input name="email" type="email" />
      <textarea name="body" />
      <button>Send</button>
    </form>
  );
}

Инпуты неконтролируемые — контракт это name. К useState на поле ты тянешься, только когда тебе действительно нужно рендерить по нажатиям клавиш (живая валидация, счётчик символов), а не просто собрать значение на сабмите.

useActionState оборачивает action и возвращает [state, dispatch, isPending] — это твой result, error и флаг pending, и ни один из них не написан вручную. Ты даёшь ему функцию в форме редьюсера (prevState, formData) => nextState и начальное состояние. React запускает её на сабмите, отслеживает переход в pending и сохраняет то, что ты вернул, как новый state. Ошибки валидации — это просто возвращённое значение, а не выброшенное исключение, которое нужно ловить и прятать.

type State = { ok: boolean; error?: string };

async function submitContact(_prev: State, formData: FormData): Promise<State> {
  const email = String(formData.get("email") ?? "");
  if (!email.includes("@")) return { ok: false, error: "Enter a valid email" };
  await sendMessage(email, String(formData.get("body") ?? ""));
  return { ok: true };
}

function ContactForm() {
  const [state, action, isPending] = useActionState(submitContact, { ok: false });
  return (
    <form action={action}>
      <input name="email" type="email" />
      <textarea name="body" />
      {state.error && <p role="alert">{state.error}</p>}
      <button disabled={isPending}>{isPending ? "Sending…" : "Send"}</button>
    </form>
  );
}

Заметь, что исчезло: нет const [isSubmitting, setIsSubmitting], нет try/catch, нет finally для сброса флагов. Флаг pending приходит из перехода, которым React и так управляет; error — это просто состояние, которое ты вернул.

useFormStatus читает состояние сабмита окружающей формы изнутри потомка — так общий <SubmitButton> узнаёт, что он в pending, без единого пропса. Подвох, на котором спотыкаются: его нужно вызывать в компоненте, отрендеренном внутри <form>, а не в компоненте, который рендерит форму. Эта граница — весь смысл: она даёт тебе отгрузить переиспользуемую кнопку сабмита, которую любая форма может вставить, и она загорается автоматически.

import { useFormStatus } from "react-dom";

function SubmitButton({ children }: { children: React.ReactNode }) {
  const { pending } = useFormStatus(); // reads the parent <form>, not props
  return <button disabled={pending}>{pending ? "Submitting…" : children}</button>;
}

// any form gets the pending button for free
<form action={action}>
  <input name="email" />
  <SubmitButton>Save</SubmitButton>
</form>

useFormStatus — для локальной обратной связи кнопки; isPending от useActionState — для логики владельца формы (отключить fieldset, показать результат). Используй то, что сидит там, где тебе нужен сигнал, — не пробрасывай isPending вниз, когда useFormStatus читает его нативно.

Один и тот же action работает на клиенте или как server action — но server action это публичный HTTP-эндпойнт, поэтому он обязан валидировать свой ввод. Пометь функцию "use server", и <form action={serverAction}> постит FormData на сервер; форма работает ещё до гидрации, и прогрессивное улучшение настоящее. Ловушка уровня senior: клиентская валидация (type="email", отключённая кнопка) — это UX, а не граница безопасности. Кто угодно может запостить произвольный FormData прямо в этот action, поэтому он обязан перевалидировать и авторизовать на сервере, как будто клиент вообще не выполнялся.

// app/actions.ts
"use server";
import { z } from "zod";

const Contact = z.object({ email: z.string().email(), body: z.string().min(1).max(2000) });

export async function submitContact(_prev: State, formData: FormData): Promise<State> {
  const parsed = Contact.safeParse({ email: formData.get("email"), body: formData.get("body") });
  if (!parsed.success) return { ok: false, error: "Invalid input" }; // server is the real gate
  await requireSession();                 // authz here, never trust the client
  await db.messages.insert(parsed.data);
  return { ok: true };
}

Сигнатура action идентична клиентской версии — в этом и унификация. Меняется то, что граница переехала через сеть, и всё по ту сторону относится к своему вводу как к враждебному.