First Look at React useTransition Hook

we're gonna be taking a look at the used transition hook which is new and the experimental react release now start off I want to take a look at how we currently load new data in so this is what our application looks like and I have this button here called refresh data and when I click it what happens is we can see the data loads in here and then the data actually comes in now my API here requests goes super fast so I can slow it down by opening up the network tab and going to slow 3G and we can see both of these load in and then we get the information now what the use transition huh caused us to do is delay that transition so we can actually show some stale data for a little bit before we transition to the next state so let's see this in action how do we actually do that well we're going to import the EU's transition hook from react and we're gonna say use transition and this takes an object as a parameter here inside of it we can set a timeout in milliseconds so we can set when we want the transition to happen at a max length so for example we can set 5 seconds or 2 seconds or even one second it depends on your application what you're going to want to do but basically if it takes longer than one second to load it's just going to go to the next state and you'll see what I mean by this in a second but for for us to start off here I'm gonna put it at 5 seconds and in here I'm going to say start transition and this is going to be a function so now I have the on click of my button here which is updating the resource and that's how we're loading the new data in so this state update is the one that I want to transition and wait on so here I'm going to say start transition and it takes a function as its parameter here and we just in our function body put the state update and so now it's going to happen and we can see this over here in action so I'm gonna slow this down is I push refresh data and now you'll notice nothing changed and then all of a sudden we can see the new data arrived here so what we've just accomplished is we're now not showing any loading state in between right and we go back to just online and we can click this again we can watch this right and it just goes to the next thing now this timeout is the thing that we can play with so for example these are load these are two async calls that load in at different times so for example I can set a low threshold for example one second so what's gonna happen is we can see this in action here is when I push this refresh data button after a second if they both have not loaded in it's just going to display the loading indicator so I press refresh data and we can see it takes a second you see we see no loading indicator for this guy and this guy loads for a second longer now with this tactic you'll notice that we're basically showing stale data for a little bit and we want to be able to also show like a loading indicator to tell them that hey you click this button we actually are loading data so we can actually do that the second parameter of this use transition in this array that we have here is is pending and so this will tell us if we are pending a transition or a state update and so we can do something like this this is just the body of the button here all right we can put it in here if you want to so we can say if we were pending we can say loading otherwise we can display an empty string so now the result of that is when I press this button we can see we are loading and then it actually goes to the next state transition and again with this maybe we want a longer timeout for example like three seconds and say this and this maybe a smoother transition so refresh data it's loading in and then we get that new data and it displays here with these suspense and use transitions and these new things that they're introducing I feel like they're really pushing us to build what they consider better UIs and better or more I guess is a more complex UI to build something like this and so they're giving us tools to be able to build stuff like this which is pretty fun so let's talk about one more thing about this and that is how we can actually you know bake this into our button and so we can reuse this all over the place and it's very easy and we don't have to think about it so what we can do is we can actually create our own button here which I'm gonna call my button so here I'm going to say my button and we can have a button here which we can have children and then whatever props we want to pass on to our button here and we can actually stick a use transition inside of here so let's say we want four seconds to be our default here and then we can have our start transition and is pending and then what we can do is let's pluck out on and click is on this buttons on click method we can just wrap whatever the user decides to have for the on click with a start transition and then we're going to put whatever the user wanted to actually do in the onclick handler inside of here and then we can handle the is pending state so we can disable the button whenever we're loading and we can either put it inside the button or we could put it next to it and again this could be any UI that we wanted to actually build to show a loading indicator so here I can say is pending display this div otherwise display null so now I have this my button component which is going to automatically transition and show a loading indicator and we can reuse this component all over the place it's gonna be really handy so now we can very cleanly do this we can get rid of our use transition here and this and this so now we just have to say my button and we don't have to worry about you know handling transition stuff it's gonna automatically wrap all the on click calls that we do in the transition and so we can get you know really nice reusability here so let's see this in action now so here I come over compress this we can see we're loading and then we go to the next state whenever the data is actually loaded in and again we could play with the timeout if we want to get it to a place that we like it so maybe 2 seconds here and fresh refresh data loading and then comes in now we could probably also if you want to take this time out as a parameter to our button as well if we want you can you know change that in a conditional way so that's I think is a pretty cool way to make use transition really usable all over your application is making a component like this so that was a cool tip that I learned from the react Doc's and I think it's pretty handy now the last thing that I want to talk about is one thing that I actually don't know how to do with use transition so for example take a look at this number this this guy here takes well actually let's click on I don't know how long it takes I have it set to take three seconds to actually load and then the person loads really fast it loads in probably under one second now you'll notice when I click refresh data it loads here and then it shows here what I'd really like to be able to accomplish is if my person finishes loading first like to start displaying the person data if my number finishes loading first I'd like to load you know show the number right away so instead of having to wait a max of 3 seconds right so if I match this timeout and I click this I don't see any information until they're both loaded instead what I'd like to accomplish I don't know how to do this yet with these transition it probably is possible is when I click refresh data I want it whenever one of these is done loading it displays it basically I don't wanna wait for both of them I just want to have the first one that's done I go ahead and display information for that and so I don't know the best way to split these up I was thinking you know I was experimenting with like sticking the suspense up here like this and we press this but all the variations that I tried it always waits for all of these suspense updates to actually be done and so I only want to wait on a single suspense to be done and maybe there's this component called suspense list and maybe I'm going to need to use that to actually accomplish this but we're gonna get into suspense list in a future video that is your introduction to using the use transition hook

Channel: Ben Awad

Views: 35,457

Keywords: React, useTransition, React useTransition, React useTransition Hook

Id: 8WnGNId62h8

Length: 10min 17sec (617 seconds)

Published: Wed Oct 30 2019