هوک useTransition در ری اکت جی اس (react js)

ساختار استفاده

شکل کلی استفاده از این هوک به این شکله:

const [isPending, startTransition] = useTransition();
      

• isPending — یه مقدار بولین (true/false) که نشون میده آپدیت هنوز در حال انجامه.
• startTransition — تابعی که هر کاری رو که می‌خوای با اولویت پایین‌تر انجام بشه داخلش می‌ذاری.

مثال ساده

فرض کن یه لیست داری و می‌خوای با هر تایپ، فیلترش کنی. بدون useTransition ممکنه تایپت کند بشه، ولی باهاش، UI همچنان سریع می‌مونه:

import { useState, useTransition } from "react";

function FilterList({ items }) {
  const [input, setInput] = useState("");
  const [list, setList] = useState(items);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setInput(value);
    startTransition(() => {
      const filtered = items.filter(item => item.includes(value));
      setList(filtered);
    });
  };

  return (
    <div>
      <input value={input} onChange={handleChange} placeholder="جستجو..." />
      {isPending && <p>در حال فیلتر کردن...</p>}
      <ul>
        {list.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </div>
  );
}
      

با این کار، تایپ کاربر سریع انجام میشه و فیلتر لیست در پس‌زمینه انجام میشه.

نکات و کاربردها

• زمانی استفاده کن که کار سنگین داری: مثلاً فیلتر، مرتب‌سازی یا رندر لیست‌های بزرگ.
• برای انیمیشن یا تاخیر نیست: هدفش حفظ روانی رابط کاربریه، نه ایجاد تاخیر مصنوعی.
• ترکیب با Suspense: می‌تونه با Suspense کار کنه تا انتقال بین صفحات روان‌تر بشه.
• نشون دادن لودینگ نرم: از isPending می‌تونی برای نشون دادن یه لودینگ سبک استفاده کنی.

تفاوت با useDeferredValue

useTransition بهت کنترل میده که *کدوم آپدیت‌ها* با اولویت پایین‌تر انجام بشن، ولی useDeferredValue یه مقدار خاص رو خودش با تاخیر به‌روزرسانی می‌کنه. معمولاً وقتی یه مقدار ورودی داری که قراره عملیات سنگین روش انجام بشه، useDeferredValue راحت‌تره.

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

کی از useTransition استفاده کنم؟

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

می‌تونم چند تا transition همزمان داشته باشم؟

بله، ولی معمولاً نیازی نیست. هر کامپوننت می‌تونه transition خودش رو داشته باشه.

با async کار می‌کنه؟

آره، می‌تونی داخل startTransition توابع async رو صدا بزنی، ولی بهتره داده‌ها رو قبلش fetch کرده باشی.

منبع رسمی؟

React Docs: useTransition

جمع‌بندی

هوک useTransition به React اجازه میده بعضی آپدیت‌ها رو در اولویت پایین‌تر انجام بده تا رابط کاربری همیشه روان و قابل استفاده بمونه.

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