{"id":258,"date":"2026-05-20T13:01:20","date_gmt":"2026-05-20T13:01:20","guid":{"rendered":"https:\/\/abrarqasim.com\/blog\/tanstack-query-2026-what-i-reach-for-instead-of-useeffect\/"},"modified":"2026-05-20T13:01:20","modified_gmt":"2026-05-20T13:01:20","slug":"tanstack-query-2026-what-i-reach-for-instead-of-useeffect","status":"publish","type":"post","link":"https:\/\/abrarqasim.com\/blog\/tanstack-query-2026-what-i-reach-for-instead-of-useeffect\/","title":{"rendered":"TanStack Query in 2026: What I Reach For Instead of useEffect"},"content":{"rendered":"

Short version for the impatient: every time I write useEffect<\/code> to fetch data in a React component now, a small voice in my head says “you’re going to regret this on the staleness handling.” That voice is correct about 80% of the time. The rest of this post is what I do instead, and why I don’t think TanStack Query<\/a> is hype.<\/p>\n

I’ve been on Query (formerly React Query) for about four years across maybe twelve projects. The hooks have changed names. The mental model hasn’t. If you’ve been avoiding it because the docs are intimidating, this is the friendly tour I wish someone had written me.<\/p>\n

The pattern it actually replaces<\/h2>\n

Here’s the version of data fetching I wrote in every React app for years:<\/p>\n

function Invoices() {\n  const [invoices, setInvoices] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    setLoading(true);\n    fetch("\/api\/invoices")\n      .then((r) => r.json())\n      .then((data) => { if (!cancelled) setInvoices(data); })\n      .catch((err) => { if (!cancelled) setError(err); })\n      .finally(() => { if (!cancelled) setLoading(false); });\n    return () => { cancelled = true; };\n  }, []);\n\n  if (loading) return <Spinner \/>;\n  if (error) return <ErrorBox error={error} \/>;\n  return <InvoiceTable rows={invoices} \/>;\n}\n<\/code><\/pre>\n
That’s 20-ish lines of boilerplate per component, and it does almost none of the things you actually need: no cache, no refetch on focus, no retry, no deduplication if two components ask for the same data, no way to invalidate it when a mutation lands. You end up writing your own context-based cache eventually, and then a colleague writes a slightly different one in another part of the app, and now you have two.<\/p>\n
Here’s the same thing with TanStack Query:<\/p>\n
function Invoices() {\n  const { data, isPending, error } = useQuery({\n    queryKey: ["invoices"],\n    queryFn: () => fetch("\/api\/invoices").then((r) => r.json()),\n  });\n\n  if (isPending) return <Spinner \/>;\n  if (error) return <ErrorBox error={error} \/>;\n  return <InvoiceTable rows={data} \/>;\n}\n<\/code><\/pre>\n
That’s the whole component. Six lines for the hook, the same three render branches, and you get caching, deduplication, background refetch, retries with exponential backoff, and staleTime<\/code> controls for free. If two components on the page both call useQuery({ queryKey: [\"invoices\"] })<\/code>, it’s one network request. I shouldn’t need to sell anyone on that anymore but here we are.<\/p>\n
Why useEffect for data fetching is the wrong tool<\/h2>\n
I used to defend useEffect<\/code> for fetching. “It’s just React, no library lock-in.” That argument falls apart the moment you need any of the following: refetch when the user comes back to the tab, refetch when the network reconnects, share data between two components without prop-drilling, retry a failed request without writing your own backoff, or invalidate a list after a POST without manually re-running the effect.<\/p>\n
The React team has been pretty explicit about this<\/a>. The docs literally say “if you’re not using a framework… or want to make your own custom solution, consider using a data fetching library or building your own.” The reason is that useEffect<\/code> runs on the client only, has no shared cache, has no race-condition handling, and re-runs on every dependency change without coordination. Suspense and React 19’s use<\/code> hook help, but for any non-trivial app you still need cache and invalidation, and that’s not what those hooks give you.<\/p>\n
Server Components are the other thing that gets brought up. They’re great, and I wrote about how I actually use them<\/a>. They handle the initial fetch beautifully. They do not handle the interactive client-side stuff: a list that updates when you delete a row, an optimistic toggle, a search box that re-fetches as you type. You still need a client cache for those, and TanStack Query is what I use for it.<\/p>\n
The mental model in one sentence<\/h2>\n
If you only remember one thing from this post: a query key is a global cache key, and any mutation that changes the data behind that key needs to invalidate it.<\/strong><\/p>\n
That’s it. Everything else is API surface area on top of that idea. queryKey: [\"invoices\"]<\/code> is a slot in a global cache. queryKey: [\"invoice\", id]<\/code> is a different slot per id. When you POST \/api\/invoices<\/code>, you call queryClient.invalidateQueries({ queryKey: [\"invoices\"] })<\/code> and any mounted component reading that key refetches.<\/p>\n
What made it click for me was TkDodo’s blog<\/a>, specifically his “Effective React Query Keys” post. He frames keys as the cache identity, not as parameters to a function, and the rest of the library makes sense from there.<\/p>\n
What I actually configure on every project<\/h2>\n
Here are the defaults I set on the QueryClient<\/code> for every app I start. Not optional in my view:<\/p>\n
const queryClient = new QueryClient({\n  defaultOptions: {\n    queries: {\n      staleTime: 30_000,\n      gcTime: 5 * 60_000,\n      retry: (failureCount, error) => {\n        if (error.status >= 400 && error.status < 500) return false;\n        return failureCount < 3;\n      },\n      refetchOnWindowFocus: true,\n      refetchOnReconnect: true,\n    },\n  },\n});\n<\/code><\/pre>\n
A few things I learned the hard way. staleTime: 0<\/code> (the default) is too aggressive for most apps; data refetches on every component mount and you’ll get the dreaded waterfall on a dashboard with twelve widgets. Thirty seconds is a much saner default. The 4xx skip on retry is critical: if the server says 401 or 404, retrying three times with backoff just makes the user wait longer for the same error. refetchOnWindowFocus<\/code> is the single feature I’d miss most if I had to give up Query. That one almost feels like cheating once you’ve shipped it.<\/p>\n
Mutations get their own pattern:<\/p>\n
const { mutate, isPending } = useMutation({\n  mutationFn: (invoice) =>\n    fetch("\/api\/invoices", { method: "POST", body: JSON.stringify(invoice) })\n      .then((r) => { if (!r.ok) throw r; return r.json(); }),\n  onSuccess: () => {\n    queryClient.invalidateQueries({ queryKey: ["invoices"] });\n  },\n});\n<\/code><\/pre>\n
One thing the v5 API got right is consolidating to isPending<\/code> everywhere instead of the v4 mix of isLoading<\/code> and isPending<\/code>. If you’re still on v4, the v5 migration guide<\/a> is short and worth doing. Type inference is better, the API is more consistent, and you stop apologizing for the legacy names.<\/p>\n
SWR vs TanStack Query, briefly<\/h2>\n
I get asked this every couple of months. They solve the same problem. SWR is smaller, the API is leaner, and if you’re inside Vercel’s ecosystem the defaults line up well with Next.js. TanStack Query has more features (mutations, infinite queries, suspense integration, devtools that are actually good, framework support for Vue\/Solid\/Svelte) and a deeper config surface.<\/p>\n
My honest take after using both: SWR is great for sites that mostly read data and rarely mutate it. TanStack Query is what you want the moment mutations and cache invalidation start to matter. I have a marketing site on SWR and an admin dashboard on Query, and that split has been stable for years.<\/p>\n
The devtools is the thing nobody talks about and it’s a quality-of-life difference. You hit a keyboard shortcut, see every query in the cache, click one, see its raw data, see who’s subscribed to it, manually mark it stale. When I’m debugging a “why isn’t this list updating” bug, devtools tells me in five seconds whether the query is even mounted. SWR’s devtools story is fine, but it’s not in the same ballpark.<\/p>\n
When I don’t reach for it<\/h2>\n
For full honesty, here’s when I skip Query.<\/p>\n
If the data is loaded once on mount and never refetched and never invalidated, a plain useEffect<\/code> or a Server Component is simpler. Examples: a static config blob, the user’s locale, a feature flag set at startup. Don’t put those in Query; you’re adding an indirection for nothing.<\/p>\n
If the state is fully derived from user input and never round-trips to a server, that’s useState<\/code> or Zustand territory. I switched a lot of Redux code over to Zustand<\/a> and the distinction between “client state” (Zustand) and “server state” (Query) is the cleanest mental separation I’ve found. Pick the tool that matches the kind of state.<\/p>\n
If you’re rendering a stream, like chat messages, log tails, or anything that’s push-not-pull, Query is the wrong shape. Use a WebSocket or SSE<\/a> and a reducer, and call setQueryData<\/code> to nudge the cache when something relevant lands. Don’t try to model a stream as a query.<\/p>\n
This is the kind of “pick the right tool” thinking I lean on in my project work<\/a>. Most architecture mistakes I’ve made came from forcing one abstraction to cover two problems.<\/p>\n
What to do this week<\/h2>\n
If you’ve never used Query, install it (npm i @tanstack\/react-query<\/code>), wrap your root in <QueryClientProvider><\/code>, and convert one useEffect<\/code>-fetch component to useQuery<\/code>. Pick the one with the most bugs around staleness or duplicate requests; you’ll feel the difference fastest there. Don’t try to convert the whole app in one go.<\/p>\n
If you’re already on Query but still on v4, set aside an afternoon and run the codemod. The names are saner now and the type inference catches stuff v4 missed silently.<\/p>\n
And if you find yourself writing a useEffect<\/code> with a fetch in it, ask whether the data has any of the following properties: does it need a cache, does it change behind your back, does another component want it too. If the answer is yes to any of them, you’re writing a cache library. Use one that’s already been written.<\/p>\n","protected":false},"excerpt":{"rendered":"
Why I stopped writing useEffect-for-data-fetching and what TanStack Query actually replaces in 2026, with real before\/after code from production.<\/p>\n","protected":false},"author":2,"featured_media":257,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"","rank_math_description":"Why I stopped writing useEffect-for-data-fetching and what TanStack Query actually replaces in 2026, with real before\/after code from production.","rank_math_focus_keyword":"tanstack react query","rank_math_canonical_url":"","rank_math_robots":"","footnotes":""},"categories":[35],"tags":[301,38,44,41,300,299,195],"class_list":["post-258","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-data-fetching","tag-frontend","tag-javascript","tag-react","tag-react-query","tag-tanstack-query","tag-useeffect"],"_links":{"self":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/258","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/comments?post=258"}],"version-history":[{"count":0,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/posts\/258\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media\/257"}],"wp:attachment":[{"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/media?parent=258"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/categories?post=258"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/abrarqasim.com\/blog\/wp-json\/wp\/v2\/tags?post=258"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}