هوک useFormStatus در ری اکت ! ( بررسی مبتدی تا پیشرفته )

اگر با فرم ها در ری اکت کار کرده باشی، میدونی همیشه چند تا دغدغه داریم:

فرم در حال ارسال هست یا نه؟
دکمه ارسال باید غیرفعال بشه یا نه؟
وقتی ارسال تموم شد، چه پیامی نشون بدیم؟
اگه چند تا فرم تو یک صفحه داشتیم، چطور وضعیت هر کدوم رو جدا بفهمیم؟

قبل از ری اکت 19 که این هوک نبود، اینا رو معمولا با چند تا useState و کلی کد اضافی هندل میکردیم.
ولی الان با هوک useFormStatus در ری اکت همه اینا خیلی راحت تر و تمیزتر حل میشه.

هوک useFormStatus در ری اکت چیه ؟!

useFormStatus یه هوک مخصوص Server Actions هست که وضعیت یک فرم رو موقع ارسال و گرفتن دیتا میده.
مثلا:

pending: آیا فرم الان در حال ارسال هست؟
data: داده هایی که کاربر وارد کرده
method: متد ارسال (POST، GET، …)
action: آدرس یا تابعی که قراره فرم رو پردازش کنه

یه نکته این هوک فقط داخل محدوده یک "تگ فرم" کار میکنه. یعنی اگه بیاریش بیرون فرم، همیشه pending رو false میده.

پیش نیازها

برای استفاده باید:

React 18.3 یا بالاتر داشته باشی
پروژه ات Server Actions رو پشتیبانی کنه (مثل Next.js 13 به بعد)
فرم رو با اکشن سمت سرور ("use server") هندل کنی

یک مثال ساده

1. ساخت اکشن سمت سرور

				
					// app/actions.ts
"use server";

export async function createUser(formData: FormData) {
  const name = formData.get("name") as string;

  await new Promise((r) => setTimeout(r, 2000)); // شبیه سازی تاخیر

  console.log("User created:", name);
}

2. ساخت دکمه ارسال با `useFormStatus`

				
					"use client";

import { useFormStatus } from "react-dom";

export function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button
      type="submit"
      disabled={pending}
      className="px-4 py-2 bg-blue-600 text-white rounded"
    >
      {pending ? "در حال ارسال..." : "ثبت نام"}
    </button>
  );
}

3. فرم اصلی

				
					import { createUser } from "./actions";
import { SubmitButton } from "./SubmitButton";

export default function Page() {
  return (
    <form action={createUser} className="space-y-4">
      <input
        type="text"
        name="name"
        placeholder="نام"
        className="border p-2 rounded w-full"
      />
      <SubmitButton />
    </form>
  );
}

نکات پیشرفته تر

1. چند فرم در یک صفحه

چون useFormStatus به محدوده خودش وابسته هست، اگه دو تا فرم داشته باشی، هر دکمه فقط وضعیت فرم خودش رو میگیره.
این یعنی دیگه مشکل اشتباه غیرفعال شدن دکمه های فرم های دیگه رو نداری.

2. گرفتن اطلاعات بیشتر

				
					const { pending, data, method, action } = useFormStatus();

data → داده های ارسال شده (FormData)
method → متد HTTP (POST یا GET)
action → آدرس یا تابع پردازش فرم

3. نمایش پیام موفقیت یا خطا

				
					"use client";
import { useState } from "react";
import { useFormStatus } from "react-dom";

export function SubmitButtonWithMessage() {
  const { pending } = useFormStatus();
  const [done, setDone] = useState(false);

  return (
    <>
      <button
        type="submit"
        disabled={pending}
        onClick={() => setDone(false)}
        className="px-4 py-2 bg-green-600 text-white rounded"
      >
        {pending ? "در حال ارسال..." : "ارسال"}
      </button>
      {done && <p className="text-green-600 mt-2">ارسال موفق بود 🎉</p>}
    </>
  );
}

البته باید بعد از اتمام اکشن سمت سرور، setDone(true) رو صدا بزنی (مثلا با ریدایرکت یا mutation).

4. ولیدیشن سمت سرور

با ترکیب useFormStatus و اکشن های سمت سرور میتونی:

اعتبارسنجی رو روی سرور انجام بدی
پیام خطا رو برگردونی
در UI نمایش بدی

مثال:

				
					"use server";
export async function registerUser(formData: FormData) {
  const email = formData.get("email") as string;
  if (!email.includes("@")) {
    throw new Error("ایمیل معتبر نیست");
  }
}