Stop Using useEffect for Data Fetching — Try TanStack Query Instead

Akhildas — Sun, 06 Jul 2025 09:29:58 +0000

If your React components are littered with useEffect hooks just to fetch data, it’s time to level up your approach.

React has given us a lot of power with useEffect, but with great power comes great... boilerplate.

Let’s face it — using useEffect for data fetching often ends up messy. We handle loading states, errors, cancellations, caching, refetching, and sometimes race conditions... manually. It’s a lot.

Enter TanStack Query (formerly React Query) — a game-changer for handling async data in React apps.

The Problem with useEffect for Fetching Data:

//Here’s what a typical useEffect data fetch looks like

import { useState, useEffect } from 'react';

const Users = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    const fetchUsers = async () => {
      try {
        const res = await fetch('/api/users', { signal: controller.signal });
        const data = await res.json();
        setUsers(data);
      } catch (err) {
        if (err.name !== 'AbortError') setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchUsers();

    return () => controller.abort(); // cleanup
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
};

This looks okay — until you scale. Then you deal with:

Multiple API calls
Caching concerns
Race conditions
Data syncing
Window refocus or re-fetching logic
Manual error boundaries
You get the idea.

The TanStack Query Way 🚀
Now, here’s the same thing using TanStack Query:

npm install @tanstack/react-query

import { useQuery } from '@tanstack/react-query';

const fetchUsers = async () => {
  const res = await fetch('/api/users');
  if (!res.ok) throw new Error('Network response was not ok');
  return res.json();
};

const Users = () => {
  const { data, isLoading, error } = useQuery({
    queryKey: ['users'],
    queryFn: fetchUsers,
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
};

That’s it.

No state management.
No useEffect.
No AbortController.
No complex cleanup logic.

🚀 Why TanStack Query Rocks
Here’s what you get out of the box:

⭐ Automatic caching
⭐ Background refetching
⭐ Pagination and infinite queries
⭐ Optimistic updates
⭐ Retry logic
⭐ Query invalidation
⭐ Devtools for debugging
⭐ SSR support
⭐ Works with any data-fetching library (Axios, fetch, GraphQL, etc.)

💡 When Should You Use TanStack Query?
Use it when:

You’re building anything beyond a simple static app.
You need multiple API calls or shared data.
You want to avoid manually managing loading/error states.
You want a reactive and declarative approach to fetching.
But keep in mind: if you’re just calling localStorage or don’t want caching, useEffect is still fine.

🧠 Final Thoughts
React gave us the tools. TanStack Query gives us the power.

By replacing manual useEffect data fetching with TanStack Query, you're writing cleaner, faster, and more scalable React apps. It’s a mindset shift — from imperative to declarative data fetching.

Don’t just fetch data. Query it intelligently.

The Mistake of Wrong Planning 😔

Akhildas — Mon, 31 Mar 2025 08:04:17 +0000

After high school, I joined BCom, believing I had my future well planned. At first, I was excited and confident. But as time passed, I started losing interest.

I didn’t realize it immediately, but slowly, I understood that my plan was not right. I had chosen a path without truly knowing if it was the right fit for me. I followed the usual path without questioning if it suited me.

Through different situations and experiences, I faced the reality that a plan can be wrong. I had to accept that my decision wasn’t working out the way I expected.

💡 Lesson learned: A plan made without real understanding can lead to confusion and regret. Planning is not just about making decisions—it’s about making the right ones.

❓ Have you ever made a wrong plan in life? What did you learn from it? Drop your thoughts below! 👇

DEV Community: Akhildas

Stop Using useEffect for Data Fetching — Try TanStack Query Instead

The Mistake of Wrong Planning 😔