📦

TanStack Query

data-fetching

The de-facto standard for server state in React — caching, retries, and invalidation done right.

About

TanStack Query (formerly React Query) is a data-fetching and server-state management library that has become the default answer to "how do I fetch data in React." It wraps `fetch` (or Axios, or whatever you like) with a cache, automatic background refetching, request deduplication, retry logic, and a tiny set of hooks that replace the boilerplate of `useEffect` + `useState` for almost every server-state use case. The killer feature is cache invalidation. Instead of wiring up loading flags, error boundaries, and `setState` calls everywhere, you write `useQuery({ queryKey: ['todos'], queryFn })` and the library handles dedupe, retry, refetch-on-focus, refetch-on-mount, and stale-while-revalidate for you. Mutations invalidate the right queries automatically. It is framework-agnostic — the same API works in React, Vue, Solid, Svelte, and Angular.

Key Features

  • Smart caching

    Stale-while-revalidate, automatic deduplication, and configurable staleness windows.

  • Background refetching

    Refetches on window focus, mount, and interval, all configurable per query.

  • Mutations with invalidation

    Mutate → auto-invalidate the queries that depend on the data you changed.

  • Framework-agnostic core

    Same API for React, Vue, Solid, Svelte, and Angular.

  • Devtools

    An optional Devtools panel shows the live cache, query keys, and observer state.

Best For

React/Next.js apps that talk to a REST or GraphQL backend
Teams that have outgrown ad-hoc fetch logic
Anyone rebuilding an app that already has a useState/useEffect mess

Use Cases

  • List + detail screens with optimistic updates
  • Infinite scroll with `useInfiniteQuery`
  • Dashboards with auto-refresh on focus

Pros & Cons

Pros

  • Eliminates 90% of `useEffect` + `useState` boilerplate for server data
  • Cache invalidation actually works the way you'd hope
  • Devtools make debugging data flow trivial
  • Framework-agnostic core is easy to learn once, apply anywhere
  • Active maintenance, frequent releases, large community

Cons

  • Adds a learning curve for the cache invalidation model
  • Bundle size is non-trivial (~13kB gzipped for the React adapter)
  • Some users reach for it when `useState` would do — overkill for trivial state
1
1 votes

Comments

Login to comment

E
emmachenJun 14, 2026

The Devtools panel alone is worth it. Watching cache invalidation happen in real time is such a quality-of-life improvement.