การอัปเดตแบบ optimistic คืออะไร และคุณจะนำมันไปใช้อย่างปลอดภัยได้อย่างไร

Question

Accepted Answer

An **optimistic update** updates the UI **immediately**, *assuming* a server request will succeed, instead of waiting for the response. This makes the app feel instant — but you must handle the case where the request actually fails by **rolling back**.

## ความแตกต่าง

```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)
```

## ทำไมสิ่งนี้จึงสำคัญสำหรับ UX

สำหรับการกระทำที่มีความมั่นใจสูง (ชอบโพสต์ สลับ todo ส่งข้อความแชท) คำขอเกือบจะสำเร็จเสมอ ดังนั้นการรอคำตอบก็เพียงแต่เพิ่มความล่าช้าที่สังเกตได้ การอัปเดตแบบ optimistic ทำให้สิ่งเหล่านี้เป็นแบบทันที

## การนำไปใช้อย่างปลอดภัย (rollback เป็นสิ่งสำคัญ)

```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
  }
}
```

กุญแจไปที่ความปลอดภัย: **สแนปชอตสถานะก่อนหน้าก่อนการเปลี่ยนแปลง optimistic** และคืนค่าหากคำขอล้มเหลว การข้าม rollback ทำให้ UI โกหกเกี่ยวกับสถานะเซิร์ฟเวอร์ — bug ที่อันตรายที่การอัปเดต optimistic อาจแนะนำ

## ด้วย 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` (snapshot + optimistic update), `onError` (rollback), `onSettled` (refetch เพื่อยืนยันความจริง)

## เมื่อใดที่ควรใช้ / หลีกเลี่ยง

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

## ทำไมสิ่งนี้จึงสำคัญ

การอัปเดตแบบ optimistic เป็นเทคนิค UX ที่มีประสิทธิภาพซึ่งทำให้แอปพลิเคชันเป็นแบบทันทีโดยไม่รอเครือข่าย — แต่จะปลอดภัยก็ต่อเมื่อคุณนำ rollback (snapshot-then-restore) ไปใช้และแสดงข้อผิดพลาด

รูปแบบ (snapshot → update → on failure roll back → reconcile) เป็นความรู้ที่จำเป็น และการเข้าใจว่าเมื่อใดเหมาะสม (การกระทำที่มีแนวโน้มสำเร็จ ความเสี่ยงต่ำ) เมื่อเทียบกับอันตราย (การชำระเงิน) คือสิ่งที่แยกแยะ UI ที่เรียบร้อยและน่าเชื่อถือจากสิ่งที่แสดงสถานะเซิร์ฟเวอร์ที่ไม่ถูกต้องอย่างเงียบ ๆ