useDeferredValue()

تأجيل استخدام قيمة قادمة من الخارج useDeferredValue()

useDeferredValue يُرجع نسخة "متأخّرة" من قيمة، يستخدمها React لتأجيل رندر جزء مكلف دون التحكّم بمصدر القيمة نفسه.

useDeferredValue(value) يُرجع قيمة تتبع value لكنها قد "تتأخّر" خطوة أثناء عمليات رندر مكلفة: في الرندر الأول تُرجع القيمة الحالية مباشرة، وعند تغيّر value يُعيد React رسم الجزء المرتبط بالقيمة المؤجَّلة في الخلفية بينما تبقى الشاشة تعرض القيمة القديمة إلى أن يجهز الرندر الجديد.

الفرق عن useTransition: هنا لا تتحكّم بدالة التحديث نفسها (مثلاً قيمة وصلتك كـ prop)، فقط تخبر React أن استخدام هذه القيمة بالذات لا يحتاج أولوية عاجلة.

الصياغة

const deferredValue = useDeferredValue(value, initialValue?);

📄 مثال

function SearchPage() {
  const [query, setQuery] = useState("");
  const deferredQuery = useDeferredValue(query);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />
      <SearchResults query={deferredQuery} />
    </>
  );
}

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

المعامل	الوظيفة
value	القيمة المراد تأجيل استخدامها في الرندر المكلف
initialValue	قيمة اختيارية تُستخدَم في الرندر الأول فقط

💡 نصائح عملية

قارن value !== deferredValue لمعرفة إن كانت الشاشة تعرض حاليًا نتيجة "قديمة" وأظهر تعتيمًا بصريًا بسيطًا
الحل الأنسب تحديدًا لحقول بحث تتحكّم أنت بقيمتها مباشرة (value={query})

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

توقّع أنه يقلّل عدد طلبات الشبكة تلقائيًا — هو يؤجّل الرندر فقط، لا الطلبات نفسها
استخدامه داخل تحديث موجود أصلًا ضمن Transition — عندها يُرجع القيمة الجديدة مباشرة بلا تأجيل

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