Optimistic update là gì và bạn rollback thế nào khi request thất bại?

Optimistic update = cập nhật UI ngay lập tức như thể thao tác đã thành công, trước khi server phản hồi — ví dụ bấm "thích", đánh dấu todo xong, gửi tin nhắn. UI phản hồi tức thì thay vì chờ round-trip mạng.

Luồng đầy đủ có ba bước:

1. Lưu snapshot trạng thái hiện tại (để có thứ mà quay về).
2. Áp thay đổi lạc quan vào state/cache ngay.
3. Gọi API. Nếu thành công → giữ nguyên (hoặc đồng bộ lại bằng dữ liệu chính xác từ server). Nếu lỗi → rollback về snapshot và báo lỗi cho người dùng (toast, hoặc khôi phục icon).

async function handleLike(id) {
  const prev = posts                       // 1. snapshot
  setPosts(applyLike(posts, id))           // 2. optimistic
  try {
    await toggleLike(id)                   // 3. call API
  } catch (e) {
    setPosts(prev)                         // rollback
    toast.error('Không lưu được, thử lại')
  }
}

Nếu dự án dùng React Query thì đúng ba bước này nằm trong useMutation: onMutate (huỷ query đang chạy + snapshot + set optimistic), onError (rollback từ context), onSettled (invalidateQueries để lấy lại sự thật từ server).

Điểm cần lưu ý:
- ID tạm cho item mới tạo lạc quan; khi server trả ID thật thì thay lại (nếu không, thao tác tiếp theo trên ID tạm sẽ hỏng).
- Huỷ các refetch đang chạy trước khi set optimistic, kẻo dữ liệu server cũ ghi đè giá trị lạc quan.
- Khi nào KHÔNG nên optimistic: thao tác không idempotent, hệ quả tài chính, hoặc khả năng lỗi cao — lúc đó hiện loading rồi mới cập nhật an toàn hơn.