Tại sao tôi bắt đầu học TanStack Query

Hôm nay tôi đã bắt đầu học TanStack Query.

Nó thay đổi cách bạn xây dựng các ứng dụng React.

Nhiều lập trình viên nghĩ rằng nó là một công cụ quản lý state giống như Redux. Không phải vậy. Nó giải quyết một vấn đề khác.

Các ứng dụng React xử lý hai loại state:

• UI state: các nút bấm, modal và input. • Server state: dữ liệu từ các API như người dùng hoặc sản phẩm.

Hầu hết các lập trình viên sử dụng useState, useEffect hoặc Redux để quản lý server state. Điều này sẽ nhanh chóng trở nên rắc rối. Dữ liệu server rất khó xử lý vì nó thay đổi liên tục, cần caching và có thể gặp lỗi.

TanStack Query là một trình quản lý server-state. Nó xử lý các tác vụ này cho bạn:

• Fetching dữ liệu • Caching phản hồi • Cập nhật dữ liệu cũ • Background refetching • Xử lý lỗi • Trạng thái loading • Logic retry

Bạn sẽ không còn phải viết các logic loading và lỗi một cách thủ công. Bạn chỉ cần cho ứng dụng biết bạn cần dữ liệu gì.

Công cụ này tạo ra một lớp cache thông minh giữa UI và API của bạn.

Khi UI yêu cầu dữ liệu, công cụ sẽ kiểm tra cache trước. Nếu dữ liệu đã tồn tại, nó sẽ hiển thị ngay lập tức. Điều này giúp ứng dụng của bạn có cảm giác rất nhanh.

Công cụ này cũng cập nhật dữ liệu ngầm. UI của bạn luôn được làm mới mà không bị nhấp nháy.

Nó tự động xử lý các tình huống phức tạp:

• Nó refetch khi bạn refocus cửa sổ. • Nó refetch khi kết nối mạng được khôi phục. • Nó hiển thị dữ liệu từ cache khi internet yếu.

Thay vì viết các hook useEffect phức tạp, bạn chỉ cần một dòng mã đơn giản:

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
});

Đó là tất cả những gì bạn cần.

Có các công cụ khác như:

• Redux Toolkit: Tốt cho logic UI phức tạp nhưng không lý tưởng cho server state. • SWR: Một giải pháp thay thế nhẹ nhàng để caching dễ dàng. • Apollo Client: Tốt nhất cho các GraphQL API.

Hãy sử dụng TanStack Query nếu bạn làm việc với REST API và muốn có một UI nhanh chóng với ít code hơn.

Phát triển frontend hiện đại xoay quanh hiệu suất và đồng bộ hóa dữ liệu. TanStack Query xử lý những phần khó khăn để bạn có thể tập trung vào các tính năng.

Viết ít code hơn không phải là mục tiêu. Xây dựng các hệ thống thông minh hơn mới là mục tiêu.

Source: https://dev.to/usama_dev/why-i-started-learning-react-query-tanstack-query-today-5ceg