First Look at React Suspense for Data Fetching

so reactors released an experimental version that has a bunch of new features inside of it now it's not ready for production usage but anyone can go ahead and install it and give it a try and check out these things before they're actually officially released in a production version so we're gonna be taking a look at the suspense or how we can start using suspense for loading States whenever we're gonna make API calls and do really any kind of async tasks so let's go ahead and just dive into this and check out how we can do this so I have a create react app project open and I just ran this command to get it started or MPX in front if you don't have clear react app already installed and it's just the name my project then after that and install the experimental versions of react so react to add experimental and react Dom add experimental and this will give me access to these new features now the first thing that we're going to need to do when that's up here is our index.js file this is usually how you would star react project react Dom render here's our you know our root react component and then here's the Dom node that we are grabbing now with this we need to activate concurrent mode and to do that we say react Dom create root and that's just on this guy here and at the end we say dot render oops I don't want this guy I want my app and I render my app component here so just a slightly different syntax to enable this new type of mode that we can start doing these things in so now my app over here is just a simple react component which has a single div that says you now have my server running and just come over here you can see my yo over there so we are good to go now the first thing that I want to do is in my application here is I want to start fetching some data from an API and display it in my application so the API that we're going to use is the random user dot me API so you can go to this URL to get a response and we're gonna copy this is a URL we're gonna use and this will just give you a random person and this is free you don't need an API key or anything so it's super sweet so I'm gonna create a new file here called person API jeaious and the first thing I'm gonna do is I'm gonna create a a function called fetch person and purpose of this function is we're gonna fetch a person so I'm gonna say fetch and then this is the URL from a API and we're to say dot then X dot JSON so we're gonna wait the promise or dot then the promise and then after that we're going to read the JSON response that returns another promise so we're in dot than that and then here we're going to get the results which look like this and so this will be giving me an object now what I'd like to pass is just the person itself so what I'm going to do is I'm gonna get the results and get the first item in the array so I'm dot then X dot results and get the first element there so that'll give us the first person now there's one thing that we need to do to get this working with suspense we have to map this promise to work with how the suspense API works so you're going to create a function called wrap promise and it's going to take a promise as a parameter and then it's going to basically make it work with the API that react expects so we're going to say let's status is going to be pending by default so we basically need to keep track of whether our promise is complete whether it's loading or whether there's an error with it and so we're going to store that in this string variable here we also need a variable which I'm going to call result and this is going to store any kind of extra data for example the data we get from the promise or the error we get from the promise and then we're gonna create a variable here called suspender and this is where we're just going to wait for the promise and in this first one here we're going to say dot then if we got a dot then in this first parameter that means it worked so we can say status is equal to success and we can say the result is equal to R otherwise we got an error so we can say status is equal to err and result is equal to e then at the bottom here we're just going to return a function which is basically going to where we can read and check the status of how all this is going so we're going to say if the status is equal to pending suspense expects us or react expects us to throw the promise so it can catch it so we're going to throw the promise otherwise there's an error we are going to throw the result and then else we know if it's not pending it's not an error that it was worked it was successful so here you're going to say return results just return the data so this rap promised we were going to call over our fetch person so here I'm just gonna say export const and this here i'm going to say create resource and we're going to return object and we're gonna have a person resource here which we're just gonna say wrap promise and fetch person so our fetch person is going to return a promise and this promise we are wrapping and making sure it fits the suspense api so now we can once we have this setup this is basically a function that we can now reuse with whatever fetch a pair with our api is we want to fetch from now we can reuse that once we have this setup and now what we can do is here I can say const resource is equal to create resource and note when we do this this is going to actually fire off the API call right so when we call create response it's actually going to fire off an API call so the resource here what I'm going to do is I'm going to when you import this firm react I'm going to create a suspense component and here is where I can set a fallback which is a component that gets rendered if it's loading so here I'm a just display an h1 called loading and then inside of this is where I wanted to display my component when the data is done loading for example so here's my person component which we haven't created yet but we're gonna add and we're just gonna pass the resource in here okay so let's create our person person yes and I'm going to use a little snippet now the cool thing here is our person component is super simple all we say is person is equal to resource resource I mean dot person dot read and so if this thing is still loading it's going to throw the promise which is going to be caught by the suspense component and it's going to display a loading indicator otherwise we get our data and so we can display it here and so you can see it's a much cleaner it almost looks synchronous and we can just say person dot and let's see what we have available to us we need to splurge in derp let's start with the name so let's say name dot first and we can display the name of person all right so let's go check it out and my person is not defined you'd actually import this so I'm going to the front of my person with my cursor I'm gonna hit control space and I'm going to go ahead and auto import this all right so I can see a name here and you can see very quickly that flash loading and then it flashed this pro tip if you hit inspect go to the network tab in chrome what we can do here is we can actually click on online and make things slower like a slow 3G connection and this will just slow down the API so we can see the states so here you can see the loading and then it's going to switch to the name of the person now this is just a cool tip that you can use with any API to arbitrary they slow it down and see your UI alright we're gonna go back to online now I mean there you go so that is the basics of suspense and how we can use it so pretty sweet it cleans up the UI quite a bit now the cool thing about this is you don't have to have the suspense directly you know wrapping your component the suspense can be high up in your tree so for example it still works if we say put suspense at the very top right so we can refresh and we can see it how it works there but note suspense your I usually want to wrap it close but because notice how this is gonna work so here I just say another random string alright so if I go to my let's actually just keep this on slow so we can see it best so you can see that what's gonna happen is my random string here is showing up while it's showing the loading component and then this shows up and that's because my div is outside of the suspense component now if I want to only show my random string here whenever it's done loading I can stick it in there with my person all right and we can wait for this to reload and the slow 3G connection and we can watch as it's blank goes to loading and then it displays both of them at once so that's pretty cool so it's very easy now to kind of move things around and get things to load and the sequence that you want so let's look at one more example with two suspense or two things that we're loading let's go back to our resource over here and by the way I just did command click or control click on this to jump to the function call and I'm just gonna create another random one here so this is gonna be a a sinc function that we're just gonna do set timeout to show you that this works with any kind of async thing that you want to do so here I'm going to say random number and we're just gonna slow it down for the sake of example so here we're gonna return a new promise and we're gonna say set timeout and here we're gonna resolve math dot random and then we just need to set up here how long we want so let's go to three seconds so we were basically gonna wait three seconds and then give them a random number that's what this code does here so now in my create resource I'm gonna say num is equal to random number and again this is returning a promise I don't need to make this a sink here so we need to wrap this with our wrap promise and now I'm going to create a new component which I'm gonna call num and we're just going to display our random number in here so I can say n is equal to resource dot what I call it I call it num ya num n now it's call it num let's make it a little bit more descriptive and we'll call I'll read so here's our random number your random number is and we'll display here alright so now let's display our num component and pass in our resource so now we're working with two separate async guys right we have our number and our person and they can take different amount of times to load and what's gonna happen now is it's actually going to wait for both of them to finish loading before it displays anything so right we're gonna go like our API make it very fast now right because we're on line now when i refresh the page you know it's gonna show loading for three seconds and it's gonna show both of them now you may want to split these things up like maybe you don't want them to load in at the same time maybe you do it just depends on how you want to work so if we want to say load them in on different times we can do something like this so we can wrap our numb and a suspense and our person in a suspense so here I can say loading numb and here I can say a loading person and now I have them on two different timers so we can see that our person loaded really fast whereas this one was a little bit slower all right so we can see it's loading the number and we can see our persons there so now you can kind of decide do you want both of them to load in at the same time or do you want to split them up right and again we can do whatever you want this random div here and so there you go so that is what I wanted to start with with suspense there is a ton more to this and we can add on more complexity and more things with this but really a ton of people are still trying to figure out the best way to use suspense and I'm still trying to figure out the best way to use suspense too so we'll see where this goes and I'll be probably making some more videos on how we can take this a step further and some of the other things that we can start doing know that there is concurrent mode and suspense so this is a small taste of what you can do with suspense

Channel: Ben Awad

Views: 76,893

Keywords: React, React Suspense, Suspense for Data Fetching, React Suspense for Data Fetching

Id: fTFoBr5LJGE

Length: 15min 17sec (917 seconds)

Published: Mon Oct 28 2019