Here's what changed everything.
For a long time, my code looked like this:
useEffect(() => {
setLoading(true);
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data))
.catch(err => setError(err))
.finally(() => setLoading(false));
}, []);
Repeat this in every component.
Manage loading. Manage error. Manage cache.
Over and over again.
Then I discovered TanStack Query.
Now my code looks like this:
const { data, isLoading, isError } = useQuery({
queryKey: ['users'],
queryFn: fetchUsers
});
Done.
Here's what TanStack Query does for you
• Automatic caching
Same data? No extra API call. Served from cache.
• Background refetching
Data stays fresh without you doing anything.
• Loading & error states built-in
No more useState for every single fetch.
• Pagination & infinite scroll
Built-in. Clean. Easy.
• Optimistic updates
UI updates instantly. Rolls back if API fails.
• DevTools included
See exactly what's cached. Debug in seconds.
TanStack Query didn't just clean up my code.
It changed how I think about server state.
If you're still using useEffect for every API call —
you're making your life harder than it needs to be.
Try TanStack Query. Thank me later.
💬 Are you already using TanStack Query? Or still on useEffect?
