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

تو برنامه های وب، مخصوصا وقتی فرم داری یا کاربر قراره عملی انجام بده که به سرور وصل میشه (مثل ثبت نام، ارسال پیام، ثبت سفارش)، همیشه یک سری وضعیت ها داریم که باید مدیریت بشه:

داده در حال ارسال هست یا نه؟ (isLoading)
درخواست موفقیت آمیز بود یا خطا داد؟
چه پیامی باید به کاربر نشون بدیم؟

تا قبل از این، برای هر کدوم از این وضعیت ها باید چند تا useState جداگانه میساختیم و کلی کد اضافه مینوشتیم.

ری اکت یک هوک جدید معرفی کرده به اسم useActionState که این دردسر رو خیلی راحت حل میکنه 🙂

هوک useActionState در ری اکت!

useActionState یک هوک داخلی ری اکت هست که بهت اجازه میده وضعیت رو بر اساس نتیجه ی یک اکشن (معمولا ارسال فرم یا اجرای یک تابع async) مدیریت کنی.

یعنی به جای اینکه چند تا استیت مختلف برای مقدار، پیام خطا، حالت لودینگ و… بسازی، همه رو یکجا با useActionState کنترل میکنی.

سینتکس پایه هوک useActionState در ری اکت

				
					const [state, actionFn, isPending] = useActionState(
  (previousState, formData) => {
    // منطق اجرای اکشن
    return newState;
  },
  initialState
);

پارامترها:

(previousState, formData) => newState — تابعی که وقتی اکشن اجرا میشه (مثلا فرم ارسال میشه) صدا زده میشه.
initialState — وضعیت اولیه قبل از هر اکشن.

خروجی ها:

state — وضعیت فعلی که خودت مشخص میکنی چه شکلی باشه.
actionFn — تابعی که باید به عنوان action فرم یا onClick دکمه بدی.
isPending — بولی که وقتی اکشن در حال اجراست، true میشه.

مثال ساده — شمارنده

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

async function increment(prev) {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  return prev + 1;
}

export default function Counter() {
  const [count, formAction, isPending] = useActionState(increment, 0);

  return (
    <form action={formAction}>
      <p>Count: {count}</p>
      <button disabled={isPending}>
        {isPending ? "در حال افزایش..." : "افزایش"}
      </button>
    </form>
  );
}

🔹 اینجا useActionState هم لودینگ رو کنترل میکنه، هم مقدار جدید رو بر اساس نتیجه ی تابع increment برمیگردونه.

مثال پیشرفته — فرم ثبت نام با پیام موفقیت یا خطا

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

async function registerUser(prevState, formData) {
  const username = formData.get("username");
  if (!username) {
    return { success: false, message: "نام کاربری الزامی است" };
  }

  await new Promise((resolve) => setTimeout(resolve, 1000));

  return { success: true, message: "ثبت نام با موفقیت انجام شد" };
}

export default function RegisterForm() {
  const [state, formAction, isPending] = useActionState(registerUser, {
    success: null,
    message: "",
  });

  return (
    <form action={formAction}>
      <input name="username" placeholder="نام کاربری" />
      <button disabled={isPending}>
        {isPending ? "در حال ارسال..." : "ثبت نام"}
      </button>
      {state.message && (
        <p style={{ color: state.success ? "green" : "red" }}>
          {state.message}
        </p>
      )}
    </form>
  );
}

با همین چند خط کد:

وضعیت لودینگ داری (isPending)
نتیجه (موفق یا خطا) داری (state.success)
پیام مناسب نشون میدی (state.message)

نکات مهم هوک useActionState در React

عالیه برای فرم ها، ولی میتونی برای هر اکشنی که داده برمیگردونه هم استفاده کنی.
به طور پیش فرض با React Server Components هم سازگاره، یعنی فرم حتی قبل از لود کامل JS هم میتونه کار کنه.

مزایای هوک useActionState در ریکت

کد کمتر، منطق شفاف تر.
مدیریت همه ی وضعیت ها تو یک استیت واحد.
بدون نیاز به چند تا useState و useEffect اضافه.

جمع بندی

useActionState مثل یه مدیر همه کارس، که همه ی کارهای فرم یا اکشن رو تو یکجا جمع میکنه و تو فقط نتیجه رو تحویل میگیری.
هم لودینگ رو کنترل میکنه، هم خروجی رو میده، هم باعث میشه کدت تمیزتر و قابل نگهداری تر بشه.
بنظرم برای شروع یک فرم ساده تو پروژه ات انتخاب کن، useActionState رو امتحان کن، و ببین چقدر سریع تر و راحت تر همه چیز پیش میره 🙂