Nút "Thích" cần đổi màu ngay khi bấm dù request chưa xong. Dùng `useOptimistic` thế nào, và khi request lỗi thì trạng thái quay lại ra sao?

useOptimistic cho bạn một bản sao tạm của state để hiển thị trong lúc một action đang chạy.

function LikeButton({ post, toggleLike }) {
  const [optimistic, addOptimistic] = useOptimistic(
    post.likes,
    (current, delta) => current + delta,
  )

  async function onClick() {
    addOptimistic(post.liked ? -1 : 1)   // paint immediately
    await toggleLike(post.id)            // server action
  }

  return <button onClick={onClick}>{optimistic}</button>
}

Rollback là tự động và đó là điểm hay bị hỏi: giá trị optimistic chỉ tồn tại trong phạm vi transition/action đang chạy. Khi action kết thúc — dù thành công hay ném lỗi — React bỏ giá trị tạm và render lại theo state thật. Nếu server thất bại và dữ liệu gốc không đổi, số like tự trở về cũ; bạn không phải viết code hoàn tác.

Điều kiện để hoạt động đúng:
- addOptimistic phải được gọi bên trong một action/transition (form action, hàm truyền cho startTransition), không phải trong một onClick đồng bộ rời rạc.
- State gốc phải được cập nhật thật sau khi action xong (revalidate, refetch), nếu không UI sẽ nháy về giá trị cũ rồi mới đúng.
- Vẫn nên báo lỗi rõ ràng cho người dùng — rollback im lặng khiến họ tưởng đã bấm hụt.