useTransition()

تحديد تحديث حالة كغير عاجل useTransition()

useTransition يسمح بتحديد تحديث حالة كـ Transition غير عاجل، قابل للمقاطعة، لإبقاء الواجهة متجاوبة أثناء رندر مكلف.

useTransition() يُرجع [isPending, startTransition]. أي تحديث حالة يوضع داخل startTransition(callback) يُعامَل كتحديث بأولوية منخفضة — React يستمر بالاستجابة لتفاعلات أخرى أثناء تنفيذه، وقد يقاطعه إن جاء تحديث أهم.

isPending تصير true طوال مدة تنفيذ الـ Transition، مفيدة لعرض مؤشّر تحميل بسيط دون حجب الواجهة بالكامل.

الصياغة

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setState(newValue);
});

📄 مثال

function TabContainer() {
  const [tab, setTab] = useState("about");
  const [isPending, startTransition] = useTransition();

  function selectTab(next) {
    startTransition(() => setTab(next));
  }

  return (
    <>
      <button onClick={() => selectTab("posts")}>المقالات</button>
      {isPending && <span>...جارٍ التحميل</span>}
    </>
  );
}

أهم المعاملات

المعامل	الوظيفة
isPending	true أثناء تنفيذ الـ Transition
startTransition	تُغلِّف تحديث حالة متزامن لتصبح Transition غير عاجلة

💡 نصائح عملية

التحديثات داخل startTransition يجب أن تكون متزامنة — لا setTimeout ولا await مباشرة قبل setState
لا تستخدمه للتحكّم بقيمة حقل إدخال متحكَّم به — استخدم useDeferredValue لتلك الحالة

⚠️ أخطاء شائعة

وضع setState بعد await داخل startTransition بلا تغليف إضافي — لن تُعتبَر Transition
استخدامه على حقل نصي value={...} — يجعل الكتابة تبدو متأخّرة وغير سلسة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار REACT الكامل بالعربي.