⚛️ Прощай, e.preventDefault(): Нативные формы в React

Управление формами в React всегда требовало кучи бойлерплейта: отдельные useState для данных, лоадеров и ошибок, ручной try/catch и обязательный e.preventDefault().

В React 19 появились Actions и новые хуки, которые забирают эту рутину на себя, используя нативные возможности браузера.

1. useActionState (Стейт формы)
Позволяет привязать асинхронную функцию к форме и автоматически сохранять результат её выполнения (например, сообщения об ошибках).

2. useFormStatus (Контекст лоадера)
Позволяет дочерним элементам читать статус родительской формы (загрузка, отправленные данные). Больше не нужно прокидывать пропс isLoading сквозь всё дерево компонентов.

🚀 Как это выглядит на практике:

import { useActionState, useFormStatus } from "react";

// 1. Асинхронный экшен (может быть и Server Action)
async function createUserAction(prevState, formData) {
  const name = formData.get("name");
  
  if (!name) return { error: "Имя обязательно!" };
  
  await fetch("/api/users", { method: "POST", body: name });
  return { success: true, message: "Пользователь создан!" };
}

// 2. Изолированная кнопка, которая "знает" о статусе загрузки
function SubmitButton() {
  const { pending } = useFormStatus();
  return (
    <button disabled={pending}>
      {pending ? "Сохраняем..." : "Создать"}
    </button>
  );
}

// 3. Сама форма
export function UserForm() {
  const [state, formAction] = useActionState(createUserAction, null);

  return (
    // Просто передаем action в форму! Никаких onSubmit.
    <form action={formAction}>
      <input name="name" placeholder="Введите имя" />
      
      {state?.error && <p className="error">{state.error}</p>}
      {state?.success && <p className="success">{state.message}</p>}
      
      <SubmitButton />
    </form>
  );
}

🧠 Senior-нюансы:
• Где вызывать useFormStatus? Он работает под капотом как Context API. Поэтому его нужно вызывать только в дочерних компонентах внутри <form>. Если вызвать его в компоненте UserForm из примера выше, pending всегда будет false.

• Progressive Enhancement: Если вы используете фреймворк с SSR (например, Next.js), такая форма может отправить данные даже если JavaScript на клиенте еще не загрузился или вовсе отключен.

👉@frontend_sovet