Why I Stopped Using useEffect (And You Should Too) 🚫⚛️

Let me guess. Your React component looks like this:

useEffect(() => {
  fetchData().then(setData);
}, []);

It works. But in 2025, it’s a code smell.

With React 19 and the rise of React Compiler & RSC, blindly using useEffect is making your app slower, buggier, and harder to maintain. Here’s what to do instead.

The 3 Silent Killers of useEffect ☠️

1. Race Conditions – Component unmounts? Old data wins.
2. Waterfall Requests – Fetch → wait → fetch again.
3. Double Rendering – StrictMode mounts twice = double API calls.

The Fix: React 19's use Hook + Suspense

Instead of useEffect, do this:

import { use } from 'react';

function UserProfile({ userPromise }) {
  const user = use(userPromise);
  return <div>{user.name}</div>;
}

✅ No useEffect
✅ No loading boilerplate
✅ Built-in cancellation

Real-World Before/After 🔥

❌ Old way (useEffect + useState)

const [data, setData] = useState(null);
useEffect(() => {
  let ignore = false;
  fetch('/api')
    .then(res => res.json())
    .then(json => !ignore && setData(json));
  return () => ignore = true;
}, []);

✅ New way (React 19)

import { use } from 'react';

function Dashboard() {
  const data = use(fetchData()); // just works
  return <Chart data={data} />;
}

43% less code. Zero race conditions.

But Wait – When Should You Keep useEffect? 🤔

Only for synchronizing with non-React worlds:

• Third-party widgets (maps, video players)
• Manual DOM measurements
• Global event listeners

For data fetching, derived state, or user interactions – avoid it.

Your Turn 👇

Do you still use useEffect for API calls? Have you tried use or TanStack Query?
Drop a comment with your worst race-condition horror story – best one gets a shoutout in my next post!

---

*Liked this? ♥️ Follow me for more React 19 deep dives. *