DEV Community

Cover image for Why I Started Learning React Query (TanStack Query) Today
Usama
Usama

Posted on

Why I Started Learning React Query (TanStack Query) Today

#react #reactquery #webdev #programming

Today I started learning something that honestly changed the way I think about React apps: React Query, now known as TanStack Query.

At first, I thought it was just another state management tool like Redux. But it’s not.
It solves a completely different problem.

And if you are building React apps, especially with APIs, this is one of those tools that quietly removes a lot of pain.

The Real Problem It Solves (What I Didn’t Understand Before)

In React apps, we usually deal with two types of state:

  • UI state → buttons, modals, inputs
  • Server state → data from APIs (users, posts, products, etc.)

Most developers (including me at first) try to manage server state using:

  • useState
  • useEffect
  • Redux
  • Context API

And it becomes messy fast.

Because server state is not simple:

  • It changes
  • It needs caching
  • It needs refetching
  • It can fail
  • It should sync across screens

This is where TanStack Query comes in.

What React Query Actually Is

React Query is NOT a traditional state manager.

It is a server-state manager.

It automatically handles:

  • Fetching data
  • Caching responses
  • Updating stale data
  • Background refetching
  • Error handling
  • Loading states
  • Retry logic

You don’t manually build all of this anymore.

Instead of writing:

  • loading state
  • error state
  • fetch logic
  • cache logic

You just declare the data you need.

The Big Idea (Simple Explanation)

Think of it like this:

Instead of you managing data manually, React Query creates a smart cache layer between your UI and API.

So your UI always asks:

“Do I already have this data?”

If yes → it gives cached data instantly
If no → it fetches it, stores it, and updates UI automatically

This is why apps feel faster.

What Makes It Powerful

Here’s what impressed me the most:

1. Caching (Automatic Memory)

Once data is fetched:

  • it is stored in cache
  • reused instantly next time
  • no unnecessary API calls

2. Background Refetching

Even if data is shown from cache:

  • it silently updates in background
  • UI stays fresh without flickering

3. Auto Loading & Error States

You don’t manually write:

  • loading
  • setLoading
  • try/catch

It gives you:

  • isLoading
  • isError
  • error

4. Refetching Smartly

It can refetch when:

  • window refocuses
  • network reconnects
  • time interval passes

5. Prefetching

You can load data before user even clicks:

Example:

  • user hovers button → data already loaded

That feels like “instant app speed”.

6. Offline Support

Even when internet is weak:

  • cached data still shows
  • UI doesn’t break instantly

A Small Mental Shift I Had

Before:

“I need to manage API data manually”

Now:

“I just describe what data I need”

That shift is huge.

Simple Example (How It Feels in Code)

Instead of writing complex useEffect, now it looks like:

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
});
Enter fullscreen mode Exit fullscreen mode

That’s it.

No loading state. No manual caching. No extra logic.

Alternatives You Should Know

React Query is not the only solution. Here are other tools in the ecosystem:

1. Redux Toolkit

Redux Toolkit
Good for:

  • global UI state
  • complex app logic

But not great for server-state by default.

2. RTK Query

Part of Redux Toolkit
It actually competes directly with React Query.

Good for:

  • API data handling inside Redux ecosystem

3. SWR

SWR
Simple alternative to React Query:

  • lightweight
  • easy caching
  • less features than TanStack Query

4. Apollo Client (GraphQL)

Apollo Client
Best for:

  • GraphQL APIs
  • complex data graphs

5. AWS Amplify (Backend approach)

Amazon Web Services
Not just state management, but full backend solution:

  • auth
  • APIs
  • storage

But it’s heavier and not just frontend state handling.

When You Should Use React Query

Use it when:

  • you work with REST APIs
  • you want fast UI experience
  • you want less boilerplate
  • you care about caching & performance

Don’t use it for:

  • simple static apps
  • only UI state (useState is enough)

Why I Think This Is Important for Developers

Modern frontend is not just UI anymore.

It’s about:

  • performance
  • caching strategy
  • data synchronization
  • user experience speed

React Query handles all of this behind the scenes.

And that’s why it feels like a “missing layer” in React.

Final Thought (From My Learning Today)

I’m currently learning React seriously, especially through courses by Jonas Schmedtmann.

And one thing I’m realizing is:

Writing less code is not the goal.
Writing smarter systems is.

React Query is exactly that kind of tool.

It removes repetitive work so you can focus on building real features.

If I had to summarize it:

React Query is not just a library.
It’s a mindset shift in how you handle data in React.

Top comments (0)