 Hello. Hello. Hello. We're gonna get started in a few minutes Welcome This should be pretty exciting Times so yeah, if you have any questions, I'm just gonna keep getting set up But if you have any questions feel free to throw them in the chat like Why do I stream with bedhead? Who's gonna come in a second? Hey bud Get your thing and Yeah, so so that's it. I'm just gonna get ready and yeah, we'll start in just a couple minutes Okay, so I'm plugged in today. I hope that everything works. This is saying Keyframe frequency is four seconds or less Pretty sure that shouldn't be true. Oh Yeah, let's see if I can update that in place or if I have to start over All right, so we got about five minutes again if you have any questions hit me up in the chat and And I'd be happy to answer any of those Right now. I'm just trying to figure out if I can continue to stream This well. All right, if you have any troubles with the stream, let me know it should be coming shoot Yeah, it's so complaining about keyframes, so I'm gonna stop this and start it over again It shouldn't I'm hoping it doesn't make me restart a new stream But it should be fine, but the stream might stop just for a second. I'll be right back. Hey, how's it going in? Gregorus is that did I get that right? Gregorus Gregorus Welcome, I apologize for butchering your name. You can tell me how to pronounce it I'll do it do it right Still complaining about my stream just changed the bit rate Well, I think that's gonna be as good as it gets. We'll see we will see Okay, we got like a minute and a half Surprised you don't have any questions. You should see I think you can see it some Some epic bedhead going on this morning I was actually thinking about just doing these just just embracing it and just getting a robe and like doing my morning streams in a robe just full full dad life Couple more things I'm gonna get set up one minute to go Should be exciting. Oh Hey, we're from bad back to okay This is an improvement. I do hope that we get back to good This would be my dream. I bought a whole bunch of new stuff so that we could uh, I Could be plugged into the router so everything goes up online as fast as possible and And not combat with the rest of my wireless networking stuff. So I don't know we shall see if that works I Might I might lose hope if If if this doesn't work, this is this has been like quite a challenge just figuring out how to stream I'm always open to feedback. So if you are a professional streamer and you know things I'd like to know things too. What happens it? What's the problem? He said, oh, no Did it break up again below this page? Hopefully everything nothing breaks Okay, let's see. I just want to see I'm gonna hit play see if it connects live Okay, cool Awesome, so I'm gonna assume that everything's working great and Yeah, just kind of move on. I thank you so much for being here I really appreciate it And I hope that this is valuable for you My goal today is to explore React suspense. I Don't really know that much about it. I have seen videos. I've read a couple posts. So I'm Familiar with the terms. I'm kind of vaguely familiar with what you have to do to get it started, but I Have not actually used it. I've not integrated it into any of my apps or I'm even played with it really for that matter So this will be a new experience for me but hopefully we'll kind of uncover some of the pain points as you That you might find and try to navigate around them. But yeah, that's my experience, which is no experience So we'll be kind of struggling through this at the same time if you You can feel free to follow along. I'm gonna be moving fairly slowly and Yeah, if you know anything that I don't or have you seen anything just pop in the chat I will see it eventually Or if you have a question as we move along I would love to know what they are I've been up since four o'clock for whatever reason. I Woke up and because I'm getting older. I could not go to back to sleep and it was super rough. So Voices a little little tense this morning Okay, so the first thing is I want to set up. I want to start from a fresh fresh slate so you know that I don't have anything on my sleeves and Build this with a using a new create react app Uh, so to do that, I'm going to use npx for the uninitiated npx is A tool in the npm toolchain set that allows you to run commands without having to first install them globally So usually you'd have to like npm install create react app And run that and you'd have to keep it up to date Which is kind of irritating in the case of create react app because there's Notoriously going to be updates Every time you go and run that which is Kind of silly to have to update it and then run it every time So what npx does is it allows you to run these commands? It's going to Just get the freshest stuff and then run that Run that one time and clean up after itself Now there's some really cool stuff too about npx Where packages that are like for initializing projects If they are prefixed with create you can actually use npx create as a command And um, and just so you know, I'm not lying. I'm gonna run that with a help flag Oh, nope stupid, um npx Uh create help no npx help create Let's google it So yeah, so this is not using that but this this document is all about npx. You can read about that later npx create I know it's going to be on here somewhere Wow, well, you're just going to have to believe me then that's wild npx create react app It's not going to work because I didn't give it a name This is the 4am Affecting me right now We're going to call this suspense fun Apparently I totally lied about that create command You win some you lose some Okay, so this is going to run in p.m Uh, so this is going to run our create react app called suspense fun. Obviously this always takes a little bit of time to Um initialize that project Um, one thing that I'm super curious about is that I know that all of the things that are um in So you have to use the canary versions of react and I don't know if they've been tested on this yet So we may have some problems. We may not we'll find out So cd suspense fun Um, and then let's yarn start just to see that everything works Oh, this is fun. So I'm getting it here actually Seeing this before um, and it doesn't seem related to anything that we're doing We just freshly installed this stuff. So I'm not sure what that's about. I'm going to um opt out. Hopefully that doesn't hurt me Um, and just kind of add this line to that dot inf file Um, so just throw that right in there Cool. So that's in there. Uh, if we run yarn start again, it should work It's gonna kick up the wrong browser though I've been trying to use safari as my default browser. Um, I really like it because it's super well integrated. Um, although like sharing and um, like tabs across, um devices is amazing Um, but the dev tools, uh are not my favorite and in particular it doesn't have any react dev tools So that um, that totally sucks Computer is churning right now Okay, let's open that up in an editor We're waiting for that. I want to see if we can Um, change the browser so create react app default browser I'm gonna see if that's kind of an inf thing that we can do Can you hear my computer going? Let's see this opens up a pr We should fix it Let's see what goes interesting Uh, do you have any of you know how to do this? I thought maybe it'd be super super easy and up front. Um, because I'm gonna have to restart this server a bunch But um, it doesn't look like it. So we have our app now Suspense is not in any of the or in the bundled version. So let's see what the bundled version is before we start Or the the package version in create react app. So it's pulling down react 16 5 2 and react dom 16 5 2 We are going to need newer versions than that. So, um We're not newer those are the latest kind of public versions that we have What we want are the ones that are the kind of the fresh canary builds the ones that aren't quite stable yet, but have some features that Are are being actively worked on So, um, we're gonna kill this and we're going to yarn add react at canary it's the uh Word for the freshy fresh shit And react dom at canary So that should go and fetch those for us and update this Amazed at how long this is taking for whatever reason Okay, cool. So it installed at 16.6.0.alpha with this hash on the end Um, now that should be good enough to get us, um the Unstable suspense features. So that's awesome Maybe this one let me close that one Um, it looks like my stream still uploading well. Um If you're having trouble, uh, let me know I'm gonna open up twitter too. So, um, just holler at me and twitter if Things are looking broken Okay, so, um, so we have that let's um, let's just see so we got Let's go to our index j s Okay, I don't want this confusing things. Um, I don't know maybe it won't but I don't really want to mess with it So I'm gonna take those service workers out Just so don't accidentally fall into, uh, some failures just kind of limit the scope of what I am working on Good gracious I need like two computers to do all this stuff Come on Gosh, I really hope not everything takes that long. Um, so one of the first things that we need to do Now there are two options that I think that react is going to give you for opting into suspense Now the first one is that there is a component. Um, that will be published Um, I think the idea is called like current concurrent mode And you would be able to Great now my vim stopped The computer is like at a standstill right now Very Very testing All right, so vim Mode is refusing to work for me. Uh, anyway, so there's this, uh, there's this idea that you'd be able to use concurrent mode um, and so you could just select certain parts of the tree and wrap the concurrent mode component around those And kind of opt those into these suspense like features Or um, you can just kind of have suspense control the the whole tree. That's what we're going to do. Um this morning And that requires a a a change at the site where you're rendering the component Um, so this changes a little bit. Um We've got no vim so i'm gonna do this So we're gonna say, um, so that api looks like, um We'll eventually be create root And um, and what you do is you're gonna wrap your document dot get element by id In create root now because that's not a stable api yet and the name might change Um, it's currently prefixed with unstable Oh math says the vim mode thing is an issue with vs code Um And yes, I so had it kind of like go in and out but never like in one session Like it'll be like i'll fire it up and it won't work and then i'll just kind of like restart it and it's fine So i'm not sure why it's I think there must be something like I think vs code is just generally pissed at me right now Um, because it's just moving dog slow. I don't know if you can see it on there. Anyway, but um the so Uh, so back to this the unstable create root. Um Is what we're going to use again that will be create root eventually Um, but not right now now now that we've moved that into unstable create root We can take this off and we just render Our app from that root If we did this all right, um everything should work as it did before except now we are in this concurrent async mode Um, so that's cool. So that's step number one. That's the first step Uh, we got that done. So let's open our app js file The ironic part is that I thought Um, I'd been having some problems on on code sandbox with the performance and the streaming stuff So I decided to do this because I thought it would be faster. Um, obviously Obviously not obviously mistaken Okay, so um from here What's the next thing that we need to do so um part of so there's a handful of things that we need, um to do when we're using this like, um Uh React suspense so We um, one of the things that it does is it works all on these like caches or at least that's my understanding Is that you have these cat you have a cache and you Um create a resource for it and then every time you load a resource it will cache that thing for like future requests So, um, let's get some of this stuff out of the way Oh vim modes back praise The lord so we're going to need to import something that handles that and this is right now it is um simple cache Provider and two functions. We're using our create cache like that and create resource So these are the functions that we're going to use um to create a crash create a resource Um as we request resources um Let We're going to create an actual cache um value cache equals create cache Um, this uh takes a like reset function. Um Where I guess if you call like reset or Purge or something like that on it it will call that function and um kind of create set it back to zero And that function can be anything so depending on how you want to set up your cache. You have full control over what happens in there Um, right now. I'm not super worried about that um, and then we're also going to have a Uh, we're going to set up a pokemon So we're going to call that pokemon resource and that's going to be create resource Now this takes um, let's see my understanding is that we would Use this just like we would with fetch. So if we were going to um fetch a pokemon Let me copy that url because I don't really remember This is really cool api called poke api And today is not my day. Um, uh, so then we would just do our traditional stuff. So then Uh, take the response call dot json on it Um, so that's how our like normal fetch would look. Um What we need to do in here is we need to call function and Return that So I am using these things which I haven't installed. I'm so nervous to go back to here, but um, let's do it so npm Nope yarn yarn add Simple cache Provider Hopefully I can do that without a restart because that just crushed me last time Looks like I might get very good at talking today Let's see. Is there anything else that I need to install because I should do that now So yarn add simple cache provider field compile parse error. Oh From I ain't putting no from in that Okay, cool. So we have that set up. Um, we have our cache Um, I'm just curious if I can eat if if I can even do this What that cache looks like See, so we have an object There's an invalidate function on it preload function and a read function. Um read is the one that I think we'll be doing to pull values off of the cache um, and um, yeah Cool, cool. Cool. Okay. So we're we're we're moving along. Um, and then Let's see if that is making that xhr yet. Yes Okay, cool. So you can see that even though we've like placed this. Um, we have this fetch Going on. Um, it's not being or we've added this fetch. Um, it's not actually being called because we haven't read the value So that's also good to know Very cool So how do we start reading that value? Let's Dive into that So my natural inclination is to just put this here and see what happens. I don't know if it's going to work But um, let's do it. So we'll say let poke get mom Uh, let's call this pokemon collection. Um, since pokemons are non countable now And this is probably a really bad example because it's going to be pokemon pokemon for the plural in the singular So, um, i'm going to call this pokemon collection Uh, we'll do let's see pokemon resource dot read And pass that cash in unexpected token See, I wonder if i'm doing that right That pokemon Oh, uh, this is a class Okay, cool. So now it is um making that xhr request. That's redundant That that request Um, but it is complaining now Uh, let's see we have a warning in an error. The warning says pokemon collection is assigned a value but never used. Okay, cool Um, let's see if we can Uh, use it. So we'll do an unread list. Um Let's die down Oh Pokemon dot name. Nope Little eager there Why are you doing this to me? Okay, so we're gonna, uh spit out the pokemon dot name for each of these in the list item Uh, remove it remove Uh, senile Uh, remove what oh remove let Oh, yeah, it was yeah, so the problem was I was I was doing it. Um in the class I I In my mind, uh, this was a functional component and um I had it up here. I had to just move it inside a render This was my problem Okay, so now we need to loop over what we have. So actually i'm gonna do that. Um So we're gonna say pokemon collection Uh dot results. That's just how the api is dot map And we'll move this inside of here Take pokemon That should work Okay, cool. So we got rid of the um warning message, but um We still have this error. So So See the above error occurred in app component consider adding an error boundary to your tree to customize error handling And then it gives me a link Let's start there. So I know that they give me this nice little error boundary component that I can use so we'll pop that in and Wrap our component with it error to my service An update was suspended, but no placeholder ui was provided So now I think what's happening is just in the same way that like error boundaries need to have these Kind of component boundaries. So this is the parent of this component, but not the owner Um, I think that we need to um kind of create another we need to create a component boundary around all this So, um, let's pull out a component for this It's just a hunch see pokemon Let's call this the pokemon collection uh component Uh So we're gonna delete that out of there And we're going to take this ui chunk Put that in there With a return we're gonna render pokemon collection See what we get now Something went wrong. Okay An update was suspended, but no placeholder. Okay, so We have our error boundary. I'm assuming that so I'm assuming that the error Uh, the error boundary caught that Yes, because I didn't write something went wrong anywhere. Um, so the error boundary is catching that um, and then it should be logging our error Um, uh, which is this one right here. I believe The above occurred in pokemon collection Rex will try to recreate this component tree from scratch using the error boundary you provided Hmm. Okay. Cool. Cool. So let's see. So let's kind of like recount where we are. We have our app components Um, it's rendering error boundary inside of that a pokemon collection Um, which um uses these new cash features to create a resource um Or to like read that resource into the cash and then um Render that pokemon So we have the pokemon collection. We have the results. We're mapping over them. Uh, let me just make sure. Um Render that out and see Log that out doesn't seem to want to log I wonder if I don't have access to that data here So if you're just tuning in this is me exploring, uh React suspense from the handful of things that I know about it. Uh, I do not Really know exactly what I'm doing. This is all kind of an exploration for me Uh, let's see that changes if I put this inside of render Okay That's fine. Um Okay, so that's not giving us what we want an update was suspended, but no placeholder UI was provided um Let's see. So I know that there is the Uh, what is it? This is kind of suspense component. Um, so let's try wrapping it in that and see if that helps us out We're going to call that through react. Um, because right now now it is also unstable prefixed Um It's the best of my knowledge. We can't do that because of this, uh lowercase letter here So we'll just call it through react Uh suspense Whoa Okay Okay. Okay. Okay. Okay. Okay. So our error goes away now that we've done that Um And It works Okay, cool. Cool. Cool. So, um, I guess anytime we have these components that have um use these Kind of suspendable caches. I don't know what the the terminology is there. Um, anytime we have something that does This, uh, we need to maybe wrap it in this suspense component. Um Okay, cool. So that works. Um, we don't have any place holders So I want to know I'm curious how I can get this to break Now, so let's see if I put throttling on Um Let's just go like dsl or whatever. I don't want to wait too long Okay, that didn't do anything Okay, so I'm not sure at this point Um, what's rendering and what should be? I'm loading a spinner. So Maybe let's put something in here. I don't I don't know if this is a good test if we need to make another component. Um Let's just make another component. Okay, so then we'll render that Doesn't necessarily need to be a component, but I don't I'm not too confident in where these like boundaries boundaries lie Okay, so if I run that again, it looks like it's not it looks like we're The whole thing is kind of rendering Once I get this data. So like maybe it's like it Firefox is like delaying that fetch. Um, because the the the response isn't taking any longer It's just kind of like delaying it um Or delaying sending it out. So let's do something else. Um I think I'm curious if we sleep the uh What is it if we sleep the Um, the the promise if that'll do what we want it to do Oops yarn add Um sleep promise, I think that's the library. Uh, this will allow us to um Be able to kind of like insert a sleep call and kind of Tell it to like kind of before it resolves the the promise fully. Um to to to sleep it for a little second Um import sleep from sleep promise So then we would insert a then here with sleep of Let's do a thousand see if it works. Okay, let's turn throttling off Cool. Okay. So we are that sleep's getting inserted It's working for the most part um Okay, cool cool Okay, so the next step is um, we should um, I think we need to provide a fallback I think that's the api for it and we just give it a component Or an element Interesting So that didn't do anything for me. Um by itself Um In the videos I've seen there's also a like delay milliseconds prop. So maybe we need to do that Uh, let's have it show up immediately if we can Nothing interesting Hmm. So I know in like the videos They were showing a lot of like how this kind of like manages transitions from one Thing to another I don't want to necessarily like kind of like go and just rewatch those videos with you watching That would be kind of silly. Um But this is an open question for me We're also kind of like hitting up on the end of like the 45 minutes. I'd I'd planned on doing this Um, but these are open questions for me Um, so what have we learned so far I can get this out of here I'm just going to kind of summarize what we have so far And then I'll kind of do a little bit more research and then come back tomorrow and maybe do the same Uh, do do a little bit more once I learn a little bit more about this process so First um, let's open up the index. So the first thing that we needed to do is we needed to give um We needed to kind of prepare our app for this concurrent model of development. Um, so we have Oh, just a second. Okay, cool. Uh, still still working. Um, so we have this create root and um, That changes just instead of calling react dom render and giving it the uh component to render as well as the The document dot get element by id. Um, we're now preparing this This element with this create root function and then calling render on the results of that So that's the first thing Um, the uh, second thing is is that we need to use this um simple cache provider. We create a cache Um, we can call it whatever we want Uh, it has this reset function if you have a special way of resetting it. Um, that has methods on it We kind of looked at those Let's log those out again So, um, it's an object with functions invalidate preload and read Um We're uh, sorry someone's walking around my backyard right now. It's just the long guy. Um Um We have um, let's see. So we are creating that cache. It has those functions We are creating a resource using the other method that's provided to us there create resource Um fetching. Um, just doing a standard fetch. Um, right now We're sleeping only because I wanted to see if I could kind of force that Um, that fallback state. Um, I couldn't unfortunately. Um, and then we're just resolving as usual Our pokemon Kind of as a local variable to this functional component Defines this variable by reading from the cache. Um, and then kind of doing a very standard mapping over that list Um and then In order to get that to render the first time obviously it was like I guess Um suspending that update because that was the error that we were getting when we um, so I'll take this out real quick Um, so we can get that error state again See what it was um The error was an update was suspended, but no placeholder ui was provided so Um, we added that back in that got us to rendering But um, we can't seem to get This to rent render our fallback So I don't know if that's placeholder Is that what we need to? Yeah, so, um, that didn't really seem to do it either Um, again, these apis are not quite documented yet. So, um It could just be that these have these have different names and I am not getting it right Um, but these um, I think fallback Um Or placeholder was what was used in the demos that I saw And that does not seem to be doing the trick. So um, the questions that I have are Am I just structuring this wrong? Um, does it does suspense solve a different problem from this like first? load Um, or are these um props wrong and I'd be able to kind of get that Um, I'd be able that would work otherwise um I think I'm I'm really curious. Um before I leave I want to try one more thing and I want to see if if We can use The um the old render style um With that concurrent mode function So we're going to kind of undo what I did here in the beginning And I will save that it should kind of break dramatically Whoa weird um All right, so maybe you don't need that other thing Because that's that's doing exactly what we're supposed to be doing. Um All right, let's try it anyway then. Uh, let's see. Let's see what else we can learn react dot, um Unstable Concurrent mode element is invalid. Okay, so, um, maybe that's not Oh Unstable who knows why I did that jsx What the heck is going on with me? Yeah, so just happy. Um, yes placeholder was a component. Um, it was changed Uh, recently in the the build that went out, um to be, um suspense. So right now it's unstable underscore suspense um But yeah, it is the same component as far as I'm aware that placeholder was Okay, so the way that I started was completely wrong because, um In now, I don't know if this is subject to change But as soon as I change this back to render from unstable create root and all of that nonsense Um, this uh started showing me that loader again Okay, um, and then this, um unstable concurrent mode, uh Kind of made no difference in this case. So I don't know. Um Yeah, so in this case, we really didn't need to do the kind of change this up I don't know what that's about but We'll see um So we have, um, let's change the milliseconds on this to I don't want to show a spinner for the first hundred milliseconds Um, I mean guys, we're not seeing a spinner. Um, let's if I can delay that even further We should see pokemon pop up Then loading in the end of the um content Again, it could be that this changed This api is called something or this prop is something different now. Maybe Um, let me just I'm gonna put placeholder and I think we should get an error That says that there was no fallback content Okay, no no error. It just doesn't do anything. So fallback is definitely our Our fallback api for this new suspense component Um, this doesn't seem to be doing anything for me yet. So let's see if delay works No So I don't know. Um, I don't know how to make this do anything at the moment So that's kind of my remaining question, uh along with Why didn't the other thing do anything or why does this already work with the concurrent mode stuff? Um Maybe that's the intention. Maybe it this this render should work in the right version of reactom Um, yeah, so that is um all I have for today Uh, we've been going at this for about 50 minutes and that's usually when I started to get too Tired and weird to talk. So, uh, thank you very much for watching. Uh, let me know in the comics comics Comments if you have any questions, you can always hit me up on twitter. That's um, I'm there all the time at fantastic and Yeah, if they if you know any of the Answers to my remaining questions. I would love to know what they are but so far we got the um You know, we got the the list with the cash with the the resource and the loading all working save for that delay. So um Yeah, I'm feeling I'm feeling pretty all right about that so far. So, uh, thanks for watching Subscribe if you want to get notified when I do another live video. Maybe tomorrow I'll have an answer for that delay milliseconds. Um, Thanks for being here. See you next time