TanStack Query v5 (React Query): Kỹ thuật Optimistic Updates giao diện 0ms

Khi người dùng bấm nút "Xóa sản phẩm" hoặc "Thêm vào giỏ hàng", nếu giao diện phải hiện biểu tượng xoay xoay (Loading Spinner) chờ API chạy xong mới cập nhật, trải nghiệm người dùng sẽ bị khựng lại đáng kể. TanStack Query v5 (React Query) cung cấp kỹ thuật Optimistic Updates (Cập nhật lạc quan) giúp giao diện **biến đổi TỨC THÌ trong 0ms**!

1. Cơ chế hoạt động của Optimistic Updates

1. Bước 1 (Ngay lập tức): Khi người dùng bấm nút, TanStack Query tạm dừng các query đang chạy, sao lưu dữ liệu cũ (Snapshot) và **ép cache cập nhật dữ liệu mới ngay lập tức trên UI**.
2. Bước 2 (Chạy ngầm): Gửi Yêu cầu API Mutation thực sự tới Server.
3. Bước 3 (Xử lý kết quả):
   • Nếu Server thành công: Giữ nguyên giao diện và làm tươi cache mới.
   • Nếu Server báo lỗi (Error): **Tự động Rollback (Hoàn tác)** giao diện về đúng trạng thái dữ liệu cũ từ Snapshot!

2. Mã nguồn Optimistic Updates chuẩn TanStack Query v5

import { useMutation, useQueryClient } from '@tanstack/react-query';

export function useDeleteTodo() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: deleteTodoApi,
    onMutate: async (todoId) => {
      await queryClient.cancelQueries({ queryKey: ['todos'] });
      const previousTodos = queryClient.getQueryData(['todos']);

      // Cập nhật giao diện ngay lập tức trong 0ms
      queryClient.setQueryData(['todos'], (old) =>
        old.filter((t) => t.id !== todoId)
      );

      return { previousTodos };
    },
    onError: (err, todoId, context) => {
      // Tự động Rollback nếu có lỗi xảy ra
      queryClient.setQueryData(['todos'], context.previousTodos);
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    },
  });
}

Kết luận

Áp dụng Optimistic Updates là bí quyết tạo nên các ứng dụng Web siêu tốc phản hồi như ứng dụng Native Mobile. Uwmee Software tích hợp TanStack Query v5 chuẩn mực cho mọi dự án làm web app. Đọc thêm bài viết React 19 useOptimistic.