Intermediate React

Intermediate React Code Splitting Without Loadable

Topics:
Brian Holt
Brian Holt
Stripe

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 "Code Splitting Without Loadable" Lesson is part of the full, Intermediate React course featured in this preview video. Here's what you'd learn in this lesson:

Brian refers back to v3 of the course if you want to see implementing lazy loading components without using React Loadable.

Get Unlimited Access Now

Transcript from the "Code Splitting Without Loadable" Lesson

[00:00:00]
>> Brian: So that's code splitting. I've given you all the tools now pretty much to do whatever you want with the code splitting. It doesn't really get a lot more complicated than that. It really is, if we're looking at our code here, here in details,. This is the key right here.

[00:00:16] It's this import function right here. This is just signaling to
>> Brian: Parcel to go out and fetch this and then this returns a promise. And when you call dot then on the promise this will give you the module inside of the promise body. That's just how it works.

[00:00:34] So now, it's not any more complicated than that. We could actually write this ourselves. And in fact, in version three of this, I make you write it yourself cuz it really isn't very complicated. Probably even just pull it up here real quick. Complete intro to react.
>> Brian: Let's see.

[00:00:52] Repo.
>> Brian: And if you look in the js here, Async Route here, this one .jsx file. This is about it. So on component to mount, you take the loading promise and call dot then when the module finally arrives. And I just set this dot component equals module dot default, and then you set, this is loaded, and then down here.

[00:01:24] If it's loading you show the spinner. If it's not loading then you show the component.
>> Brian: So loadable does a little bit more. It has retry logic and some other fancy stuff, but at its core, it's nothing more than this.
>> Brian: In other words, you could write this, right?

[00:01:44] And you could write loadables. There's no black magic here.
>> Brian: So again, if you actually wanna go through that process just check out the version three of this course. Last thing about code splitting.
>> Brian: If you need to check out the branch and see this later, it's the name of the branch is code dash splitting.

[00:02:09] And that is at the bottom of that page. Of the codes splitting in the course notes.