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

SWR cho app đơn giản read-heavy với Next.js (~4KB, minimal API); React Query cho app phức tạp cần mutations, optimistic updates, DevTools, granular cache control (~13KB nhưng feature-rich hơn 3x).

• So sánh chi tiết React Query (TanStack Query v5) vs SWR v2: Bundle size — SWR ~4KB, React Query ~13KB (nhưng features nhiều hơn 3x).
• API philosophy — SWR ưu tiên simplicity và convention, React Query ưu tiên control và flexibility.
• Mutations: React Query có useMutation hook đầy đủ (onMutate, onSuccess, onError, onSettled, optimistic updates), SWR không có mutation hook — thường dùng thư viện khác hoặc tự viết.
• DevTools: React Query có DevTools panel chi tiết, SWR không có DevTools chính thức.
• Infinite queries: cả hai có, nhưng React Query có getNextPageParam + getPreviousPageParam linh hoạt hơn.
• Prefetching + SSR: React Query có dehydrate/HydrationBoundary pattern rõ ràng hơn, SWR có fallback prop đơn giản hơn.
• Cache key: React Query dùng array (type-safe, fuzzy match), SWR dùng string/function.
• Offline support: React Query có networkMode option, SWR basic.
• Kết luận: chọn SWR khi app chủ yếu read-only data fetching, team muốn đơn giản, bundle size quan trọng, dùng nhiều với Next.js pages router.
• Chọn React Query khi cần mutations phức tạp, optimistic updates, DevTools cho debugging, team cần full-featured solution.