الإجابة المختصرة
الفائدة تكمن في الحفاظ على استجابة الشاشة دون تجميدها أثناء العمليات الثقيلة، والتحدي هو إدارة الحالات المؤقتة (Pending States) وفهم تسلسل تحديثات الواجهة المتزامنة.
الشرح
قبل React 18، كانت كافة التحديثات عاجلة وغير قابلة للمقاطعة، فإذا استغرق تحديث مصفوفة ضخمة 200ms تظلم الشاشة ويتجمد المؤشر. باستخدام startTransition، يعلّم ريأكت التحديث كأولوية منخفضة ويحسبه على نفس الخيط الرئيسي لكن على دفعات صغيرة (Time Slicing)، متوقفاً كل بضع مللي ثوانٍ ليتيح للمتصفح معالجة الإدخال؛ فإذا وصل تحديث عاجل (مثل الكتابة أو النقر) يقاطع ريأكت عمل الـ transition ويتجاهله ثم يعيد حسابه بالقيم الجديدة. لا يوجد خيط موازٍ، لذا الحساب الثقيل المتزامن داخل دالة واحدة (مثل heavyFilterAlgorithm) لا يُقسّم تلقائياً، والمستفيد الحقيقي هو عمل الـ render الموزع على مكونات كثيرة.
مثال بالكود
startTransition(() => {
setSearchResults(heavyFilterAlgorithm(rawSearchTerm));
});أخطاء شائعة
- محاولة وضع مدخلات التحكم في النماذج (Controlled Inputs text) داخل startTransition مما يشعر المستخدم ببطء استجابة لوحة المفاتيح.