كيف نستخدم useOptimistic في React 19 لواجهات سريعة الاستجابة

النموذج الذهني

الواجهات التفاؤلية فكرة قديمة: افترض المسار الناجح، واعرضه فورًا، ثم صالِح النتيجة عندما يرد الخادم. تدمج React 19 هذا النمط في خطاف اسمه useOptimistic، وتربطه بعملية انتقال بحيث تُلغى القيمة التفاؤلية تلقائيًا بمجرد وصول الحالة الحقيقية.

الفكرة الأساسية التي يضعها فريقنا نصب عينيه: لا يخزّن useOptimistic أي شيء دائم. إنه مجرد عرض للحالة الحقيقية يكون فعّالًا فقط أثناء انتظار الانتقال. تمرّر مصدر الحقيقة بالإضافة إلى دالة اختزال نقية تحوّل القيمة الحالية وحمولة الإجراء إلى القيمة التفاؤلية التالية. وعند اكتمال الإجراء، تعيد React العرض من الحقيقة وتتخلص من القيمة التفاؤلية دون أي تراجع يدوي.

نمط: الإضافة عند الإرسال

أنظف استخدام هو الإضافة إلى قائمة — صندوق تعليقات أو سجل نشاط أو قائمة مهام. يرسل المستخدم فيظهر العنصر فورًا بنمط باهت يدل على الإرسال، وعندما يعيد إجراء الخادم القائمة النهائية يحل الصف الحقيقي محل العنصر المؤقت. نتحكم في النمط الباهت عبر علامة انتظار، وندع إجراء الخادم يعيد التحقق من القائمة المصدر، فلا نلمس المصفوفة التفاؤلية مرة أخرى.

نمط: التبديل مع عدّاد مشتق

زر الإعجاب أو المتابعة هو تبديل مع عدّاد مشتق. نكتب دالة الاختزال لتقلب الاثنين معًا حتى لا يتأخر الرقم عن الأيقونة. ولأن دالة الاختزال تستقبل القيمة التفاؤلية الحالية، تتراكم النقرات المزدوجة السريعة بشكل صحيح بدلًا من التصارع مع إغلاق قديم. هذا التراكم هو أكبر مكسب عملي مقارنة بالنهج القديم القائم على useState والمرجع.

العقبات التي واجهناها

أولًا، استدعاء التحديث التفاؤلي خارج انتقال أو إجراء نموذج يجعل القيمة تومض ثم تختفي، لعدم وجود انتقال معلّق يبقيها حية. شغّله دائمًا من داخل إجراء نموذج أو دالة startTransition.

ثانيًا، لا يملك useOptimistic قناة أخطاء. عندما يرمي إجراء الخادم خطأً، تختفي القيمة التفاؤلية بشكل صحيح، لكن المستخدم لا يحصل على تفسير. نربطه بـ useActionState أو بإشعار منبثق حتى تظهر الكتابة الفاشلة برسالة واضحة. الواجهة التفاؤلية بلا مسار فشل مرئي تفقد مدخلات المستخدم بصمت.

ثالثًا، إعادة استخدام مفتاح مؤقت ثابت لكل صف معلّق يجعل React تدمج العناصر المتزامنة. نمنح كل عنصر تفاؤلي مفتاحًا مؤقتًا فريدًا وندع صف الخادم يحل محله عند إعادة التحقق.

متى نتجنبه

الواجهة التفاؤلية وعد بأن الإجراء سينجح على الأرجح. أما الكتابات منخفضة الثقة — المدفوعات والحذف المدمّر وأي شيء بتحقق يفشل كثيرًا — فنبقي فيها حالة انتظار صادقة. إظهار نجاح لا يمكنك ضمانه يهدم الثقة أسرع من أي مؤشر تحميل. نحصر useOptimistic في التفاعلات عالية النجاح ومنخفضة المخاطر حيث يكون البطء هو العدو الوحيد.

الخلاصة

الواجهة البرمجية صغيرة والمكاسب حقيقية: استجابة فورية وتراجع تلقائي وتراكم يصمد أمام الإدخال السريع. شغّله داخل انتقال، واربطه بقناة أخطاء، وامنح العناصر المعلّقة مفاتيح فريدة. اضبط هذه الثلاثة، وستشعر نماذجك أسرع بمقدار دورة شبكة كاملة دون أي تكلفة.