Avoid using `isLoading` for Data Fetching in React

React Data Fetching is unopinionated and once you start working with React, you'll find many ways to do different stuff. From data fetching to conditional rendering and hooks but since data fetching is a crucial part of any application, in this video we will cover why using isLoading to keep the state of the data fetching method inside your React components is wrong and how you should approach it instead!

🎉Our Newsletter is live! Join thousands of other developers

⭐ Timestamps ⭐
00:00 Intro
02:10 Data fetching inside Components
02:46 Fetching Data the Wrong Way ❌
06:38 Fetching Data the Right Way ✅
10:43 Using a Data Fetching library

-- Special Links

✨ Join Figma for Free and start designing now!

👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨

💻 Nue Simple App Project

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

👉 Personal Links:

Made with ❤️ by Coderone

[thecyberhobbit]

"is Evil" and "is very bad" seems a bit of a stretch. I'm not sure this is so much better. You don't need the "isSuccess"... if your data is set, that's your indication for the success. if you need to refresh, clear the data before you load. Setting a status that is ERROR as well as the specific error seems redundant. Recalculating the different "isState"s making the entire exercise also seem moot.

[ivankraev]

What do you mean by "avoid isLoading" ? At the end of the day you are still using isLoading that you derive from the status variable, right ? I get that your point is to explain why keeping track of tree states is bad, but "avoid isLoading" is deceptive title in my opinion.

[memoryleakerz]

I think an underdog solution for this kind of issue is the Suspense component, devs should know about it more

[tomb]

The thing that's wrong in the first example is the way you handle the logic... You don't need isSuccess. If there is an error, return the error component, if it's loading return the loading component. In the end you can have additional check if the data is empty.

if (loading) return <LoadingComponent />;
if (error) return <ErrorComponent error={error} />;
if (!products.length) return <EmptyState />;

return (
<div>
{products.map(product => (
<Product key={product.id} {...product} />
))}
</div>
);

[byrbxmx]

Suspense or useReducer would be possible solution. But in your "bad" solution isSuccess is completaly redundant and isLoading might be fine in some situations.

[phantazzor]

it always bugs me when isLoading is set to false by default then set to true at the begining of the fetch function, if you just set the initial state to true you can remove that very first line after the try{

[zbynekriha]

For the first examle, did you know, you can have more returns at end of component? like separet if(error && !isSuccess) return <></>, and a few lines under you can have another if and return

[asadmalik]

Yes we would like to have a real life demo of Tanstack query, also would like to see how this actually replaces redux or any other state management

[itspawanpoudel]

Why does data fetching library like swr & others doesn't provide a way to fetch data om interactivity like on button click

[Vetal-dcir]

Yes, this is more logic than simple set Boolean status, good practice !

[mateusztwardy]

Very nice video. But few questions:
1. What do you think about use useReducer fo states (idle, loading....)
2. Why you didnt show x-state? Very good approach, but not popular.
3. What is the best for next 13? Some recommended library?

[alext]

Do you actually believe this stuff or do you just need content

[pdcx]

without watching, i would just use 1 state variable and at any time it can be any of the overall state (possibly compound state) of a state machine.

[Senninseyi]

I hate to say this but this is the first time I’d disagree with a YouTuber