Let's learn about React 18's startTransition and useTransition

all righty all righty it's ten o'clock it's ten o'clock usually i like to start with a little bit more uh notice but um you know it is what it is today it is what it is today uh i want to try something real quick uh make sure this chat work does chat work yes okay cool we got some where is it oh yeah i can only point so far my green screen only goes up to here alrighty hey so oh shoot i think some friends in discord think that i'm streaming in discord and not um on uh on stream uh hold on just a just a second just a second hey friends um sorry if you're in here in discord i'm actually streaming um on twitch so uh i'm gonna have to turn this off in just a second but it's uh twitch.tv slash um lunch dev so uh anyway sorry if that uh got confused sorry i can't hear you so yeah so that's what that's where i am right now uh i'll see you over there bye all right cool cool uh oh maybe they're maybe they're hanging out just hanging out in there um yeah so anyway um what's up good to see you so welcome to the first uh day of december um i like freaking love this time of year um i don't know i'm not particularly like holiday or like festively minded i just i feel like this is when like southern california just gets great like it gets freaking awesome and uh like the weather's amazing it's uh you know i i feel like you live in southern california because of the winter like it's just gorgeous here all winter long anyway today what we're doing um we're having some fun with react um suspense and so something that i uh the impetus for this is that um i'm doing this this holiday project every year i do this it's 25 days of react suspense um react suspense or react lessons and this year it's going to focus on react 18 beta now it's really funny because like uh forever ago um i set up uh was it i had it had started this react holiday thing just to teach people react and so that was the first year year one was react and then year two i actually talked a lot about suspense and that was three years ago um so i'm really really really really really hoping that um this is the last time i cover suspense with it not being um released that's my that's that's my that's the christmas gift that i'm looking for here so um anyway uh that's that's that so if you um want to participate in this thing at react you can go to react.holiday um there's a lot of just really cool um you know folks who are going to be taking part in this and um yeah i totally screwed something up so hopefully this is uh hopefully this is all working i'm doing like a new kind of like streaming setup today and i'm using obs for a little bit more and i'm trying to use my atm mini for a little bit less because i want to at some point um have captions um but yeah that is yeah let me make sure yeah that's that's live everything's looking good okay cool perfect all right one more thing so sorry about this yeah cool google all right so um now one of the things that i promised people that i would talk about is um suspense so um let me just do this um and the uh we're gonna spend a number of these lessons probably about half of the lessons talking about how to migrate an app to um to react 18. however um after that i want to talk about some of the the key suspense features however i realized that i actually don't remember um how to use suspense because it's been so long and it's been discouraged for for for so long to even try so um that's what we're that's what we're going um on today now i was going to try to remind myself of all of the features that are available in suspense and then kind of like pretend like i knew everything and coming to this stream um but um i felt like that really isn't in the spirit of the way that i stream um it's kind of like i end up finding things out along the way we find things out together and um you know that's a little bit more the way that we do things so i figured i would kind of show you how i have um kind of one of the reasons that i create content is to so that i can come back to it later and remember it when i need to and so one of the things that i've made is this course on egghead uh called the build nap in react suspense so my goal today is to kind of re-equate myself with this stuff and along the way pick up a handful of notes of things that have changed in react 18. so i think if i wired everything up correctly you should should be able to uh should be able to hear what i got going on oops so let me let me do that um and we're just gonna kind of you know go through this piece by piece i'll put my headphones on so i can hear it too i want to ease you into suspense to do that we'll take something that you've done a thousand times which is import a component and make it a little bit more suspensy to do that we'll follow a blog post that was written all the way back in october 2018 for the version 16.6 of react and the feature is code splitting simply by changing from a static import to a dynamic import we can get our hands wet with suspense so let's dive in first things first we need to change the import statement we'll call it as a function using the module path as an argument pokemon detail now the results of that import will be assigned to a constant with our desired name for that component pokemon detail there's just one last piece this dynamic import creates a promise in that promise we'll have pending error and success statuses we need to wrap this generic promise in a function that will communicate with suspense boundaries that function is react dot lazy so we can copy and paste that here now react lazy expects a function so we can use a handy dandy arrow function here and close our parents now that we have our dynamic import in place we can comment this one out or delete it completely let's mosey on back to our app and see what happened kaboom the app blew up but react gives us a great error telling us exactly what we need to do when using lazily loaded components so let's read it error a react component suspended while rendering but no fallback ui was specified add a suspense component higher in the tree to provide a loading indicator or placeholder to display so we just need to follow the steps add a suspense component higher in the tree all right top and bottom check provide a fallback prop to display a placeholder for now we can just use the text loading pokemon save and fixed now let's check our work first uh alex.miniz welcome welcome welcome welcome glad you're here you try to lip sync to the recording yeah totally um that would be even harder than just trying to figure out uh react suspense again uh by myself for the first time um okay so uh so what have we learned okay so i remember i went through i remember i went through this particular path for a specific reason in the browser well for a specific reason i wanted to import a component because there's this really weird thing that happens with suspense where you can't just put a suspense boundary around something that doesn't have a component boundary so that's the reason that i start with the um the the lazy import also um it uh i don't know it kind of goes i think i was it build an app okay so that's just the intro so like part of the other kind of like subtle part of this is that it goes into like react suspense and like you know using the part of react suspense that you already know how to use um hey lindsay welcome glad you're here so sorry about that that whole thing with the the discord event i don't know if i properly linked it to outside um so yeah that was my that was my fault um yeah i think that there is a way to to point the event to an outside stream i think i just did it wrong unfortunately so that is totally my bad a live and learn moment um for me and i'm very very sorry for that and like i always feel bad in like these kind of moments because like i can't like do both and now i just feel shitty a little bit um well this is this is this is how life goes um can't change all too many things at once okay so what we're going to do is we're going to make we're going to follow along with this so i'm going to make a what did i call this pokemon detail component on detail dot i guess these are all js files so i'll just put a js file there and then make this export default i think so one thing to keep in mind is that i think still when we use react lazy um and the lazy import here that has to be like a single component that's exported from this file so it can only get the export default you can't use named components thanks yeah learning learning in public is healthy i think it is yeah i wish that there was an easier way to do it i always feel bad when i let people down but such is life so uh okay export default function pokemon detail okay cool so we got that we're gonna return um just something that says pokemon d uh let's name it after the component like that pokemon detail um i don't think we need to import jsx so that's good let's go back to our app um and then we can import this statically import detail from did i name it capitalized like that that's so no i did not i was gonna say that is so very not me um pokemon detail okay and then we can put that oh man i keep forgetting that i don't have vim in uh in this uh was it stack blitz environment uh which is hurting me uh react is not defined i guess we do need to import react right from react oh here for the hat yes you're going to see a lot of this all month all month i'm wearing this hat if i'm if i'm on screen this month i'm wearing this hat is what's happening um okay cool so we got that react okay so pokemon detail we've got this wired up the way that we you know normally import things in in react however we want to do it this other way um so we're going to do change this to a dynamic import so we'll say const and then equals instead of from and then we'll do react dot lazy we gotta wrap that in react lazy we give it a function and then the path that we wanna import wrap that and i think we need another one of those uh react component suspended okay cool yeah so this is where we got in the video where we have this um because it's a lazy loaded component we suspend and so we need to create a suspense boundary to catch that so react dot suspense um fallback equals loading pokemon and then this time i'm going to use a proper ellipsis instead of whatever nonsense i was doing over here oh my gosh i saw the greatest video on it was what was it it was a i retweeted it it's recent on my uh my twitter timeline or whatever it's you know tw uh what twitter.com chantastic one of the most recent ones is a uh about the m dash and it's it's pretty great okay cool so let's say that okay so now our component is loading lazily and um we sh it's gonna happen really fast but i think we should be able to see no way too fast okay i think i might go into a way to speed this down in the next or slow this down in the next video um so yeah so anyway it's it's doing what it needs to do okay so that's that's that's video one we got this basic setup going um we need to catch errors as well so let's um we're using a dynamic import and suspense to lazily load this pokemon detail component sounds like pretty dang cool unfortunately not all promises resolve some get rejected it could be the fault of a network error or a server error but things are bound to go sideways eventually how can we catch any errors and gracefully tell the user that something went wrong well let's start by making an error and see what happens let's duplicate this line real quick and instead of importing here let's just return a rejected promise save and this is what our customers see nothing no if one thing is true about react is that the errors are fantastic so let's open up a console let's let's let's build this part of it uh first hey ben good to see you welcome welcome welcome uh okay so the first part of this is um basically we are returning an error to manipulate this state i think is what we're doing now i know that we're definitely going to jump ahead here because i we end up building up like a suspense thing that i think we can just install or i know we can just install a library for so um but i do want to follow along this part so uh in here we're just going to return promise.reject.reject which will give us an opportunity to create an error boundary um okay so what does that error boundary look like let's skip ahead i don't want to hear too much more of myself so i think we oh yeah that's right i get an error and then i go to this page and then i copy and paste this okay i'm doing doing good so far i'm gonna paste that below okay so what does it do so logged my service um i don't want to do that my service is gonna be console.log right now or let's do a console warn oh you know what though i don't think stack blitz at least up until recently didn't support all of the console apis so okay that should be fine now and then we can use it so we'll do error boundary now i think if i'm not mistaken this is going to okay so we'll see what it does um here oh my gosh this okay let me know if that's too small um the chrome is i wonder if there's a zen mode in no i should have just stuck with the uh thing i know um so what this does is it's gonna give us a generic error ben thanks so much for another month of sub i appreciate it merry christmas to me thank you thank you thank you um awesome awesome awesome two months two months look at this and even though you could subscribe for two months that's amazing um okay so what were we doing okay um so we have this it's gonna spit out this generic error we could customize that we could also something that i like to do is um take a fallback prop if we want to like do it like that but i'm not going to spend the time doing that because that's not what we're about today we want to just learn um what the changes are for react 18 but so far everything else is kind of like working the same way so that's good what's up tros i finally learned how to pronounce your name after you said it the other day so thanks for um thanks for helping me out i i had been saying and had heard trust but it's trost right did i get that right this time thank you thank you yeah so this is this hat i bought this last year it's actually i don't know how close i can get it's like a knit kind of like you know beanie type of thing i said i i tweeted into the void i said i want a santa hat but i want a beanie i want it to be comfortable not that just like cheap like faux velvety nonsense and so someone sent this link to me i was like etsy or something like that and i love it i love it um like ghost not lost oh okay ghost ghostbusters anyone excited about ghostbusters i like i'm wicked excited about the new ghostbusters is it out chance always a man of taste and attention to detail i swear every time we hang out chants i see your boots and i like i i just i have like lustful feelings about your boots like they're just so good they look so good on you like you just you picked the right boots and they're just they're just great i just i have to say when you get to meet chance in person just just he's got impeccable style impeccable style out i need to see it i wish we could all hang out at the movie theater and watch it together that'd be the best ben come down to southern california we'll have we'll have the best burgers you've ever had and uh you know just just enjoy the coast i know you're not a coffee drinker which is a shame because you know our coffee is pretty damn good too i think chance wears the boots all the time all the time um which is classy classy in southern california it's it's a lot of sandals and vans i'm i'm of the vans contingent okay cool so let's um y'all can keep talking about how uh hot chances and uh and i'll uh do the suspensey things getting uh for clumped um okay so that's not the right word okay catch our boundaries um understand how react lazy communicates to suspense okay so we're gonna i'm gonna jump to the fetch wrapper because this is every promise can be wrapped to communicate its status to suspense and error boundary components and this is something you'll need to know to wrap data fetching requests so let's walk through wrapping the promises returned by fetch let's start by navigating to the pokemon detail component implementation we have this static text here let's start by making that dynamic reading a pokemon's name from a variable then let's fetch that name by making a request to poke api for bulbasaur let pokemon equal fetch our url and let's not forget to call json on the response okay cool so let's let's do this part so far um uh let's see so what we're gonna do is we're gonna go into our pokemon component also i'm trying to like this is something that comes up for me um quite a bit this feeling of like like i'm pretty sure i don't know i feel in my heart like i was one of the originals teaching uh fetch by pokemon now that could not be true that could just be in my mind but i don't remember seeing it anywhere else when i started doing it like five or six years ago anyway that's it that's just that's just i i just i had to say it to somebody and you all are here and uh you know whatever now it's everywhere everything is every it's like the the to-do list now it's um it's it's it's everywhere um at least you know you know remix does the what is it the giss i think that's it that's that's interesting for for developers for sure um okay so let's get in into this so we have uh let's poke a bun equals fetch um hps colon forward slash pokey api this is where i wish i had copilot in this environment because it would just know exactly what i'm looking for so we'll do then response res.json this is really not very this is not defensive programming at all but it's it it does the job okay and so then we want to pull pokemon.name [Music] okay so we have a pokemon from the api we want to pull pokemon.name we still have an error because we are rejecting our promise um so let's see what happens here oh my gosh tons of tons of stuff [Laughter] you're the first person to play pokemon suit yeah yeah yeah fair fair uh the poke api is just so easy to use and it's fast i mean i think now it's all static too like they are just like statically you know build all of the things so there's no rate limits even which is great um yeah marlon marcelo hey welcome thanks for the for for for speaking up first time chat um the to-do apps yeah you know honestly okay so steal this idea um one thing that a project that i've wanted to build um but really like haven't had the time and i started and it was way more complicated than i thought it was gonna be is a an accessible to-do app um i'm something i'm worried about is is that to-do apps are just so meh at this point that like you'd be like fighting an uphill battle but doing a single page like accessible like to do app has a lot of really interesting problems that nobody solves when they're like doing the basic to-do app um so i don't know i i think there's something there i have part of it like figured out and then i kind of went on this tangent of like trying to have um what like element listeners like listen to like announcer elements inside of like storybooks so i could print those out and make sure that like all that stuff was working i just i went on a tangent as i usually do so anyway if you want to build a piece of content that i think that would be valuable it would be like a to-do list app in your favorite framework and make it actually work for you know everybody um crud is inherently fun yeah yeah i wish this is one thing that's kind of a bummer about the the poke api is that you can't post to it um and i mean that makes sense right you have to like do the auth piece first but yeah it'd be so dangerous to have like just an open post to api um let's see yeah live announcement when the element gets added um you never see those in these basic react 2d apps yeah exactly and i got like it was so fun to like figure that out but then there's all these like micro problems of like okay well like when you add an item or when you remove an item where do you want to return focus to like there's so many cool problems that like you just don't when you see all of the elements moving like you understand what's happening but like when you like can't see them it's really interesting to be like oh well where should the focus go like where does my focus go as a user you know who can see the the the elements anyway really fascinating um yeah i like to do it i'm telling you could be fun to build bill's pc as a crud app oh i don't know what bill's pc is share share more please share more please okay cool so uh let me jump back to this so we can get get somewhere uh let's see so we have this um i hit okay so i did everything i was supposed to do i think i have this oh yeah that's right okay so we're not seeing any errors um and i wonder if that's because i used warn and i should have used log because warren might not be supported um but basically like nothing's happening and that's because there's this fetch doesn't know how to communicate to suspense so now we end up building like a lot of we we're not building this however i think that we can just install it i i oh shoot nope that's that's wrong that's not what i wanted um how do i open that there we go um i'm making so many mistakes today and this is great because i'm learning so many things today okay so there's this little package called suspensify i don't know if it needs to be updated or if it is going to do the job that it needs to do but we can um start with that um so we have this uh let's go so we i think we need to import suspensify and then you know um wrap it so we're gonna import suspensify from [Music] suspensify like that and then we're going to take our fetch and wrap it we don't pro we don't wrap it in a function we just wrap it in this okay suspensey oh that's all the suspensive suspensey with a c what are we talking um okay so this says got suspended okay um this is interesting i've never used this before um let's uh let's take a look at it let's see so these let's see got suspended okay so what does it say so turn your promise to timeout so this is showing an example of something that we can do without fetch okay that's cool but i don't i would suspect that once this resolves it should show me this and so i don't know if that's like a react 18 thing or what let's make sure i'm doing this right those pc uh or bill is the one who made the pc system in pokemon red blue yellow oh cool um oh it's where you store your extra pokemon okay right right right okay cool google sorry i was thinking like like bill gates or like bill and ted i like that would be cool i agree going building that would be awesome um yeah totally totally it's all you lindsey i want to see it um okay so what did i do wrong so we have this suspensify thing obviously it's doing something a little bit different than what we have personally so it says get suspended interesting okay get suspended why does it say get suspended okay cool so we're gonna go look at source code now so okay so at this point oh ben thanks for the thanks for the the the sub gift to onesie it's very kind of you merry merry christmas to all of us thank you thank you thank you um okay so i'm kind of not sure where to go from here i'm wondering should i if you're me should we should we inspect the source of this or should we kind of like try to rebuild this whole like suspense thing um locally i feel like this would give us more control and we could see if things have changed dramatically in uh in react 18 um whereas you know this lord knows um let me see i might have this available somewhere so if i go to github.com chantastic um i think i have a suspense or concurrent or something like that repo that covers the basics concurrent mode in 30. i think this is one of them we might be able to copy and paste it from here so source spinner pokemon detail okay cool yeah i do have a copy of this so let's try that this is the real life the real life of debugging all this nonsense um okay so we're gonna just put this in line so we have a function we're not gonna export this function suspensify we're going to take this out and see what happens if we do that so what happens so okay i think that that is what it's supposed to be doing see what we get down here nothing here interesting okay so why is this so we have everything that we had before i think and nothing is blowing up obviously nothing's blowing up obviously so we fetch the api i don't think i can do a top level await here right pokemon yeah weight is only valid okay ac functions yep okay cool cool what am i doing wrong here friends i wonder [Music] okay so i'm gonna try pivoting again because maybe this is all just old information this isn't how you do it at all anymore so i'm gonna go to i opened up a couple pages here um for the react 18 working group and one of them is on like kind of start transition which is the kind of like first and most basic of the suspensey apis um so let's look here i think you can use start transition for like any kind of async function which is kind of interesting to think about what do i do while the transition is pending okay so we see this and that okay and some so here's a real world demo of using start transition to keep an app responsive in the middle of an expensive re-render i do find it interesting the idea of using suspense not specifically for data fetching i think data fetching is really the obvious um use case um that we like i think it's like day-to-day web developers think about but i don't think that is really how like the react core team thinks about it so let's take a look at this okay there's no way we're building that in the next like 20 minutes okay moving forward let's look at some other things patterns for start transition okay question written by tessarellis always good insights see so dan says it's a bit confusing that we explain start transition through the example because the canonical way to un unblock parts of the tree is probably use deferred value interesting so what is this using uh trans input so it's keeping some state and then on change setting means internal state this is fascinating i don't actually even understand what this does set internal state start transition on change fascinating in this case the initial value passed is only used to initialize the input which is then controlled internally by the component i believe this is already common use case for to balance instead of start transition okay interesting all right so maybe we should back up a little bit and see what happens if we return i don't know i'm like fully stumped here i i 100 expected this part to um just work and so i'm curious if i'm missing something here and so maybe it's like rubber duck time and i need to kind of go through each piece of this but okay yeah it's curious that it's not not working yet any ideas anything you notice um this looks about right i think something i should do is probably let's see i know i'm using an experimental version here what version am i using in this repository because that'd be something that okay so if i use an experimental version what does that look like so we'll do react at experimental this is an old experimental version but an experimental version nonetheless react dom experimental pokemon read oh did i not do oh cool good call did i not do that oh my gosh you're totally you're you're on the right track for sure i think i just didn't maybe get to it in this demo over here but it's okay cool i think you're right but why okay so i don't have it here okay so let's try that um okay create root is not a function oh yeah so that uses the old root api not the new one okay let's follow this let's follow this real quick and then try it in here and then we probably need to do a read and if we do need to do a read then that that's what it was i appreciate the the feedback alex um okay cool so let's go to our app uh no index um so we're using the new create root api that is one thing that i changed so we'll do react react dom dot render and we're going to render our app to this component app okay something went wrong okay so at least this is working the way that i expect right now so we have the the error boundary acting and so then what would we do like pokemon.read name okay let's detail component which takes a promise it is also easy to fake we just throw an error addis is error open our console in the error case the result not immediately clear to you watch this video a couple times avengers this will be something that you do once and are done and hopefully a suspense comes out of its experimentation of this but i believe that you can if it's not immediately sore returned from our formation you're right pokemon.read.name thank you thank you thank you i just totally missed that part of the video so pokemon.read.name now we're still having um an issue here so an error occurred lazy uh okay error interesting so now we're on the right version we're calling read the way that we are here we have all the stuff now why are we getting just the error man all this stuff is so tricky i kind of understand that sometimes when people make fun of react developers i've been doing this for a long time and i i've literally made material on this and i still don't really understand what's going on uh okay so api so we're doing all this we have suspense i'm sleeping these okay cool so those are just functions but then when we look at the pokemon detail it's doing the pokemon detail pokemon detail so this is taking a resource so it's taking that as a resource but then i don't call read on that i must be calling oh good gracious okay we can only use it where the component calls read okay so i do think i think we need to call reed inside of the component all right let me change this back to react at beta direct dom at beta to see if we get the same error okay whatever i did there i don't know if it's just a reload issue or what but that worked okay now i do need to change the root api back so um just the the root api features or sorry the concurrent features if you're not using the create root api um are not gonna work at all um so that's one of those thing one of the things where it's like that that's like part of the progressive enhancement a gradual adoption part of react 18 is is that you can still render stuff but like just the progressive the um kind of asynchronous concurrent parts of it like whatever that's supposed to mean are not going to be um used they're just going to work like they didn't in react 17. okay so we have uh we have this it seems to be working so let's see if we hit this it takes a it takes a second we see that kind of like come in afterwards okay cool perfect so it's good let's jump to um see enable suspense feature okay so create root okay we did that um do you prioritize non-blocking updates um with use transition and start transition okay so this is something now that now so i know this is a big api change with use transition there's there are two things that change the argument order and use transition change and then also start transition is the like easier version of use transition which i'm super grateful for because using used transition and destructuring the um destructuring those objects and then talking about those names that were destructured i found like a very concurrent mode enabled we notice a new error as we click this button a couple times reacts errors are excellent so let's read every word of this one warning pokemon detail triggered a user blocking update that's suspended the fix is to split the update into multiple parts a user blocking update to provide immediate feedback and another update that triggers the bulk of the change refer to the documentation for use transition to learn how to implement this pattern now there's no link in this one yet but we can search the docs for use transition and here i'll show you the bare minimum to make this error go away which is just to use start transition what react is trying to tell us is that when we do this on click this fetch request gets queued up and it has the potential to block user interactions so if so okay cool i think this is the page that we're looking for so again we're in pokemon detail we want to set an initial pokemon so let's do that let initial pokemon equal suspensify [Music] fetch pokemon of one and then we gotta change our fetch around a little bit so this is going to see ooh good question so is this a function now suspensify fetch pokemon of one um yeah so i think we have to make this a function that takes um id then passes that along here id i think that's how it works um maybe not though yeah again let's go back to our trusty code and look at this so in our source we have our api i think this is where we pulled this out so um yeah so we have a fetch pokemon function that takes an id that defaults to one and so then we wrap that okay so this should theoretically work okay so id equals one if nothing else gets passed in [Music] let's do fetch two and we'll see a different pokemon there um okay so i called it fetch pokemon but oh good lord okay changes to fetch function fetch oh my gosh this kind of function composition always trips me up i'm like so bad at like thinking about things in terms of carrying values like i always always lose track of where i'm at um okay so now we have a fetch pokemon function um fetch pokemon of two read properties undefined functions that then okay so what the what the hell am i doing now man struggle blessed today did not anticipate this pokemon is not defined okay um it's gonna be initial pokemon okay cool i have a sword so we did get the next one so now we need to create this button that actually or like create all the state and this button that actually like changes the pokemon um based on this eternal state so let's do that so we have let pokemon resource and set pokemon resource equals react.use state of initial pokemon okay so we're setting it with a the suspensified pokemon okay all right and then we're gonna do a let pokemon equals pokemon read okay so we're gonna call reed there so we can pull this out and do pokemon instead of the pokemon the initial pokemon directly uh not seat pokemon we wanna set pokemon okay now we can create this button that's in here so let's do another div and create the button that's going to change the state so got button gamepad button type is button on click is set pokemon resource of spencify so we're going to suspensify another fetch fetch pokemon oh my gosh this is nuts pokemon.id plus one okay and then we gotta close that button and next okay cool if everything worked this should do the thing okay cool so we have it oh we have a next button everything you know is dependent on like kind of the current state of it so that's fine okay so we have a next button now we want to get into the transition api so right now we have suspensified that's doing its you know thing um which which is just making this work at all the fact that we can kind of you know have this component kind of render um based on the asynchronous data but we have this new api or we have used transition but we want to start with start transition so what does this look like in the docs we have start transition so we're going to destructure that from use react use transition now there's a new api for this just react use transition and i think that we can do that now where do we put start transition we wrap the whole click with start transition so i think we can now just do react start transition and do that okay default start transition is not a function okay it's cool so let me when we load react in i wanna let's see what's actually in this beta version like is this something that's even exported so what do we have so we have use transition still um let's go back and we have start transition so why does it not like that for me okay start transition what does that look like okay so we have the global react i'm going to call react start transition okay so we have its function search transition what is what happens so default start tran oh spelled it wrong that's why okay cool now it's subtle but you can kind of see what's happening here so um let me see if i can take this out easily so if i take this out okay save uh yeah i think that worked so you can see that this like fully turns off and turns back on again so it's like we we click the button it disappears it goes to fetch the data and then it will render the new one so as soon as we click it this action's set off where it's like now that like just that ui just goes away for a little bit now what start transition is accomplishing for us is um it's going to leave what was there before there until the new thing shows up so i can keep clicking on this and if we get a delay it just shows the last one so just like that we saw raichu for a couple seconds so anyway so that's like the big difference you get with start transition so that's the first thing okay so start transition totally works we don't have to do that thing where we destructure it just for start transition now one of the big benefits of this okay so we're gonna be wrapping up in just a second sorry that we didn't get get further um one of the big benefits of start transition is um oh shoot i full-screened that video oh well um now what this unlocks for the use transition api is is that my understanding is that we can now destructure things so if we use react dot use transition the previous used transition had start transition as the first argument to make it make this case really easy however it's kind of curious because use state um has the argument order and oh yeah and so they had is pending as the second now that's kind of weird because like the uh you you state has these reversed where the boolean is up front and then the function is second so now being able to like having a dedicated start transition allows us to swipe swap that order so we can pull ispending out um which is which is nice that would have been really irritating with the previous api where we would have had to do this so that's one of the big changes i think and i think it's a really good change i really like this wrapper the convenient function for start transition um so that this doesn't have to get like hand-fisted in the first argument when there's already used state kind of with a tuple with the boolean and then the function um spent death welcome thanks for uh thanks for your first comment chat um it's my first time being here uh looks great um i hope to make friendships soon awesome yeah absolutely i'm glad you're here too um any chance that you uh oh ben's ahead of me any chance you're in the uh lunch to have discord um some really great people in there and really positive supportive helpful folks in there um so yeah all right so we didn't get too far but we did get to um we do to get to talk about start transition use transition um we saw that like the problem was just that i was forgetting to um hit read call read so alex at minis thank you so much for uh saving us on that i'd probably still be stuck on that if um if it wasn't if we didn't do it so just to wrap things up or kind of like put a pin in where we're at right now we'll get the same effect if we pull start transition off now and also we can call this uh we can call this whatever we want to so um you know if we just want to call this yo like so if we if we had a really important name for this specific transition we could use use transition to kind of name the transitions specifically um so that we have access to those so there's a handful things that we can do can i do this can i like not oh nice okay cool i can do that with a raise now sweet i didn't know if i could um what's up alex nice hat thank you thank you yeah that's my christmas hat um okay cool and then the is pending thing um let's see so what is pending is we'll cover this and then um i gotta go i have uh uh chromatic support responsibilities today and i need to get back to them so um what we have with is pending is is pending gives us a a a tool with which to in this case style the state like the pending state so we could put some style and say um opacity for this whole block um is going to be if it's pending uh 0 0.5 otherwise one okay that should work so we're going to style this whole block everything should reduce in opacity for a split second um you kind of there we go oh you kind of saw it for a split second there right um so one thing that we need to do is kind of like make these promises a little bit slower i don't know if i can slow down the network the way this works specifically the relationship with stack blitz um so if i change this to like slow 3g um what does that do for us cool you can't see it awesome wow slow g 3g is really slow that's not a lot of json that it's uh it's getting um okay cool um so you can see now with is used transition over start transition um we can control both the name of the transition if we have multiple transitions but then also we get this is pending flag so that we can know when there is an in-flight request or like an unresolved request and then do some type of um you know ui update based on that in this case i'm updating style but you could you know put a totally different dom tree in there if you wanted um so yeah that's it uh spent death i've been coding for well over 15 years i've written very complex systems but i still struggle with making simple web pages yes that is that's real that is very real no and i think i've been i i've talked about this with some friends um you know this kind of feeling of um you know like i'm like as web developers we're kind of just putting lists on pages like why is it so hard we're not sending you know spaceships to the moon um and i think the biggest part is is that there's we have to account for humanity and i think that's really the the beauty and the challenge of ui development and i think that's why it is hard is because we don't know all the time you know what the expectation of the user is like what they're going to do how they're going to you know how quickly they're going to click on this but quickly they're going to click on this button based on their level of frustration for the day and i think that's why building websites is so challenging is because it's a very human type of art and humans are just you know extremely diverse so um yeah i don't know i didn't really plan on talking about that but i'm glad you brought it up i um i really love this craft because of its humanity and i think that's something that i i find really interesting about suspense i don't know exactly how it's going to be implemented you know or like what it's going to change for us over time but i do love that it's being designed around the understanding of kind of like human interaction and how we need these uis to represent themselves to support the work that we're doing as the human operating the system so anyway uh that's that this was um frustrating but i'm really glad that we got to this point where we understand a little bit more about start transition and use transition i feel like those are two of the really main apis i think one of the things that i want to study next is you know some of the examples that they use the react core team that don't involve fetch i think that could be really interesting to not have to do that that whole dance with suspense so maybe the future stream um we'll figure out that for the benefit of uh the you know react uh holiday content anyway if you're here and you're not already on react holiday um check it out i don't know why i keep getting that old gatsby site it's very frustrating it's like very heavily cached i think um anyway uh react out holiday uh it's gonna be a handful of lessons i think the first one might have gone out while we were streaming today so um but you know never too late you'll get all lessons um no matter what days you sign up for uh so chance we'd love to uh love to hear how you feel this approach compares to the remix apis uh when you do that stream yes yeah oh totally um i am really fascinated by what remix is doing because of i've always felt like you can't really control the data fetching like like like waterfalls and cascade and all that kind of stuff you can't control that thing unless you control the router um and so the fact that remix you know brings the router is really fascinating so yeah we're really excited about doing that stream again that's friday so we're going to be doing that it's going to be a lot of fun so spent death is disagreeing with me which is great uh no in my opinion the reason web page is hard is because html jss and css were originally meant to for documents the 90s not modern applications um yeah i think that's probably fair um you know we are doing a lot with these i do still love those technologies these technologies um but i do agree um it can be really challenging to um you know really force application development into a um you know a document format so i agree i i i agree i can see that point for sure um yeah so yeah come to the uh discord server on friday we're going to be streaming that event will be streamed both in discord and on twitch but primarily discord is where you can get involved and you know raise questions and hang out and whatnot um yeah yeah i agree we'll probably reach for suspense a lot less when using uh using remix so i'm really excited to learn more about that anyway i gotta go thanks so much for being here everybody um i love you you're great um and uh thanks for the support thanks for ben for the uh you know the gifted subs and um yeah everyone hang out follow uh if you want more information you know when we go live you'll get those notifications and yeah uh see ya see you later friends bye

Channel: lunchdev

Views: 19

Keywords: games, twitch

Id: lbjaeuhgpFc

Length: 67min 13sec (4033 seconds)

Published: Tue Dec 07 2021