هوک useActionState در ری اکت جی اس (react js) چیست؟

معرفی هوک useActionState

useActionState یکی از هوک‌های جدید React است که اجازه می‌دهد وضعیت (state) را براساس نتیجهٔ یک «اکشن» (مثل ارسال فرم یا اجرای یک عملیات async) به‌روزرسانی کنید. این هوک برای مدیریت پیام موفقیت/خطا، نشانگر بارگذاری و نتایج اکشن‌ها بسیار مناسب است.

اگر هنوز با هوک useState آشنا نیستید، پیشنهاد می‌شود ابتدا آن مقاله را مطالعه کنید.

امضای تابع و پارامترها

ساختار کلی:

const [state, formAction, isPending] = useActionState(fn, initialState);
      

• fn — تابع اکشن که هنگام اجرای فرم یا action اجرا می‌شود.
• initialState — مقدار اولیهٔ state.
• state — مقدار فعلی که از خروجی اکشن به‌روزرسانی می‌شود.
• formAction — مقداری که باید به صفت formAction یا action فرم داد تا اکشن اجرا شود.
• isPending — نشانگر بولی برای وضعیت درحال اجرا (loading).

مثال ساده (Counter)

مثال زیر عملکرد پایهٔ هوک را نشان می‌دهد: با هر کلیک روی دکمه، مقدار count افزایش می‌یابد.

import { useActionState } from "react";

async function increment(previousState, formData) {
  return previousState + 1;
}

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

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

در این مثال، تابع اکشن (increment) اولین پارامترش را وضعیت فعلی دریافت می‌کند و عدد جدید را برمی‌گرداند.

مثال واقعی: افزودن به سبد خرید

در پروژه‌های واقعی از این هوک برای نمایش پیام موفقیت یا خطا و نشانگر بارگذاری استفاده می‌کنیم:

import { useActionState } from "react";
import { addToCart } from "./actions";

function AddToCartForm({ itemID, itemTitle }) {
  const [message, formAction, isPending] = useActionState(addToCart, null);

  return (
    <form action={formAction}>
      <h3>{itemTitle}</h3>
      <input type="hidden" name="itemID" value={itemID} />
      <button type="submit" disabled={isPending}>
        {isPending ? "در حال افزودن..." : "افزودن به سبد خرید"}
      </button>
      {message && <p>{message}</p>}
    </form>
  );
}
      

تابع addToCart می‌تواند پاسخ سرور (پیغام موفقیت یا خطا) را بازگرداند و این مقدار در message ذخیره و نمایش داده می‌شود.

نکات مهم و خطاهای رایج

1. امضای تابع اکشن: تابع باید امضای (previousState, formData) را بپذیرد.
2. isPending: مناسب برای غیرفعال‌سازی دکمه‌ها و نمایش لودینگ.
3. سازگاری با Server Components:
4. نکات عملکردی: استفادهٔ درست از این هوک می‌تواند رندرهای غیرضروری را کاهش دهد.

مزایا در یک نگاه

useActionState باعث می‌شود:

• مدیریت وضعیت پس از اجرای اکشن ساده‌تر شود.
• نمایش پیام‌های موفقیت/خطا و وضعیت بارگذاری راحت‌تر شود.
• تطابق بهتر با معماری Server Components فراهم آید.

سوالات متداول

تفاوت useActionState با useState چیست؟

useState برای مدیریت state محلی به‌کار می‌رود؛ اما useActionState برای به‌روزرسانی state بر اساس خروجی یک اکشن (معمولاً فرم یا عملیات async) طراحی شده است. بیشتر بخوانید دربارهٔ useState.

آیا این هوک فقط برای فرم‌هاست؟

خیر؛ هر جا یک اکشن async داشته باشید می‌توانید از آن استفاده کنید.

چه نسخه‌ای از React لازم است؟

این هوک در مستندات React جدید معرفی شده؛ برای سازگاری کامل از نسخه‌های اخیر React استفاده کنید. مستندات رسمی React

جمع‌بندی

هوک useActionState برای ساده‌سازی مدیریت وضعیت اکشن‌ها طراحی شده است؛ مخصوصاً زمانی که نیاز داریم وضعیت‌هایی مانند loading، success یا error را در کنار داده‌ی برگشتی نگه داریم. این هوک باعث می‌شود منطق مرتبط با state یک اکشن از کامپوننت جدا و قابل استفاده‌ی مجدد شود.

برای یادگیری هوک‌های مشابه، useTransition در React را مطالعه کنید.