واجهة المستخدم المتفائلة هي واحدة من أسرع الطرق لجعل المنتج يبدو سريع الاستجابة دون تقليل زمن انتقال الشبكة على الإطلاق. يتم تحديث الواجهة على الفور، ثم يتوافق اتصال الخادم في الخلفية. عندما تعمل، يبدو أن التجربة حادة. عندما تفشل بشكل كبير، يبدو أن الأمر غير صادق.
لهذا السبب، فإن السؤال المعماري ليس "هل يجب أن نستخدم التحديثات المتفائلة؟" بل هو "أي التعديلات آمنة بما فيه الكفاية للتنبؤ؟"
## تعديل متفائل جيد
تعتبر الإجراءات منخفضة المخاطر مع إلغاء بسيط هي أفضل الخيارات:
- الإعجاب بمنشور
- التبديل بين إعدادات
- إعادة ترتيب قائمة محلية
- إضافة عنصر مسودة يمكن إزالته بسهولة
مع TanStack Query، النموذج واضح:
```tsx
const mutation = useMutation({
mutationFn: updateTodo,
onMutate: async (nextTodo) => {
await queryClient.cancelQueries({ queryKey: ["todos"] });
const previous = queryClient.getQueryData<Todo[]>(["todos"]);
queryClient.setQueryData<Todo[]>(["todos"], (current = []) =>
current.map((todo) => (todo.id === nextTodo.id ? nextTodo : todo)),
);
return { previous };
},
onError: (_error, _nextTodo, context) => {
queryClient.setQueryData(["todos"], context?.previous);
},
});
الجزء المهم ليس الكتابة المتفائلة. بل هو مسار الإلغاء.
حيث يصبح الأمر محفوفاً بالمخاطر
تصبح واجهة المستخدم المتفائلة خطرة عندما:
- تكون الصراعات شائعة
- تعيش قواعد العمل فقط على الخادم
- يتعلق الأمر بالمال أو المخزون
- يكون من الصعب تفسير الفشل أو إلغاؤه
يجب ألا تكون تأكيدات الدفع "ناجحة بشكل متفائل". من المحتمل أن تكون الإعجابات الاجتماعية كذلك.
قاعدة أفضل
استخدم التحديثات المتفائلة حيث يكون الفشل نادراً، والإلغاء واضحاً، ويمكن للمستخدم فهم ما حدث إذا رفض الخادم التغيير. سيؤدي ذلك إلى إنتاج منتج سريع دون تعليم المستخدمين عدم الثقة في الواجهة.
قراءات إضافية