So sánh React Query với SWR? Khi nào chọn cái nào?

So sánh TanStack Query v5 và SWR v2:

• Bundle size: SWR khoảng 4KB, React Query khoảng 13KB — đổi lại số tính năng gấp chừng ba lần.
• Triết lý API: SWR thiên về đơn giản và convention; React Query thiên về quyền kiểm soát và linh hoạt.
• Mutation: React Query có useMutation đầy đủ vòng đời (onMutate, onSuccess, onError, onSettled, optimistic update). SWR không có mutation hook riêng — thường phải tự viết hoặc mượn thư viện khác.
• DevTools: React Query có panel chi tiết; SWR không có DevTools chính thức.
• Infinite query: cả hai đều có, nhưng getNextPageParam cùng getPreviousPageParam của React Query linh hoạt hơn.
• Prefetch + SSR: React Query đi theo pattern dehydrate/HydrationBoundary rành mạch hơn; SWR dùng prop fallback đơn giản hơn.
• Cache key: React Query dùng array nên type-safe và fuzzy match được; SWR dùng string hoặc function.
• Offline: React Query có option networkMode; SWR ở mức cơ bản.

Chọn SWR khi app chủ yếu đọc dữ liệu, team muốn gọn nhẹ, cần bundle nhỏ, và đang dùng nhiều với Next.js.

Chọn React Query khi cần mutation phức tạp, optimistic update, DevTools để debug, hoặc team muốn một giải pháp đầy đủ tính năng.