Intermediate React

Intermediate React Loading Modal HTML Asynchronously


This course has been updated! We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Intermediate React course:
The "Loading Modal HTML Asynchronously" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Defer loading the contents of a component with React Loadable. Brian shows using React.Fragment to render multiple top level elements in a component.

Get Unlimited Access Now

Transcript from the "Loading Modal HTML Asynchronously" Lesson

>> Brian Holt: How can we make this even faster and even better? Well, so when I load this page, let's go back to the Adopt Me page.
>> Brian Holt: So when I click on Details, I do want this to be as fast as possible, right? So whenever I click on this now, I make the user wait for more JavaScript to be downloaded, and that's 745 kilobytes.

[00:00:20] That's a lot. That's a long time for someone on like 3G or 2G to wait for a page to be downloaded. So how can I speed that up? Well, there's a feature called Service Workers which are amazing. Front end masters has great PWA content, so that's definitely something to check or just search for progressive web apps.

[00:00:40] So Service Workers are these features that you can install on your application which I'm not gonna show you how to do today. But what you could do is you could use a Service Worker in the background, that after you make that initial page load to go out and do a secondary fetch to fetch all the rest of the bundles.

[00:00:54] And the way you do that is you can have Parcel generate a JSON of all the various bundles that are created, right? Have your Service Worker load that particular JSON object and go out and make all the additional requests so that it can already cache those things after the initial page load.

[00:01:09] Cuz what you care about is you want the first page load to be super fast, and then in the background you can hurry and load everything else in the background. So rather than making the user wait for this one to, I mean look how long it's taking. This is the local host, right?

[00:01:22] That's a little crazy.
>> Brian Holt: You can have your Service Worker go in and load all that stuff in the background so when you call that import promise, it's instant. So that's a really cool feature of Service Workers.
>> Brian Holt: Okay, one last thing. I wanna show you that you can split on other places besides routes.

[00:01:43] Routes are a good place to do it. That makes sense but there are other places you can do it as well. Like if I'm on this page what other code could I split out here? I mean I guess I can split out the carousel, but that would be really weird because we'd load the first part of the page and then this part would still be loading.

[00:02:00] And it wouldn't make a lot of difference or sense to do that. But we have this modal, right? That doesn't get shown right up front, we could split that out. So how would you do that? What we wanna do is we wanna load this modal content into synchronicity right here, right?

[00:02:18] So we wanna make a new file and call it,
>> Brian Holt: What did I call it here? Adopt modal content. AdoptModalContent.js. This is gonna be inside of your source directory, and it's gonna be pretty simple. So it's gonna import React from react, and const Adopt ModalContent = props,
>> Brian Holt: And it's going to return something here in this function body.

[00:02:51] We'll do that in a second, and we'll export default AdoptModalContent.
>> Brian Holt: So now I wanna pull everything out of this modal in here and I wanna put it into here. So for now, I'm just gonna copy this and I'm gonna put this here.
>> Brian Holt: We have a problem with this, though.

[00:03:17] If you remember from our React course, you can only have one top level element,
>> Brian Holt: Right? So this doesn't actually work yet, because I have the H1 and a div that are top level. Now, in previous versions of React, what I would have done is just wrapped everything in a div, and I would have been fine.

>> Brian Holt: But this is how you end up with, quote unquote, div soup, right? You end up with having just 10,000 unnecessary divs. It's not necessarily that really bad of a thing but React 16 introduced us the ability to do this thing called fragments. So we can say react.fragment and now this works.

[00:03:56] So this does not actually render anything on top level, it just renders this fragment together.
>> Brian Holt: When they have the new version of JSX you will be able to just do this.
>> Brian Holt: And that's what a fragment will look like. But if I save this right now Parcel would blow up, cuz Parcel doesn't know what to do with that.

>> Brian Holt: And so let's stick with that,
>> Brian Holt: And here we're gonna have to change this to props as well.
>> Brian Holt: Going back into details, so instead of having this stuff right here, I'm gonna have this be,
>> Brian Holt: LoadableContent or something like that. So, yeah, that's what I called it, LoadableContent, like that.

>> Brian Holt: But this still has to receive the toggleModal so we'll keep that as well, this.toggleModal.
>> Brian Holt: And name=name cuz those are being passed into Props up here. Did I get that? Yeah, here I have to say, sorry, as well,
>> Brian Holt: Right there on line 5 of AdoptModalContent.

>> Brian Holt: And then I'm gonna go back to the Details page. Now we have this little content so we have to go make that above here, so we're gonna go and do that,
>> Brian Holt: Then when I say const LoadableContent = Loadable,
>> Brian Holt: loader,
>> Brian Holt: And we're gonna say import./AdoptModalContent.

[00:06:04] And loading is gonna be some function that returns loading content or something like that.
>> Brian Holt: Yeah, it's gonna be upset by that. Fine, whatever.
>> Brian Holt: Still upset about that? No, that's fine.
>> Brian Holt: Yeah, you have to load that.
>> Brian Holt: Import, Loadable from ./Loadable, not dot slash, react-loadable.
>> Brian Holt: There we go.

[00:07:12] Okay, so now, if I'm gonna click Adopt, and you're gonna see down at the bottom it's gonna load adoptable content right here. And you'll see a little bit delay between when I load it and the content actually shows up. Very, quite quick. But let's see, we could probably get this with 3G, so if I loaded this page now on 3G, this is what it's gonna look like.

[00:07:35] This is gonna load the first bundle, which is gonna take a while cuz none of this is G zipped, none of this is mini-fied or anything like that.
>> Brian Holt: Now you might be thinking, that was pretty slow, and we had to wait quite a bit of time for that loading content.

[00:07:56] But think if we had been loading everything else as well. We would have waited a lot longer. And so if I click here, Adopt Theo, still pretty quick, but that's because this is a tiny bundle, 8.39 kilobites un-G zipped, unmini-fied.