Avoid using `isLoading` for Data Fetching in React

so if you're still using Boolean variables to keep data fetching state for like is loading or error or is success for your react components then you're probably doing it wrong so in this video I'm going to explore why using like set loading and EAS loading like separate variables for different states of your data fetch in when you try to fetch data inside of your react components is pretty bad and how you should completely avoid that by unifying it into string variables so because we have data fing in reacts is completely unopinionated everybody does it on its own way somebody uses e loading somebody uses different Boolean variables somebody uses tries to keep stating in variables instead of like booing variables and so on and so forth and of course there are so many ways and because there are so many ways create inconsistencies that means it creates more and more bugs harder to read code and makes our component life cycle State very hard to manage so for instance as we all know that react has a really awesome hook that is called called use effect that basically allows us to basically run our you know fetching or side effects like fetching or doing something like that when the component is mounted and actually ready to fetch data from an API or from a server or do something completely you know outside of the scope of the actual component or if you are the guy who prefers to use other libraries like query libraries like the 10 stack query or the react query as we all know it or the S SWR which are like libraries that actually helps us fetch cash data and actually takes care of everything behind the scenes for you from fetching to caching data to providing you with like a state life cycle and data life cycle and gives you like booleans out of the box all you just do you just call a function inside of your component and you're not going to be worrying about anything else I mean I really recommend using one of these libraries like the react query or the SWR there are many other libraries but I mainly love the react gr because it's simple it's very very popular a lot of people love that one including me so so I intend to use this one any any project you basically go through or if you prefer to use your own data fetching system with use effect and a bunch of stuff well you got to make sure you do it right so let's say we have this simple products page where we just simply all we do we just have a react component that actually fetches product from an API server that has a list of products with a pricing and you know the rating of the product the name of the product in here and the ability to add the product into the cart and just we got a PL of plots in here from Cosmetics to uh you know technology products like laptops and phones and different stuff now let's look behind the scenes of how this one actually works and what is the best way to handle the different life cycles or different states of data fetching from loading to success or error so let's start with the most basic way which is the wrong way which a lot of people actually tend to do is with is loading so for example in here we have a product component this product component just takes a symbol prop with different details of product from like a title description price rating and so much more and it basically just returns a GSX that renders a simple product and next we have this with is loading. GSX which is the components that's actually responsible for fetching the data and rendering the different products so simple in here it has a method that does actually fetch in so it's fetch product it's an asynchronous method and all it does in here it calls axios it goes to the API fetch the response it grabs the product from the response in here and it simply goes through the set products in here here and sets the products inside of that and of course it calls the fetch product inside of use effect in here and it just like goes ahead and render that through like oh products. map and it Maps every single product into all the you know single products or single product components we have already created okay simple enough that's actually pretty simple that's the normal way to do things all cool now let's see how we are handling the different data fetching state of our component so here we have products which is we do use state for storing the different products we we fetch that's cool now we have this EAS loading error and is Success so these three independent variable each one of them actually holds a different state at each time which means like here we have is loading so it tells us oh if the if the data fing is still going on or not so I feel like if we still ongoing or fetching data is actually in in progress so it's not complete yet and if it it's complete and has any error we can just have this error in here with a string or if it's success can actually successfully feture the products we can have this is success to equals to true I mean that looks pretty simple right you're wrong I know a lot of people a lot of beginners actually tend to do that and they get the Intensive to actually go through and actually do the same thing in here and have every single state stored differently but that's actually really bad so let's see why that actually is bad so here on fetching products first go ahead and do set loading which is a different variable like an independent variable this actually going to turn it to True right so it's going to start the fetching cool everything now when it's actually done because here I'm throwing an error so you don't really need to worry about that was just like for testing so if products is equals to true and if we have the products and and all good we can set the product on the state and we can do set success which means we're going to tell a component we have successfully fetched the product you can go through otherwise if we have an error in here we can set the error message and that's going to populate the error now here we have the three different states so if it's success this is going to turn to true but if it's actually success and the loading is still in true so it's really inconsistent because our component right now has two different states for a fraction of a millisecond before this runs because once this rcd runs it's going to make it false and all good but in a in a fraction of a millisecond is loading is going to be true and success is going to be true I mean that doesn't make sense we can't be load in and success at the same time I mean only a single one either success error or loading can be true at a single time if it doesn't do that I mean that actually breaks the rule of how State works and of course down here we can do oh if it's load in we can just be returning that one and the complicated part which I really hate is actually when you try to render stuff so before you do products. map you have to make sure that there's no error so you do not error and you have to do as success then you actually can access which I find pretty pretty annoying because this could get really hard if you have more code and more Independence UI that's actually depending on whether it's success or not or error kns and so on and so forth and the same thing goes for the error in here so like if you have an error or not success I mean that actually really depends on both of these variables now let's see why this actually bad let's go ahead and look into the better version of this and how we can actually approach instead of having three different independent state variables in here for holding a single state into more of a Consolidated way so here we go to the withth status and I'm going to go have the same thing in here products we have width status and this is actually how we do it now now we no longer do is loading or something so we no longer keep that is loading we no longer have is Success we only need the error in here because we want to need like to keep the actual error message so we can display the actual error message but this isn't this isn't basically to check the current state of the component and of course we have products pretty simple now the most important part in here and the correct part is to have a single status state that is called status and this one actually holds a single status that holds a string of the current state of the component or basically the current data fetching state of the component so here we have use State and here I actually decod there's actually many many ways to do that but the best way I think so far and the simplest one that's going to make a lot of sense for a lot of people and developers working on the same code base is to have this on an object so for example I declared fetch status in here I put it inside of like fetch status. JS or this could be like used globally for all components but this actually can be like oh ideal for you know when the component is not doing doing anything just not doing any data fetching at all load in when data fetching is actually in progress success if it's done and error if there is an error and this will make sure there's only a single one that is actually selected at a single time so you can't have success and loading the at the same time because the variable is going to hold a single value at a single time and that's going to fix a lot of issues and they going to make it a lot better and way much more logical of how a component should work now you state in here is going to be ideal first it's going to start with IDE we're going to startop fetching products we're going to do no longer doing set loading here we only change the status that's that's basically all we need to change so we do set status now the status of the component here is loading cool we load the data I'm just doing here wait 5 Seconds just for testing purposes of course and if the products are good we set the product and we change the status of the component into success now it's no longer load in it doesn't happen the same like we don't have the same issue as before where we have it is load in and is true at the same time before this one is literally cold in here for a fraction of a millisecond no this is no longer happening only keeps a single state a single time and that makes a lot of sense and the same thing goes for the error in here we change the status to error and we set the error message in here so we can display to people and that's it the same thing for use effect no you can actually use this helper kind of like variables in here where you can do oh is loading equals status so it is loading is going to be true if the status is loading or success or error in here you can basically completely ignore that one but I find people loving this way so you can just do it like that way in here and you can check oh if it's loading you can do it that way and the most important part that I really like now it makes the code looks a lot easier now because only one state is going to be happening at a single time that means we've got this is success is going to only happen a single time so we can't we don't need to check if it's an error or a loading or not because it's only going to be in success and if it's actually in success or if it's in the success state that means it can't be in any other state it only can be in success and it's actually success and that's actually truthful so if it's success we can render the product if it's an error we can just render the error in here as simple as that that makes it a lot simpler now our components is way much more logical it doesn't have any issues doesn't have any logical fetching and state issues the components is that supposed to be written and of course if you try that one like with status or with his load in they all going to be looking the same thing so you're going to have some load in here wait a couple seconds maybe you're going to see an error just a single state at a time or if you remove like the throw in here and go back try the loading again in here it's going to load for a couple of seconds and it's going to show us all the products now when I before said that you should go with something like react query or SWR Library where you know this kind of fetching sort of like asynchronous State Management libraries that's going to actually take a lot of Burden for you they do a lot of stuff behind the scenes they give you a simple really nice awesome and easy to use API so technically here if you try to use react query I have an example in here with react query so simply we do like use Query we provide it with like you know keys in here just the unique key so he knows exactly what query we provide it with the fetch products which is simply just fetching using axio through something like through a specific API URL Returns the data in here as products symol that and you give it this taale timing here like when he needs to refresh the cach and when he needs to like behind the scenes doesn't another fenin or basically another API request now here if we notice the most important part the status so the status in here could be either error success or loading like only a single one either loading or success or an error can be happening at a single time and here it provides you like with helpers or helper variables like is loading and is success or iser the same way we're doing it where we keep a single source of Truth a single like status state which is the source of Truth and basically in here we give it oh we can go ahead and like say destructuring or just make it a little easier but just bind those into specific variables like is loading is success or is error that's why I said react query could be a lot easier in here than just going ahead like inventing the Wheel by yourself and getting into this troubles and issues with is loading or how to fetch properly and use effects I mean I've already did a video before about use effects and why it's bad for doing this and why you should use react query cuz it's a lot better it's going to fix a lot of issues for you and look how simple the component using react query in here versus the one component we have in here so anyway guys thanks you for watching see you guys hopefully in the next one

Channel: CoderOne

Views: 14,867

Keywords: react, isLoading, react loading, react data fetching, fetch data react, useEffect, react useEffect fetch, axios react, react fetch axios, react is success, react is loading, react is error, isLoading is bad, isLoading is wrong

Id: o4bcGpAtbgE

Length: 12min 35sec (755 seconds)

Published: Mon Oct 02 2023