Tại sao nên dùng một thư viện server-state như React Query?

Question

Accepted Answer

**Các thư viện server-state** (React Query/TanStack Query, SWR, RTK Query) chuyên về việc quản lý **dữ liệu lấy từ server** — đối xử với nó như một cache cần giữ đồng bộ với nguồn remote. Chúng tự động xử lý caching, các state loading/error, refetch, và deduplication, thay thế một lượng lớn code thủ công. ## Vấn đề: dữ liệu server không giống UI state Dữ liệu server *được server sở hữu* và chỉ được cache trên client, nên nó có thể bị **cũ (stale)**. Quản lý nó bằng tay nghĩa là cài lại caching, theo dõi loading/error, refetch, retry, và deduplication cho mỗi endpoint — dễ lỗi và lặp đi lặp lại. ## React Query cho bạn gì trong một hook ```jsx import { useQuery } from "@tanstack/react-query"; function Users() { const { data, isLoading, error, refetch } = useQuery({ queryKey: ["users"], // khóa cache queryFn: () => fetch("/api/users").then(r => r.json()), staleTime: 60_000, // coi là tươi (fresh) trong 1 phút }); if (isLoading) return ; if (error) return ; return ; } ``` Một hook duy nhất đó cung cấp: ```text ✓ Caching — dữ liệu cache theo queryKey, chia sẻ giữa các component ✓ Loading/error — các state isLoading/error được quản lý giúp bạn ✓ Deduplication — cùng một query trong 5 component = MỘT request mạng ✓ Background refetch— refetch khi focus cửa sổ/reconnect để giữ tươi ✓ Stale-while-revalidate — hiển thị dữ liệu cache ngay, refetch nền ✓ Retry — tự động retry các request thất bại ✓ Phân trang/infinite scroll, prefetch, invalidate cache ``` ## Mutation + invalidate cache ```jsx const mutation = useMutation({ mutationFn: (user) => api.createUser(user), onSuccess: () => queryClient.invalidateQueries({ queryKey: ["users"] }), // refetch danh sách }); ``` Sau một mutation, bạn invalidate query liên quan và cache refetch — giữ UI nhất quán với server. ## Nó giảm nhu cầu "global state" của bạn ```text Phần lớn những gì người ta đưa vào Redux thực ra là SERVER state. Chuyển nó sang React Query thường thu nhỏ global state xuống chỉ còn UI state thực sự (theme, modal, filter) — đơn giản hóa cả app. ``` ## Tại sao điều này quan trọng Các thư viện server-state giải quyết một vấn đề mà các công cụ state chung (Redux, useState) xử lý kém: giữ một client cache đồng bộ với dữ liệu remote. Chúng thay thế hàng trăm dòng logic fetch/caching/loading thủ công bằng các hook khai báo, và cung cấp hành vi tinh vi (dedup, background refetch, stale-while-revalidate) vốn khó dựng đúng bằng tay. Nhận ra rằng server state xứng đáng có công cụ chuyên dụng riêng — và rằng áp dụng một thư viện như vậy thường đơn giản hóa đáng kể global state — là một trong những insight kiến trúc frontend hiện đại có tác động lớn nhất.