useActionState – یک هوک جدید در ری اکت 🧐

📌 useActionState چیست؟

useActionState یه هوک جدید توی React هست که کمکمون می‌کنه وضعیت رو بر اساس نتیجه‌ی یه فرم به‌روزرسانی کنیم.

مثل یه دستیار هوشمند می‌مونه که چیزا رو برامون به یاد میاره و موقع ارسال فرم می‌تونه اونا رو تغییر بده.

حتماً مستندات رسمی رو بررسی کنید 🚀 لینک مستندات

نکته مهم :

فعلاً useActionState فقط توی کانال‌های Canary و آزمایشی React در دسترسه. برای استفاده کامل ازش، باید از یه فریمورک استفاده کنید که کامپوننت‌های سرور React رو پشتیبانی کنه.

📌 چطوری از useActionState استفاده کنیم؟

برای استفاده از این هوک، اول باید اونو از React وارد کنیم:

import { useActionState } from 'react';

بعد میتونیم توی کامپوننت خودمون به این شکل ازش استفاده کنیم:

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

اینجا هر قسمت به این معنی هست:

• state : وضعیت فعلی فرم ما
• formAction : یه عمل جدید که تو فرم استفاده می‌کنیم
• actionFunction : تابعی که موقع ارسال فرم اجرا می‌شه
• initialState : مقدار شروع وضعیت ما

📌 زمان استفاده از useActionState:

از این هوک وقتی استفاده کنید که می‌خواید وضعیت رو بر اساس ارسال‌های فرم به‌روزرسانی کنید، مخصوصاً اگر از کامپوننت‌های سرور React استفاده می‌کنید و می‌خواید پاسخ‌های سریعتری داشته باشید.

مثال:

بیایید یه فرم ساده‌ی شمارنده با استفاده از useActionState بسازیم:

import { useActionState } from "react";

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

function StatefulForm() {
  const [state, formAction] = useActionState(increment, ۰);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}

توی این مثال، هر بار که دکمه رو کلیک می‌کنیم، شمارنده‌مون یه واحد زیاد می‌شه. useActionState هم مسئول به‌روزرسانی وضعیت موقع ارسال فرم هست.

اگر این مقاله برات مفید بود

حتماً یادت نره که نظرت رو بزاری! نظرات شما به من انرژی می‌ده و کمک می‌کنه که مقالات بهتری بنویسم. ممنون از حمایتتون! 🌟