Stop Using `useEffect` for Data Fetching—Please, I Beg You

The Scene

It's 2 AM. You're staring at your screen, debugging why your dashboard keeps showing yesterday's data even after you've changed the filter. Your useEffect dependency array looks like a crime scene. You've got three useState hooks just to manage loading, error, and data. You added a cleanup function, but somehow the component still throws that dreaded warning: "Can't perform a React state update on an unmounted component."

You take a sip of cold coffee. You wonder where it all went wrong.

The Problem with useEffect for Data Fetching

Let's be honest with ourselves. useEffect was never designed for data fetching. The React team gave us this hook to synchronize with external systems, DOM events, subscriptions, and timers. But somewhere along the line, we collectively decided to use it as our go-to tool for API calls.

Stop Using `useEffect` for Data Fetching—Please, I Beg You

Related reading

Part 3: Stop Syncing Props Into State (you probably don't need that useEffect)

Stop Using useEffect for Data Fetching: Understanding TanStack Query

React useDeepCompareEffect: Fix useEffect Object Dependencies (2026)

Part 1: Why I Rarely Use useEffect Anymore (and what I use instead)

Cleanup Functions in useEffect: Stop Leaks Before They Start

The React Hooks Adventure: How I Turned `useState` and `useEffect` Into My Jedi…