Optimistic update là gì và làm sao triển khai chúng an toàn?

Question

Accepted Answer

Một **optimistic update** cập nhật UI **ngay lập tức**, *giả định* rằng một request tới server sẽ thành công, thay vì chờ phản hồi. Điều này khiến app cảm thấy tức thời — nhưng bạn phải xử lý trường hợp request thực sự thất bại bằng cách **roll back** (hoàn tác).

## Sự tương phản

```text
Pessimistic (thông thường): click → hiện spinner → chờ server → RỒI cập nhật UI (cảm thấy chậm)
Optimistic:                 click → cập nhật UI NGAY → gửi request →
                            nếu thất bại, ROLL BACK thay đổi (cảm thấy tức thời)
```

## Tại sao nó quan trọng với UX

Với các thao tác độ tin cậy cao (like một bài viết, toggle một todo, gửi một tin nhắn chat), request gần như luôn thành công, nên chờ round-trip chỉ thêm độ trễ cảm nhận. Optimistic update khiến những thao tác này cảm thấy tức thời.

## Triển khai an toàn (rollback là then chốt)

```jsx
async function toggleLike(post) {
  const previous = post.liked;                 // 1. CHỤP LẠI (snapshot) state cũ để rollback
  setPost({ ...post, liked: !post.liked });    // 2. cập nhật UI một cách optimistic

try {
    await api.toggleLike(post.id);             // 3. bắn request
  } catch (err) {
    setPost({ ...post, liked: previous });     // 4. ROLL BACK khi thất bại
    showError("Couldn't update — please retry"); // 5. báo cho người dùng
  }
}
```

Chìa khóa cho sự an toàn: **chụp lại state trước đó trước khi thay đổi optimistic**, và khôi phục nó nếu request thất bại. Bỏ qua rollback để lại UI nói dối về state của server — bug nguy hiểm mà optimistic update có thể đưa vào.

## Với React Query (hỗ trợ sẵn)

```jsx
useMutation({
  mutationFn: toggleLike,
  onMutate: async (newData) => {
    await queryClient.cancelQueries({ queryKey: ["post"] });
    const previous = queryClient.getQueryData(["post"]); // snapshot
    queryClient.setQueryData(["post"], newData);          // cập nhật optimistic
    return { previous };                                   // truyền snapshot sang onError
  },
  onError: (err, vars, context) => {
    queryClient.setQueryData(["post"], context.previous);  // rollback
  },
  onSettled: () => queryClient.invalidateQueries({ queryKey: ["post"] }), // đối chiếu với server
});
```

React Query chính thức hóa pattern: `onMutate` (snapshot + cập nhật optimistic), `onError` (rollback), `onSettled` (refetch để xác nhận sự thật).

## Khi nào dùng / tránh

```text
✓ Dùng: các thao tác tỷ lệ thành công cao, rủi ro thấp (like, toggle, sắp xếp lại, chat)
✗ Tránh: các thao tác quan trọng/không chắc chắn (thanh toán, hành động không thể đảo ngược) — hãy chờ xác nhận
```

## Tại sao điều này quan trọng

Optimistic update là một kỹ thuật UX mạnh mẽ khiến app cảm thấy tức thời bằng cách không chờ mạng — nhưng chúng chỉ *an toàn* nếu bạn triển khai rollback (snapshot rồi khôi phục) và phơi bày lỗi.

Pattern (snapshot → cập nhật → khi thất bại roll back → đối chiếu) là kiến thức thiết yếu, và hiểu khi nào nó phù hợp (khả năng thành công cao, rủi ro thấp) so với khi nào nguy hiểm (thanh toán) là điều phân biệt một UI tinh tế, đáng tin với một UI âm thầm xuyên tạc state của server.