ما هي التحديثات المتفائلة (Optimistic Updates) وكيف تطبقها بأمان؟

Question

Accepted Answer

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

## المقارنة

```text
Pessimistic (normal): click → show spinner → wait for server → THEN update UI (feels slow)
Optimistic:           click → update UI INSTANTLY → send request →
                      if it fails, ROLL BACK the change (feels instant)
```

## لماذا يهم لتجربة المستخدم

بالنسبة للإجراءات عالية الثقة (الإعجاب بمنشور، تبديل مهمة، إرسال رسالة)، يكون الطلب ناجحاً دائماً تقريباً، لذا انتظار التبادل يضيف فقط تأخيراً محسوساً. التحديثات المتفائلة تجعل هذه الإجراءات تبدو فورية.

## تطبيقها بأمان (الإرجاع حرج)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. SNAPSHOT the old state for rollback
  setPost({ ...post, liked: !post.liked });    // 2. update UI optimistically

try {
    await api.toggleLike(post.id);             // 3. fire the request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK on failure
    showError("Couldn't update — please retry"); // 5. tell the user
  }
}
```

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

## مع React Query (دعم مدمج)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // optimistic update
    return { previous };                                   // pass snapshot to onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // reconcile with server
});
```

يصيغ React Query النمط: `onMutate` (لقطة + تحديث متفائل)، `onError` (إرجاع)، `onSettled` (إعادة جلب للتحقق).

## متى تستخدمها / تتجنبها

```text
✓ Use: high-success, low-stakes actions (likes, toggles, reorder, chat)
✗ Avoid: critical/uncertain operations (payments, irreversible actions) — wait for confirmation
```

## لماذا يهم

التحديثات المتفائلة هي تقنية قوية لتجربة المستخدم تجعل التطبيقات تبدو فورية بعدم الانتظار على الشبكة — لكنها آمنة فقط إذا طبقت الإرجاع (لقطة-ثم-استعد) وظهرت الأخطاء.

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