Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Creating Search and Details Bundles" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Brian finishes creating the Search and Details code bundles. Brian takes questions from students. - https://github.com/btholt/complete-intro-to-react/tree/v3-29

Get Unlimited Access Now

Transcript from the "Creating Search and Details Bundles" Lesson

[00:00:00]
>> Brian Holt: Let's go make our other routes enabled. Let;s go to app.jsx, I want you to delete both details and search.
>> Brian Holt: After this, I will push another branch.
>> Brian Holt: And what I want to do here, just make sure I get this correct.
>> Brian Holt: I'm gonna do another async route

[00:00:36]
>> Brian Holt: Props is gonna be equal to props.
>> Brian Holt: Actually props is going to be equal to Object.assign.
>> Brian Holt: We're gonna have an object of shows. Cuz we're gonna have to pass in preload.shows cuz that's what we were doing before.
>> Brian Holt: Comma props, so we're making sure that we're also bringing in all the props as well.

[00:01:14]
>> Brian Holt: So that's object.assign, that's the end of props.
>> Brian Holt: And then here we're also gonna have to pass in loading promise which is going to be equal to import search ./search. That should be enough.
>> Brian Holt: Okay, so that's our second route.
>> Brian Holt: And then the last route here, we are gonna have to mess around with this component here.

[00:01:49]
>> Brian Holt: So down here what we are going to return is, instead of returning details right here, we are going to return AsyncRoute. props is going to be equal to,
>> Brian Holt: Again Object.assign.
>> Brian Holt: And show is going to be selectedShow.
>> Brian Holt: And do we really need that? I don't think we need that.

[00:02:33]
>> Brian Holt: And props.
>> Brian Holt: Okay, so to placate the type checker, it's saying hey I need you to guarantee me that match is coming because details depends on match if you remember that. So just it placate the type checker, just to make sure that always comes through, is we're gonna pass it match that way.

[00:03:13]
>> Brian Holt: Oops, match
>> Brian Holt: What would happen there?
>> Brian Holt: I wanna say match:that. Okay.
>> Brian Holt: Now, what are you mad about?
>> Brian Holt: And you need loadingPromise, obviously. So the other thing you could do if you didn't want this typo is you could go make match a maybe type, and then do default props and that would work okay.

[00:03:58] I don't really have a problem doing with this either way, so up to you. Loading promise is going to be equal to ./details. So again, another reason why I loved flow here cuz I totally forgot to put loading promise on there. But flow was quick to say, hey you promised me this loading promise was coming in, where is it, right?

[00:04:20] And it just instantly reminded me to do that. So it's just very tight feedback loop coming from the type checker.
>> Speaker 2: Don't you have to import that?
>> Brian Holt: You do, thank you. Import, so again, if you see right there, it was erroring out. It was saying you're passing me a string and I want a promise.

[00:04:48]
>> Brian Holt: Okay, so now if we go to our Webpack console, we should see three different bundles, right? So if we go down here all the way to the bottom, you're gonna see 0.bundle, bundle.4, bundle.5. So it's actually being quite a bit stuff going out here. And a lot of times like it's bundled in weird and mysterious ways.

[00:05:10] Sometimes you'll have two bundles that'll share a library so it'll split that out into a yet different bundle. So that the last bundle doesn't have to get it, and only the other two have to get it. It does some really clever stuff that it's only possible if a machine is analyzing your dependency graph and not you.

[00:05:29]
>> Brian Holt: So again I've got bundle and 5.bundle.js. As soon as I go to Browse All, I'm gonna get 0. And as soon as I go to the last one, I'm gonna get 4. And then again I can go back and it's not going to request it after that because it is already in the cache.

[00:05:45] And webpack is very good about keeping that cache so you can just keep handing it to it, so pretty awesome. Any questions about that?
>> Brian Holt: Well, let me pose a question on your behalf.
>> Brian Holt: We're doing server side rendering and if you look at our server side rendering.

[00:06:08] Well, we're not doing server side rendering right now but when we do server side rendering, I think we could just do it right now. Yeah, it should work. Yarn, start. Shut that down.
>> Brian Holt: Whatever, screw you, hot module reload.
>> Brian Holt: If you look here at the output of it, we're getting the loading spinner as the output, right, because the first load is going to be the loading spinner.

[00:06:46] That's what we expect. So this is the dark side of splitting your code is this is not really a good way of doing service side rendering and code splitting because those initial renders are never going to match up. And so what's gonna happen is you're gonna load that markup, and say you're able to inject that component so it's loaded synchronously on the server.

[00:07:11] It gets sent down to the client, React is gonna say, this is different than what I render. My first render is a loading spinner, I'm gonna blow this away. Then it blows it away, puts the loading spinner up, and then it's gonna reload the one that you have.

[00:07:24] And right now it's kind of an unavoidable problem. Just by the architecture of webpack we really can't get around it. We're working on it is the answer to that question. The webpack team's aware of it. There's a couple, James Kyle put out a component called React Loadable that kind of seeks to sidestep it.

[00:07:46] But suffice to say that for today we're not going to be able to sidestep it. So, server side rendering and code splitting are kind of choose one right now. And it's kind of up to you to decide which one's the best one.
>> Brian Holt: Don't get me wrong, you can do both.

[00:08:03] There's some difficulties in getting it to work.
>> Brian Holt: Any other questions?
>> Speaker 3: So for our purposes we just have to change the web pack config, right, from the server side to the client side with the HMR? Like when we redid this did we change it back to what the-

[00:08:26]
>> Brian Holt: The dev server?
>> Speaker 3: Yeah.
>> Brian Holt: Yeah, I did, but it's easier to work with.
>> Speaker 3: Yeah.
>> Brian Holt: Yeah.