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

تو برنامه های وب، وقتی کاربر عملی انجام میده که نیاز به ارتباط با سرور داره، معمولا یه تاخیر بین کلیک کاربر و مشاهده ی نتیجه نهایی وجود داره. این تاخیر میتونه تجربه ی کاربری رو خراب کنه و حس کندی یا سنگینی به برنامه بده.

اینجاست که هوک useOptimistic وارد ماجرا میشه !

تو این روش، ما نتیجه ی مورد انتظار رو فوری به کاربر نشون میدیم، حتی قبل از اینکه جواب واقعی از سمت سرور برسه. اگه جواب سرور موفقیت آمیز بود، همونو نگه میداریم و اگه خطا داشت، تغییر رو برمیگردونیم (rollback).

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

هوک useOptimistic در ری اکت چیست ؟

useOptimistic یه هوک داخلی تو ری اکت هست که کمک میکنه وضعیت رابط کاربری رو به صورت خوش بینانه آپدیت کنیم.

منظور از خوش بینانه این هست که فرض رو بر این میگیریم که دیتا بصورت موفق از بک اند به دستمون میرسه.

با این هوک میتونیم:

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

سینتکس پایه هوک useOptimistic

				
					const [optimisticState, addOptimistic] = useOptimistic(
  initialState,
  (currentState, newValue) => {
    return updatedState;
  }
);

پارامترها:

initialState — حالت اولیه قبل از هر تغییر خوش بینانه.
updateFn — تابعی که:
- currentState: وضعیت فعلی رو میگیره
- newValue: مقداری که میخوای اعمال بشه رو میگیره
  و در نهایت وضعیت خوش بینانه ی جدید رو برمیگردونه.

خروجی ها:

optimisticState: وضعیت خوش بینانه ای که تو UI نشون داده میشه.
addOptimistic: تابعی برای اعمال یک آپدیت خوش بینانه.

مثال دکمه لایک

فرض کن کاربر روی دکمه ی لایک میزنه:

				
					import { useOptimistic } from "react";
import { startTransition } from "react";

function LikeButton({ postId, initialLikes }) {
  const [optimisticLikes, addOptimistic] = useOptimistic(
    initialLikes,
    (currentLikes, increment) => currentLikes + increment
  );

  async function handleLike() {
    // تغییر خوش بینانه
    addOptimistic(1);

    // ارسال درخواست به سرور
    startTransition(async () => {
      try {
        await fetch(`/api/posts/${postId}/like`, { method: "POST" });
      } catch (err) {
        // در صورت خطا، برگشت به حالت قبل
        addOptimistic(-1);
      }
    });
  }

  return (
    <button onClick={handleLike}>
      👍 {optimisticLikes}
    </button>
  );
}

کاربر بلافاصله افزایش لایک رو میبینه و اگه درخواست به سرور شکست بخوره، عدد برمیگرده به حالت قبل.

مثال اضافه کردن کامنت

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

کامنت رو فوری تو لیست میبینه.
بعد از جواب سرور، یا همونو نگه میداریم یا حذف/تغییرش میدیم :

				
					import { useOptimistic } from "react";
import { startTransition } from "react";

function Comments({ postId, initialComments }) {
  const [optimisticComments, addOptimistic] = useOptimistic(
    initialComments,
    (currentComments, newComment) => [...currentComments, newComment]
  );

  async function handleAddComment(text) {
    const tempId = Date.now();
    const newComment = { id: tempId, text, pending: true };

    // اضافه کردن خوش بینانه
    addOptimistic(newComment);

    startTransition(async () => {
      try {
        const res = await fetch(`/api/posts/${postId}/comments`, {
          method: "POST",
          body: JSON.stringify({ text }),
          headers: { "Content-Type": "application/json" },
        });
        const savedComment = await res.json();

        // جایگزین کردن آی دی موقت با آی دی واقعی
        addOptimistic((comments) =>
          comments.map((c) =>
            c.id === tempId ? { ...savedComment, pending: false } : c
          )
        );
      } catch (err) {
        // حذف کامنت در صورت خطا
        addOptimistic((comments) => comments.filter((c) => c.id !== tempId));
      }
    });
  }

  return (
    <div>
      <ul>
        {optimisticComments.map((comment) => (
          <li key={comment.id}>
            {comment.text} {comment.pending && <em>(در حال ارسال...)</em>}
          </li>
        ))}
      </ul>
      <button onClick={() => handleAddComment("کامنت تستی")}>
        افزودن کامنت
      </button>
    </div>
  );
}

مدیریت خطا و Rollback

useOptimistic خودش به طور خودکار rollback انجام نمیده. باید خودت منطق برگشت به حالت قبل رو بنویسی.

دو روش رایج:

دادن مقدار معکوس تغییر به addOptimistic.
یا گرفتن دوباره ی وضعیت از سرور.

مزایای هوک useOptimistic در React چیه ؟

تجربه ی کاربری بهتر: کاربر نتیجه رو همون لحظه میبینه.
کد تمیزتر: نیاز به چند تا useState برای حالت موقت نداری.
احساس سرعت بیشتر: تاخیر سرور حس نمیشه.

معایب هوک useOptimistic در React چیه ؟

برای عملیات حساس مثل تراکنش های مالی مناسب نیست.
نیاز به مدیریت خطای دستی داری.

جمع بندی

useOptimistic یه ابزار خفن برای ساختن UI سریع و واکنش گراست. اگه پروژه ات نیاز به نمایش سریع تغییرات داره و میتونی خطاها رو مدیریت کنی، این هوک میتونه تجربه ی کاربر رو خیلی بهتر کنه.