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