ری‌اکت ۱۹ و فرم‌ها؛ useActionState به‌جای state و handler دستی

تا قبل از ری‌اکت ۱۹، فرم ساده یعنی چند useState برای مقدارها، خطا و حالت ارسال، به‌علاوهٔ یک onSubmit با preventDefault. نسخهٔ ۱۹ مفهوم «Action» را اضافه کرده است.

نمونه

import { useActionState } from "react";

async function subscribe(prevState, formData) {
  const email = formData.get("email");
  const res = await fetch("/api/subscribe", {
    method: "POST",
    body: JSON.stringify({ email }),
  });
  return res.ok ? { ok: true } : { error: "ثبت نشد" };
}

function Form() {
  const [state, formAction, isPending] = useActionState(subscribe, null);

  return (
    <form action={formAction}>
      <input name="email" type="email" required />
      <button disabled={isPending}>عضویت</button>
      {state?.error && <p>{state.error}</p>}
    </form>
  );
}

چه چیزی ساده شد؟

• مقدار فیلدها با FormData خوانده می‌شود؛ لازم نیست هر input یک state داشته باشد.
• isPending خودکار فراهم است.
• پس از اجرای موفق action، ری‌اکت فرم‌های uncontrolled را ریست می‌کند.
• با useFormStatus دکمه‌ای در عمق درخت هم می‌تواند وضعیت ارسال را بداند.

این روش با فریم‌ورک‌های سمت سرور هم سازگار است؛ اما در یک SPA معمولی هم کاملاً قابل استفاده است و کد فرم را کوتاه‌تر می‌کند.