 Hello, hello, hello We're gonna start in just a couple minutes. I'm waiting for Swix. I'm just getting a couple things ready and Yeah, let me know if there's anything that I can Improve I think oh, you know what? I should probably plug into my router. I don't know. Hopefully the white. Hey, what's up? Hey, Michael. Hey, how's it going? It's going good. Good. Good. Good. Hey, do you mind? You sound really good. Can you hear me well? Yeah, I can hear you. Can you hear me? Yeah. Yeah, you got a good mic there. I Can help you out with that? I Have a good mic from Egghead. It's just that it's in storage right now because I'm moving around It's probably the same mic so you can sound good. I Need your voice to Dude, I'm excited to have you on Yeah, excited to be here. Are we recording? I think we're I think we're live Um, but I was gonna I was gonna wait until nine. Um, just in case I think what I'm gonna do is Wait, let me just double check that everything is working. Yes. It is. I'm gonna since I got like a minute left I'm gonna plug my cable in Across the house to my router so that things don't go down All right, we got like a minute and then that Automated tweet will go out and then we'll we just kind of start it off. Are you gonna I'm sure you're screen at some point Yeah, I think I mean I actually don't know what you had in mind So I'm down to do anything but I can I can sort of do like a complete no knowledge Or I can just like answer Yeah, so I thought we'd start with the questions and then you can kind of walk through that app that you made if you want But yeah, I thought we'd start with the questions that I ended on just so we could I guess wrap that up Oh, I should probably say I didn't actually watch the oh, no, that's No, I didn't expect you to I just wanted you on because you had had answers to the questions that I raised afterwards So, um, I thought it'd be good to have you on Cool. Um, hey everybody, so I'm doing something different today. I got the The hangouts on ear thing going so I don't have any code making me feel a little bit exposed here But I got swicks on is it swicks or switch or I'm always surprised like everyone always gets it right on the first try, but you're always unsure So like what other way is there to say it? You know, it's funny my Family my dad grew up in Brazil and so when he had when he had friends up and they pronounce the X as a sound and And when they would come up, they'd see those like crossing signs. Do you remember those and you're like, what's shing? So I think my my part Brazilian Upbringing kind of has me asking like is it swicks or swish? Yeah, no, you're not the only one It's just a nickname. I've had like always so I like it. I like how you embraced it, too It's just now you don't even have your name on Twitter anymore. It's just switch. Oh, yeah I got I think I changed it for some event and then when I say she's back Yeah, I try to put my full name because people get It is true a lot of people I think at my office feel that it's kind of like racist to call me Chan Even though it's what I prefer. I think it's just like you said, it's just awkward for people Dude, I feel like we should call this crazy react Asians right now That's pretty good, I regret it immediately Loaded Okay, so what we're talking about today was I had a few questions kind of at the end of my stream yesterday and I think I might share my screen or share my my window real quick just for a second Let's see application window Twitter Where you and Dan had both responded to me. So I did the live stream I had wait, let's see Present to everyone All right, can you see my screen? I can see a screen Okay Okay, cool Okay, so I had I had I did the live thing and then I said now I have more questions You said like what and I asked about the unstable create route Kind of where concurrent mode comes into play and then also Just kind of like unstable unstable suspense seem to work for me surprisingly without having to do the create route and Concurrent mode etc. etc. So we're gonna talk about You're gonna kind of talk us through some of that, but you had mentioned that the suspense stuff should just work Outside of concurrent mode. It's just that you don't have the max duration control. Is that right? It just defaults to zero Yep Old we are just no sense of time. So awesome. Awesome. So it's just like everything It's gonna be as if you put max duration zero on everything So that was the other question I had that you were able to answer is the I was using delay MS Which is kind of the old unstable API and the new unstable API is max duration and And so then kind of final thing Dan had mentioned That what create for you what create route does is it doesn't force? The first render to be sync which I think is what I was experiencing because when I was Rendering the page it would wait until that that a sync call came back and So I wasn't seeing my spinners until I took create route It makes sense to me with my limited knowledge right now that that would be the case if Doesn't force synchronous render for the first time Okay, I don't think that's exactly right. Okay, cool. You should have seen your placeholder anyway, okay So I didn't see a stream yesterday, but that's fine. This this is more for Set a server-side Streaming service admin ring and not having to do the double-pass rendering trip For SSR so so this would So so the so okay react on that render right? Assumes that you're going to render Everything so so there's there's two feet like There's like to the new concept to get so first of all I should say that you know I'm just repeating what other people tell me on Twitter and and what I see on GitHub issues I don't obviously and Experimenting we're just having fun this morning. I'm just a rando on the internet. So I mean, you know, they're very Careful about the messaging as they should be So, yeah, so there's two phases right the commit phase in the sorry the render phase in the commit phase create route that allows you to just to render and not commit and The render can be interrupted and suspended. So you don't have to finish the whole thing So that's the that's the different assumption fundamentally different function from react on that render Which which was created all to I mean, it didn't have any of any other concepts So there I think they're keeping that around but they're encouraging us if we want for new apps to But essentially they do the same I see Interesting. Okay, cool. So that would be something that would be more applicable You're saying if I was doing server-side rendering not for what I'm doing right now, right? Yeah. Yeah. So, okay, cool. Um, let me just say I'm gonna close this window because there's dogs you happen Okay, cool. Yeah, when I saw it I had assumed that it was like the new thing that I was gonna have to do That it changed everything and that that was the way that I opted into concurrent mode without using the concurrent mode components But it sounds like that just works out of the box. I can use render the way that I was and I should investigate it I can use it either way, but I should investigate it if I'm doing some server-side Rendering static state generation, etc. Yeah, there's there's already a gist that's been written up by Andrew, I don't know if you've seen this I can share Yeah, yeah Screen share in my turn All right, you see my screen Yes Okay, cool. So this one is actually a very old gist But he's actually updated updated it recently to show the the API for create root. So this is create root It creates a root, right? And typically you can just go straight to root render Actually added docs for this yesterday. Oh cool So this is my repo S dub yx slash was it fresh React cool. It used to be a sync react, but they renamed it So so I just wrote up like what I read about it. So so originally you could say React on the create root with the container and then root dot render whatever JSX you have, right? So that's the that's the typical way that you would use it. But then if you wanted to do more granular Rendering you can also do for example pre render and then do other a secure and then commit. So so these are the two going on and then you can also do So so so this this route requires you to have a container existing, right? But what if you don't have that assumption and you want to just render without a container? I can create a lazy root and Then only and then and then fulfill the container later, but you only pass a function Into there you don't actually pass a don container itself So those are like I think what they're planning. They don't they haven't even implemented it yet It's probably on another branch. So it's not in it's not in the react repo, but okay, okay, this is going on there Interesting. So so this is the gist and I also recommend for people like just getting to know Why we even want this in the first place. I really like this one because this is The original like even before even while fiber is still being written. Have you seen this? Oh Wait, I think yeah, I think so. Was that one of the demos? Yeah Yeah, I don't know if they've ever demoed this in stage, but this is definitely talked about as like the concept For why we even want this. So if you see the spinner here Best this just shows whether the thread is blocked or not. I can make it more obvious. I built a clone I built a clone of the JSConf thing the radar. Oh, nice. Nice So so you can see that things get locked up Region and that just calculates like the difference in every single frame. So so if you if you switch to a sync mode The reloading doesn't block the main thread like it can just slice things up And then And then the problem between and then the last feature I think that is very subtle about react suspense, which people don't get is that siblings block each other So so this one so you see the top loads faster than the bottom, right? So the top is going to show first before the bottom, right? And if if you had it the other way around if the bottom load Loaded faster than the top it would load the green thing and then it would jump down And then and then be filled out by the blue thing So that would which is always infuriating that happens to me like all the time And you click something that you didn't mean to click because something else got inserted Like just before you clicked it, right? So so suspense by default switches the default to siblings blocking each other So this is what they call coordinating the commit phase and they appear together because One one waits for the wits for the other to finish rendering and then the render so placeholders are ways to coordinate the the Appearance together of siblings that makes sense. Yeah, that's awesome. That's yeah, that this is really effective Right. Yeah, that's a huge UI improvement, right? Because so many times out like As a user that I lose a lot more time to like correcting going to a bad but going to the wrong place Then I would just waiting an extra couple milliseconds for the the children to coordinate Yeah, what's that called again coordinated what? Ah Coordinating commit phase. I mean, that's like this isn't this isn't a real name at all This is just what they what they have Going on with the proof concept But the point is the point is that it's better defense like that like in my first talk about reaction spirits I made it very very clear like the problem is not placeholders I think Ryan Florence is going too far in like he's calling it spinner get in and like spinners are not the problem You know, but the problem is that defaults are The defaults are probably often the things that we don't want which are unintentional So things like So so, you know, I don't know if you want to talk about actually yeah, what else what else what the question? I think those are honestly at this point. Those are the only questions The my confusion was around just those like those three things kind of like what the difference of I Guess I guess one thing I am curious about is do you have any examples of kind of those concurrent mode tags? My understanding is is that you can wrap them around selective parts of Your application so that they can though just those parts can opt into concurrent mode I'm without having transitioned your whole app all at once Yeah, and yeah, so is that accurate? Yeah so I think the way to say it is that react 16 is opt-in to concurrent by So you opt in the concurrent by using the concurrent mode tag So that's react dot concurrent mode, right? And then whatever part of your tree that you want to run in concurrent mode You just wrap a current mode inside it. I don't know everything else. That's that's a child of it works And then react 17 will be off out Just won't be an option at all. I see So I think that's the plan or it could be you know, 17 18 whatever sure sure But at some point it's going to be you're gonna get that Concurrent rendering by default just by using react you and you may not have a way to opt out of it Right, so that's that would be create route, right? Okay in future. We will transition to something like this and That's so And and this will be the one that's enabled by default in this one Okay, one where you opted So I think that's you know, that makes sense and Yeah, it's it's really nice that they that they are always insisting on having an opt-in path Yeah, absolutely like I'm it's I've always been Pleasantly surprised with the tools that they they give us to upgrade our apps or to migrate them And this seems like a great one You can just kind of start putting that in places places that you might be concerned about how things work I'm or you just want to explore and see how it changes things And that sounds awesome. I'm really excited about the Kind of the coordinated children. I think that's gonna be a really big Improvement for for you eyes or like you said, it's just a better better default, right? It's a better default I think I think people get you know, it's no more and no less, right? Like You don't have to use it. If you don't want to you can always opt out but You know by the judgment of the react team. This is this is this better fixes the problems that they see and There's there's still there's ways there's ways to to get around it if you want your behavior Mm-hmm. So what would be a mechanism for opting out? Placeholders Gotcha, just put the placeholders there. Okay, cool Awesome. Now you had just built an example that you said that you had tweeted like just before we started, right? Yeah, so that would be so you can find those in The in the read me, right? And basically what what this is this is I mean I I don't even want to say built it But whatever in the react package that there's if there are fixtures that they maintain and if you go to the unstable async folder They have the suspense demo Which is modified from the JSConf video and then in time slicing demo, which is also from JSConf Okay, so basically I just put those on code sandbox and I tidied up some of the code So that's so that's I just go see what this looks like And I mean obviously the reason I wanted putting quotes and boxes so I can demo it and show the code Yeah, yeah So so yeah, I mean, did you play with this your in your last room? No, no, no, I didn't play with this. I Think it's important to do it in a future one, but you can leave the way sure show us what you get I'm gonna mute. I don't accidentally just by breathing Steal the screen back. So Yeah, so so go for it. I Mean it looks like I'm sharing a screen So this is working so this is the demo and And it's really like a master detail list as this is what they call it, right? And you just click on anything it loads some data Synchronously and then it shows some details and then you just go back and forth between those, right? So that's that's kind of like it on the surface but what this lets you do is it you can bring up a debugger by pressing slash Right, and it lets you show how things are cached in react So here, you know because I clicked this page before it instantly transitions these things are in cash And then it also shows you things when how things are loading together and they display all at once When when everything is loaded and if you want to find grand control you can click pause new requests Right and you can click on a new page and it doesn't load right and you can control That's the time out there and that's a placeholder timing out right is that because I because I'm talking about it So it's so it just timed out for me now It's transitioning in the placeholder because the max duration has Has been exceeded right and then I load details for example And it's loading details and it's showing the details because there's a placeholder here and And then when I load the repositories Then it shows the deposit the repositories and that's a loaded page Man, that's awesome. So so I think what I think everybody who uses react suspense Needs to go through this example and figure it out for themselves because the way that Dan Abramov Abramov did it during JSConf like he knows it, right? Like you but you don't yet and this is the best way to like just get a really good feel of What Of how changing the placeholders around Changes the defaults for you. So so what I'm gonna do right now is I'm gonna go into the page Okay, so here I'm gonna open up the page and look at user page, right? And I'm gonna look for So what I want to show you the way that I want to show you the way that it does The way that it loads separately, so there's half this dinner All right, this is like completely unrehearsed, but it's fine. I this this hole is yesterday You should have seen my stream yesterday. I was like, I was like, I don't know jack shit. I'm just like Okay, so I'm gonna clear up the screen. Okay, so let me orient you, right? I I use style components here, so you don't worry about styles and line in we just worry about it So we have a user page, right? The user page has details and and it and it reads from the resource So that's this this suspense when when it doesn't have it in cash, right? And inside so that's the user detail section and then there's a there's a placeholder Wrapping around the repository section, right? So So if you can look at it as I can load user details And then I can I can try to load repositories together But if the max duration of the top of a millisecond of a second exceeds then it's going to just show you user details And then show a placeholder here. Does that make sense? I don't know if you can hear me nodding. I'm muted so that I didn't steal the screen back But yeah, yeah, totally makes sense. Okay So so again, I'm just gonna show I just gonna be extremely like I'm gonna over communicate because I think people like don't Get this like every time I try to to verbally talk about it They like not alone, but they don't get it. Okay, so So here I'm gonna intentionally load I'm gonna I'm gonna go into a Screen, right? Okay, it's gonna show and then I'm gonna I'm gonna let I'm gonna let the max duration Max duration expire it so hang on I'm gonna go into a screen, right? I'm gonna load user details and then I'm not gonna load repositories So this will expire and it's gonna show the placeholder and it's gonna show the details All right, so let's go I click on details and load the details where I don't load the repositories It's gonna show the details, but it's gonna show placeholder for the repositories, right? So that's that's declaratively how it like how it how you how you declare that this is an intentional loading state Right, and then only when I show repositories, I mean only when I load the repositories, then it was the rest Right that makes sense So now if I remove this there's siblings now, right? There's a there's a suspender here, and it's a suspender here, right? Let's look into this user details has a has a cache read right and repositories also has a cache read for the repositories right So both of them have suspenders, but let's say like one of them resolves differently from another Right, so I'm gonna reload. I'm just gonna reload the app And now I've removed the placeholder in between, right? I really should afford this repo because I think I may have unintentionally Broken it a little bit So like Boxes bit weird around that one stuff. Yeah, I know I was actually having I was having like kind of a weird babble thing even with with a fresh um a fresh Does it create react at 2.0 box the other day? We'll see I can't I can replicate this on another instance Okay Okay, here we go Let me just finish my train of thought. Okay, so remember I removed suspense, right? I had this here and I removed it, right? so so now they're siblings and and they Suspend Together, right? So so here I'm gonna I'm gonna also pause new request and I'm gonna load this and now it's in the loading state It was transitioned to a placeholder because I have a placeholder around this whole page And then I'm gonna load Details like I did before but now notice how it doesn't show anything, right? Because the other thing still hasn't finished loading, right? And there's siblings and there's no Placeholder around this, right? So it's on you. I mean it just declaratively shows together Right because in the GSX it shows together, right? So that's that's how like it's so important to understand this thing about Intentional and unintentional loading states like everything here is intentional whether you want placeholders or not Whereas previously you just introduced it in based on whether this API is Loading so that's the that's the main thing. I you know, I wanted to emphasize. Yeah, that's awesome So where's the placeholder around the styled page? So we got now it's in the main Yeah, it's in the main app. I didn't show that. No, that's right. I was just hoping to see it Page Yeah Okay, cool. So that so that and this is code split as well. Just nice. Huh? Nice So that's that big spinner we're seeing when we get navigated to the page But it's waiting for both children like you said you got that default where the coordinated What is it commit phase for those children? And so it's blocking on both of those unless you further opt in and say If we get this earlier, I want I want this as soon as possible or like you kind of Wrap the the one that you're willing to wait for Maybe the longer possible request In that that suspense component Okay, cool. Cool. No, I didn't I do have a question. I was remembering it as you were going through this about The resource reads I know that for like a collection of things you just kind of do that you do like resource dot read and then put the cash in there But then for IDs of things you do like comma ID. What's the what's the story there? I'm not exactly sure what you mean. So I here I have a comma that I come ID. Yep So what do you mean accessing without so this is like the user detail, right? But is there like a user collection like where you're getting all of the users? Um, yeah, yeah, I think I think you just passed it actually Or maybe not this. Yeah, we're in there, right? That's that's the that's the Cold split component, okay, you're gonna this page Yeah Okay, so here it is Yeah, so then you read So, yeah, so here you're reading the whole thing without the cash Without the ID. You're just reading in a way Okay, so this yeah, this links to my fake API back in right because And this just gets the whole gets all Right, so So, yeah, this is a collection. Okay, cool So, but that's my understanding right now is like How do you use resource read is is that you just put cash in there? If you if you have like a collection of things that you're gonna map over or like this is the super layman's version But then you would throw an ID in there if you have like a specific resource that you are referencing When you do those like yes resource reads Yep Cool, cool. I think and I think it's important to stress again that react Cash itself is unstable and I think there's been discussion of removing This cash in all so so basically when you create resource, you just attach the cash here So then you don't have to keep referring to cash you can you can just say Writerless resource dot read Gotcha, it works. Yeah. So I think they're I mean, I'm sure they're pros and cons of that like my general approach These things is that like I'm not smart enough To follow along right so I just I just like get their rough idea and then let them worry about the details because you know I mean, we all have other things that we need to do and this is their full-time job So I think the best the best the best way like then the most mentally sane to wait or approach it without like, you know Sitting on the shoulder all the time is just to try to get the chest of what they're trying to achieve And that's that's what I always focus on. What is the principles principles is Better defaults. Yeah. Yeah. Yeah. Yeah, and I and I feel the same way You're just you're just like way further along on this suspense thing and I have I am I like watch the video And then yesterday was kind of my first time to bring with it at all So this was really helpful for me to kind of get a better sense of the the why behind everything which is those that that But that improved default is a huge improvement But then also just to just to see a little bit more of the code See that example that you linked to where you're specifically showing Showing how you're opting in to the the more sliced up loading experience That's it's really good to see that So so there's like I made this actually like in March And Like it's amazing because like the whole point was like this And like the benefits and uses and the goals stays the same but the but the API's would change right and all these are changed and It doesn't matter because like if as long as you get the big picture you kind of get a Hold of it. I mean, I think okay, so I think it's super interesting that they split out schedule Did you did you talk about that at all? Do you want I didn't talk about that at all? Yeah, let's go for it So the scheduler is a big part like a big part of my react rally talk Right was like what makes react react and my argument was that what used to make react react Which was like JSX and the virtual DOM and all that that is no longer React like that's just like a general thing that people do now, right like you has it like so like So like what is react and it's really the scheduler like that that is the core of it everything else you can replace in 200 lines of code and that's what I showed in my talk and But the scheduler you can't because that's a complete rewrite of like the runtime Yeah, so like and then and then also like and then after react rally they open sourced it and split it out of react And then the anchor teams like oh, this looks interesting So that is huge. I mean, I don't know how people are like I mean, so so so his react just like a basically a thin wrapper around the scheduler now with the kind of opinions and like Opinions react and those API's that were accustomed to so so So I think that's overstating it. I think the scheduler is basically more It's more of like a polyfill around the react to or to Sebastian's opinion of how Request animation frame or Chris. I will call that should work Because the platform Doesn't work like that right now for better for worse So they needed the scheduler to do that But the react fiber data structure is still very much react and still very much within So that that's the way to think about it But the scheduler is a separate library, right? And and this could very well be used by other libraries and and we could use we could swap in and out schedulers Just like in rx.js. These are all schedulers. Yeah, so that's a very interesting way to think about it I don't know if it's right. I'm sure we'll learn more react on But like splitting it out is was like big move to me So where does the scheduler live now? It's it's it's its own library Is it is it like available somewhere that you can yeah? Yeah? Oh, I was working on this demo Yeah, here we go. So So so so if you remember JSConf the JSConf demo Why is it not loading I don't know I have that sometimes when I stream to it's like a go-to thing And it's just like takes friggin forever. It was working before. Yeah It better work Actually, I should just pop it out, you know Still can't beat local devs sometimes, you know, I know I totally agree. Hey, so so real quick I asked some people in chat for questions and I got one and I was kind of curious So what seems asking do you feel that setting up the cache read it right on every resource might get repetitive? Or boilerplate II quickly Yes And so that was so you'd actually kind of mention that a little bit that they're they're talking about possibly Adding that cache when you set up the resource so that you don't have to you don't have to add cache every time, right? Yeah, it's something like this But like I think it's very important to understand that reactors no longer like a high-level like it's actually very low level the level to which they want you to understand the API is is much lower than I think people understand is Every like so Most apps are just gonna want a singleton cache, right? So every app every suspense app is is having this like cash the JS thing where you like You import for your cash, and then you like put it in a singleton and you initiate it Which like this could be built in right like but it's not because they want you to write this every single time This also gives you the flexibility to do a lot of stuff in that reset function, right? Like if you need to rebuild the state of the world you right in some ways you can do that Sure Yeah, I mean my argument is like it you know if I if I'm writing this I can write my own Create resource function as well, right put it in here and just throw the cash in there and then export a Create resource function with the cash And then and then I only call I may call this function right and that So so react is very low-level that I mean they like basically don't they just want to give you the primitives to build with and then That you don't use other libraries. You just put it every single time Scratch, I think that's probably Optimistic for some people and people want will want abstraction libraries on top of react To do all this for you. Well, it does seem smart that they have at least right now That react cash is sitting in a different a different library It does seem like there could be a lot of innovation around that You know just like in the same way that like I'm sure that they'll probably be like a GraphQL version of this right or like a yeah, like a reduxy connected thing That like a lot of the opinions then become this like oh sort of using react directly you're going to You can use our library and it's going to manage all that stuff for you Right. So Apollo 3. I think you're announcing it right after react. Okay, so Apollo 3 will have that relay obviously already has it because they've been using it at Facebook and Yeah, I mean, you know, everyone should go right there on cash It's actually not like super hard Kent Kent's done a video on that where he wrote it in an hour And it's and the act cash itself the implementation is about 400 lines of code And it's really readable. So it's like not, you know, it's just like what what are you what are you optimizing for that react cash? doesn't do and it's going to be things like key base Validation or if you want to store things in if you want to you know make your cash like a service worker So you store things in offline or or index TV or whatever So that's actually something I'm exploring like I'm calling it like suspense workers So that I mean basically what we're doing is we're we're making Apps that like install like every reactive app every react suspense app will have a cash Yeah, I mean, it's different from a page where you go back and forth back and forth before with the server We just download it fully running quiet and then you like you work with work within there and then you fetch data Which is like a different way of thinking I don't know anyway Absolutely is but so it seems it seems to me like once suspense goes live Like react cash is kind of demonstrating like the minimum viable product that allows you to opt-in to suspense However, it's extremely it's very likely that there's gonna be a lot of innovation around that and like doing the whole like cash read All that kind of stuff not only is it likely to change in react cash But it's very possible that when we're writing code like when this stuff goes live and like a few months from now that that isn't That's not even the way you're gonna be doing it in your app because you know Given the way that you interact with your data. Maybe there's like a a JSON API like cash resource thing That knows how to like get stuff from Jason API and Whatever like you might be doing something using another library for that completely Yeah cool Also, I also want to press one minor thing. I don't even think react cash is a Is a minimum viable cash like I think this is fairly full-featured They're all going to add key based on validation. So just to show you like they have like preload their You know, so like they have apart from read like you technically only need read and you only you you don't even need like invalidate So And about it. It's just like clearing the whole cash. There's no there's no key to pass it to clear parts of Um, but then they also have preload, which is like completely unnecessary, right? But it's a It's a nice like it's a nice way to like cheat at making your your back end seems super fast because you're just using, you know You're preemptively loading data Not suspending when you while you look so I I'm just like spitballing here But like with preload if I if I'm understanding correctly like you could start preloading data Like as someone hovers over one of those things. Is that my understanding? Yeah Okay, cool. Cool. So so I mean Gatsby is doing that with guest. Yes And that's that's basically you tie it into Google Analytics. So based on the URL of your page But the most likely next page. Yeah But I mean, it's it's really as declarative as like stick it here Right, so I have this okay, that's just like that's just preload everything. I Want to be sensitive viewers of your time you're good right now, right? Yeah, I'm good Okay, really flexible, but like so like basically like, you know, you could say, you know I don't know what I don't know what the next user is right, but let's say we can just say reload I T plus one right and this will load in the background right and this would never be used I guess This will never be used but it will be warm in the cash and then when you go to the next user It would just you know transition immediately because it's already been loaded And what what what's great about this is that this throws right this does the promise this doesn't throw Right you can see that you can see that in the source code and it makes like intuitive sense Where this is this is in the read thing right and in preload, there's no growth It's just like it's not that complicated and like you know because it's an external API every all the complicated logic is Yeah, yeah, yeah, so one thing as I'm as I'm looking in the project The way it's structured hold on let me close it real quick So as I'm looking at the project the way it's structured one thing that that feels That I have a response to personally is I've been spending a lot Like that the last handful of years kind of separating these concerns of like how data is collected and like templates, right? I'm sorry if you go back to your you your code sandbox Okay, and so like I just want really hard like There's this kind of like internal rule or law for me that like I need to separate like data collection from the like actual I don't know styling markup JX whatever um, yeah, and so that like this is like such a hard thing for me to to kind of Get used to as I'm seeing this and is that idea of like I have this kind of I don't know like Component that is just like presentational, but also in there. It like knows how to get the data for itself, right? It's like a different it's a shift for me What am I supposed to say Anything I just I that's weird. I mean you've played with it longer than I I have does that feel weird to you or So, so I had this I had this a while ago when I first started to programming like what is the difference between imperative and declarative, right? And then I used to like my my media reaction was like, oh, yeah imperative is you know It's worse and then declarative is better. Yeah, and and things are either imperative or declarative. It's a hard line In there you should never cross it But then it's so wrong like like, okay, so Let's say we have a class component state equals And then I have a button right on click this dot set state Or whatever Yeah, you get my picture. Yeah, it's just declared. Is this declarative or is it imperative because this is imperative, right? I'm setting state imperatively, but it's declaring that it's just I'm just declaring a function that that's attached to my button Right, right. Yeah, and I make click it it executes this imperative thing But it updates the state and then they re-render is and all that right so like yeah, yeah so I think the line is blurred and we're we're we We get lazy we get used to When things are so like just like you know get API and then it's like ID equals to fetch Right and then so then we'll then we'll go Get API and then then set state Whatever But this would be the way that you're used to doing it, right? But so I guess moving the boundaries Yeah, because the question that I have is that usually what I would do is I would have a component totally dedicated to getting that state and Then I would like compose them together with like a render prop or something like that and This feels a little bit more like connected. I mean, I guess in a way you can do the same thing I mean you could write these these components out as Like render prop Components, but it feels like that's not the golden path right now at least It feels like like the stuff that I've seen is like is this like oh you have this thing and it knows how to like connect to You just connect them together like it grabs that data out of the cash and renders the thing Like you have like an invoice or a person or whatever it just takes 90 years prop and then pulls out of the cash and renders it does both jobs Yeah I don't know. I mean I I think that is it's just moving the the boundaries around between I Just wanted to make sure Something like that, right? So that this this analogy is close to this analogy Yeah, I get where you're going with that. Okay, so so my point is that it's moving around the boundaries of this is imperative This is the carative this like it's just like all right Let's make the whole damn thing declared because this is a super common pattern And let's just give it an official Way to do it. Yeah, and and the point is that it's item This term is very important Which means that you can do it that you say you can do it as many times as you want But the result will not change Given the same inputs So that's the way that it can keep suspending and keep reading So if there's a lot of things right, they'll still suspend once yeah, I come back down again to spend That's that's not accurate. Actually, they will they will actually batch all these suspends up and do it all together Mentally and when you console off stuff out, that's what's gonna. That's what it's gonna look like when they try to render So it's very very complicated and nuance and in the back end. Yeah, yeah but but I mean I like I mean basically like Beads are we turn now reduced to this format, but mutations are not gonna change, right? So you're still gonna want you still gonna want to say like, you know Like Right, and then you still you still call you still do this Then and then you still You know you still pass this and that's a mutation right and that's gonna change and then you're gonna need to invalidate Cash, right so cash Right, so yeah, so you're still gonna need to do mutations manually, but like basically, you know, I think if you were putting things in render props before You would have like okay. That's that's trying to lift up the problems with that, right? so There's Non-blocking sibling It's harder like in order to Right, so there's it doesn't block siblings unless you elevate their Eric You know, I mean like You know, if you want things to show up together, then you have to move The the the loading problem. Let's call it react loadable. Yeah. Yeah You have to move that one level higher. Yeah, all the others right so So what so what we're suspens that you do is this thing they I think they call it referential transparency Do you know about this? I've heard the term. I'm not super familiar with it Okay, which is Sorry, which is that which is the siblings don't have to know about each other. Mm-hmm each other Other and the parents don't have to know what each other Sorry, I'm making up these like talk slides You're just gonna copy and paste this out of it and now you have a talk you're welcome. Thanks for being on the show I guess I mean, okay Okay, so so to me this matters more for react loadable that that you're so tightly coupled between parent and child Yep, where's this one? This is the suspense thing and then this is this is a nice to have rather than This is a result of this happening. Yes, this is a more important point So it sounds like referential transparency in layman's terms just means that the relationship that we have kind of come to understand and internalize in react that is today Are no longer really relevant in this kind of suspended environment Like I think it's just a tension and You can always you can always you can always put placeholders right and then and then the then that breaks you out of And always put suspense on them. That breaks you out of Default behavior. Gotcha. So effectively though it becomes opt-in Yeah, okay interesting like I said change the changes default, right? Yep. Yep. Yep You still do everything you used to do, but you'd have to do a lot more work to do it whereas before You know in cart react you have you can still do everything that you would do in React suspense, but you have to do a lot more work to get there So it's kind of like where do you shift? What do you shift the default around? Right, I don't know if you know this but react suspense is entirely doable in user land except for one thing Right and a lot of people like A lot of people are like, why don't you do this as a higher-order component? Oh, and that's another problem with the render props, right? component 3 Whatever you call it So that gets this gets rid of it because it's just you know a suspender within within that Right, so it just like gets rid of all your loading states and all that You should also you should also by the way also have error bounds Around this right around this around this component So that you catch Errors So it's suspense suspense is very much made to work together Bounds and like I've written probably like three error bounds since they were they were released a year ago And I think the react team is very disappointed in people not adopting error bounds But I mean we're just like used to working without it. Yeah, so oh, yeah, totally Well, I mean you have an example that you can basically just copy and paste out of there and use As your as your error boundary component You know if you're if you're if you don't have a lot of experience using error boundaries You don't have to like invent one. It's like in the documentation and you can just you can just copy and paste it I did that yesterday Yeah, I mean, you know, I get that it's like uncomfortable But like to me it reduces the things I have to do and then there are other things which for which I'm still going to use in a more imperative forms and I don't know. It's just it's just that's work I mean, I think I just think that it's like I think it's a lie Well, it won't lies that we say it's like So let's just like not say that anymore Yeah, I feel like I feel like at first it was like the first live react was that it was like the VNM VC And you're like wait set states all I need to do everything, right? And I feel like now that you It's squarely going into framework territory I Yeah, it's yeah, I totally agree with you there It's it's no longer just kind of this like because I mean up to this point You just had components right like you use react and all you get is a component effectively And like there's there's more and more types of concepts that you have to be aware of to use react now Yeah Yeah, okay a couple of things before I guess we're gonna wrap up soon Couple things I wanted to get across as well is that we're not just fetching data for a resource for resources We can fetch anything and a literal like data means anything So here we're using we're using create resource to fetch a page Yeah, and this is a block of JS code and that's quote That's the dynamic input syntax from either webpack or ES modules Right, so like that's that's a new thing like it. I think I think people May fall into this trap of thinking about caches as key value stores of strings or objects or JavaScript Privates, but it's really not like it's really literally anything because under under underneath it all right if you look at the Here it's a it's a map It's a JavaScript And it's not a it's not an object It's not like it and the thing about I think what year six maps is that they can store anything including functions including Just like anything you want like references So here what here's very interesting like we store an image right create resource And then here is a here's a function returning a promise Right, that's how you create a fetcher and inside the promise in returning an image and storing that And and that's how the image loads together with the rest of the screen. That's really cool It's really cool, and that's really cool. And then and then if you look at them, so Sorry, I'm like nerding out above this stuff. No, no, I love it That's why that's why I wanted to talk with you about it because you're so you're so fired up about it Okay, okay, so so you can also do debouncing you can also do CSS loading I don't have a I don't have an example of that to show you but you can also do debouncing so if you look at The source code again like look at all the tests. The tests are pretty good It's called the advanced The test for react suspense show you how they want you to use They may have removed it I guess they don't want you to use it anymore No, I think I got I got the name. I got the name of delay Basically if because because siblings Siblings suspend each other if you put one if you put a delay or next to Yeah, here we go This is so cool when I saw this I was like, oh, I don't need no dash anymore So look at this delay right it just never resolved or it resolves after 10 seconds So to debounce text you just put a delay component, which is invisible next to a text component And and every time you type this this will this will suspend again And only only once you stop typing in the in the delay time off times out right then this whole thing resolves So that like declaratively does it debounce? I don't know but it's it's pretty interesting I'm not as good at source spulking as you are Yeah, yeah, I mean, you know You know, you're welcome there to check out the links, you know, I think I've basically been covering this for the past six months Yeah, yeah, so so I just like watched everything that everyone says and does So this is like, you know Everything that I know and obviously like that is it What what they have But but yeah, sorry, so so when you look at, you know use cases for suspense I think looking at the test is pretty interesting. Yep bouncing intentional state reloading streaming SSR is not the one I think a lot of people haven't seen Andrew Park's talk inside day. They should definitely check that out like And yeah, and that was a good one too. Yeah, and there that's that one's working with no JavaScript rendering. There's no react dom.render It's just pure JavaScript. I think that's that's something that react is working towards which is a compiled react So there's no a feature of like no runtime. Yeah So so that would be Probably the future direction and this is all of this work is just leading up to that. Yeah. Yeah. Yeah. Yeah I know that there's a lot of There's a lot of fear sometimes associated with like oh man, we're getting all this stuff and what does that mean for me? How do I adjust? What am I required to do? What are the best practices and it sounds like we don't really fully know all those things yet, but that Looking at the test is a good way to see how the react team views the future Which is it which is a really great insight that you you gave us today But then also That kind of there are things further down the road that they're thinking about again Like you're saying like the the no runtime react and I had the opportunity to talk with them On what prepack? Yeah, a little bit and that was really fun Just kind of hearing what they're thinking about doing with with prepack and all the things that they want to do They just make react like just crazy fast And you know since we're all compiling our apps anyway to just get even further down the line with prepack And yeah, so it's really exciting to kind of hear all these visions of things and kind of see the things that may Be responsible for getting us there But yeah, it's funny because like the team kind of like gets criticism for like lack of transparency sometimes But then I'm like what do you want? You know, they can't tell you what you're doing every day Yeah, so yeah, so it's called react fusion is like I keep forgetting the term because I everything starts with f like fire Fusion but I like fusion because fusion like fuses react with prepack Yes, and that's the that's the ahead of time compilation feature Oh, which is very similar like it's funny because like angular is doing that too I just I watched the latest and you come keynote and I don't do angular at all But they were like look at this like now it you know compiles like three kilobyte runtime Yeah, because it doesn't include anything that you don't use. Yeah. That's what Well, it's hard because you know for a lot of us who are like on the ground I mean even even me right like so It's difficult for me to like get my right mind around suspense in these early phases because I oh man I've always separated the data from like my my presentation, right? But the thing is like it if I hold on to certain ideas as like having to be immutable forever in the state of or in react It I would never be able to see some of these things that are kind of like grander visions like that that Runtime react just button up your app and it just it works crazy fast Okay, so so I would say that I would say that I Don't know, but okay, so I said a react fusion is is definitely something new to react and it's something But but react suspense to me is very very much the core react which is make imperative things declarative Yeah, and make make components like the Heart of like how you you know declare and work with you eyes. Yep and so if you notice like when you do components in in the the demo that we talked about The placeholder is a component right and we're suspending and just like declaratively saying at each point It gives us a language like Sebastian actually talks about react as a language. Yeah, and you why language to to to intentionally state Are But so I mean, yeah, so so I think that we have to spend it is a smaller break React then the rest of the stuff that they're hitting sure sure Hey, there's one more question real quick. I just want to get to it So Sammy asks will suspense make page transitions easier for example Keep current page until the next one loads and crossfade Yeah Okay, so So I think the question here is is actually two part because like the first one Yes, you'll have like more fine-grained control over like when those pages transition The crossfade thing though is like I'm curious about and I think that kind of gets to that that route of like shared element transitions. Is that the term for it? No, so shared element transitions is something more I can show you So I did a clone of her app in react So so she did this thing right and this is sure. Okay. I mean, this is what I understand by shared element Uh-huh and and you can tell me if that's what you understand Because that's a different case. So here when I look at watch watch these Elements the transition, you know, they don't disappear, right? Right. It's hard to see on the stream But that I'm taking it for granted. Yeah, I've seen this demo Now I can I can I can find it and I can throw it in chat for people who are also watching this It's page dash transitions.com Okay So so these are shared element transitions and then here here that what they what they have is enter leave semantics so First the page the page that is exiting Transitions out and then the next thing that comes in Transitions in right so it's very so you can do like see so you can't do crossfade unless you unless you have both so superimposed on each other and That's something you you can definitely do it now and react But it's not as it's not as nice because you don't have You just have component will mount you don't have component did mount sorry You have component will unmount but you don't have component did amount. Yeah, there's a missing life cycle Which they've actually talked about there's Yeah, I mean there as far as I know There are plans to to do to add that final life cycle which will which will make it better to do leave transitions For a page that is already on that for for a node for react node that is already unmounted But you keep it around for The purposes for transitioning I see I mean like nothing about reaccess bands Changes any of your CSS So if you know CSS, I think it's I think it's completely fine Okay, cool cool But it does it does it kind of for the first part of that gives you Gives you way better mechanisms to make smoother page transitions In especially in terms of keeping the old page around while you load that data Cool Awesome cool. Well, I think that's good. I mean we've been doing this for a little bit over an hour Um, is there anything else you wanted to say Not all I'm super excited. I think we're gonna talk again at react hop There's more awesome. I mean, I think I think this is much. I think we're I think we're gonna be a thing It's gonna be released next week Yeah, it's already available in the 16.6 canary So it's gonna be in 16.6. Yeah And it's probably gonna be next week. So Look forward to it soon Yeah, and actually we're gonna do a react podcast while we're out there. So that should be super fun. Yeah Awesome well Dude, this was super fun chatting with you. I really appreciate your time and I know will be valuable to a lot of people Thank you for clarifying a lot of things for me because I Obviously didn't know a lot. So I appreciate you spending all this time kind of like collecting those things check out fresh React, is that right? Yeah on your github s dub dash yx Um follow this guy on Twitter. He's got he's got tons of cool stuff. Uh, Swix on Twitter, right? Yeah Cool, hey, thanks so much. I really appreciate you you hanging out with me