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
islemmaboud.com/join-newsletter
⭐ 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!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-...
💻 Nue Simple App Project
github.com/ipenywis/nue-app
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
• Build Login/Register A...
🧭 Turn Design into React Code | From prototype to Full website in no time
• Turn Design into React...
🧭 Watch Tutorial on Designing the website on Figma
• I Design a onecolor We...
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
• Create a Modern React ...
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
• Debug React Apps Like ...
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
• Master React Like Pro ...
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
• Debug React Apps Like ...
🧭 Introduction to GraphQL with Apollo and React
• Introduction to GraphQ...
👉 Personal Links:
✨ My Portfolio islemmaboud.com
🐦 Follow me on Twitter: / ipenywis
💻 GitHub Profile github.com/ipenywis
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.

[@ajaymaddy7707]

That's what I thought of.

[@timchen8512]

😂

[@memoryleakerz]

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

[@ivankraev4264]

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.

[@tomb5415]

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 ;
if (error) return ;
if (!products.length) return ;
return (
{products.map(product => (
))}
);

[@CottidaeSEA]

Or you could just use a switch.

[@neociber24]

That could get messy when you have a lot of code there

[@user-by3rb1xm5x]

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

[@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

[@asadmalik5075]

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

[@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{

[@mateusztwardy64]

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?

[@CottidaeSEA]

1. Same issue, bundle it into the same variable because they both refer to the status. What you want to do is check the status. If you desperately need to have a boolean, do "const isLoading = status === Status.LOADING" or similar.
The problem is that you often need to check multiple values to get the true state, which is just code smell and complicates logic.

[@itspawanpoudel]

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

[@Vetal-dc8ir]

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

[@IwanHadiSetiawan]

What theme is that?

[@sambeg2]

Looks like ayu dark

[@gmkhussain]

One of the best to ever do it.

[@alext5497]

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

[@Senninseyi]

I hate to say this but this is the first time I’d disagree with a UA-camr

[@dermachedjamel8970]

That was very informative.

[@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.

[@herecode]

two options are terrible