If I had a dollar for every useEffect I wrote just to fetch data, I could retire.
To a beach. A nice beach. With a cabana and a drink with a small umbrella in it. đď¸
React 19 just shipped and it feels like a completely different framework. Let me explain why I'm emotional about it.
đ¤ The Old Way (Pain)
// React 18: The Classics
const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch('/api/data')
.then((res) => res.json())
.then((data) => {
setData(data);
setIsLoading(false);
})
.catch((err) => {
setError(err);
setIsLoading(false);
});
}, []);
if (isLoading) return <Spinner />;
if (error) return <Error />;
This is boilerplate HELL.
Every. Single. Component. Three state variables. Effect dependency arrays that lie to you. Race conditions if you're not careful.
Did you know? The React team once said that useEffect is the most misused hook in the entire library. Turns out giving people a "run code on mount" escape hatch leads to... chaos.
đ The New Way (Bliss)
With React Server Components:
// React 19 Server Component
export default async function Page() {
const data = await db.query('SELECT * FROM users');
return <UsersList data={data} />;
}
That's it. That's the whole thing.
No useState. No useEffect. No loading state management. No Spinner flickering (if you use Suspense correctly).
Just... code that does what it says.
đŻ Server Actions: RIP api/routes
Forms used to require:
- Create
/api/route - Set up handler
- Call
fetchfrom client - Handle loading states
- Handle errors
- Cry
Now:
async function updateProfile(formData) {
'use server';
await db.user.update({ name: formData.get('name') });
}
<form action={updateProfile}>
<input name="name" />
<button>Save</button>
</form>;
The function runs on the server. Directly from the form. No API endpoint. No axios. No fetching.
Did you know? This is how PHP worked 20 years ago. We went full circle. The prophecy was true. đŽ
đ The Learning Curve
Is it confusing? Yes.
"Client Component" vs "Server Component" boundaries took me a week to internalize.
When do you add 'use client'? When you need:
- React hooks like
useState - Browser APIs
- Event handlers
- Anything interactive
When do you NOT add it? Most of the time, honestly.
đŻ The Verdict
React 19 isn't just an update. It's a correction.
We spent 5 years writing unnecessary boilerplate because the framework didn't have the right primitives. Now it does.
Is migration painful? Sometimes. Is it worth it? Absolutely. Will junior devs ever know the pain of useEffect waterfalls? No, and they're blessed for it.
Welcome to the future. It's async and kind of weird but definitely better. đ