Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Introducing Hot Module Replacement" 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 introduces a webpack feature called Hot Module Replacement (HMR) that helps replace old modules with the newer ones without stopping the rest of the code from running.

Get Unlimited Access Now

Transcript from the "Introducing Hot Module Replacement" Lesson

[00:00:00]
>> Brian Holt: Now, we're gonna be talking about Hot Module Replacement which is a technology that is really awesome with React due to the nature of how React apps are constructed. It lends itself to this technology really well whereas previously other technologies like Angular and Ember, it was just impossible to detangle them enough to be able to do something like this.

[00:00:21] It was still kind of a evolving and thrashing technology, but I feel finally comfortable now teaching it, whereas previously for version 1 and version 2, it was still kinda new enough that it wasn't worthy of teaching. So let's talk about what it actually is. I imagine many of you have done live reload before with CSS.

[00:00:42] The idea being that as soon as you change your CSS, it'll compile your new CSS, and then it will inject it into your running browser, right? This is a really tool technology, because you can be working on a menu that you have to click once, twice, three times to get into some particular state of your app.

[00:00:59] And when you do live reload, it'll inject the CSS, so you don't have to refresh the page. It'll just rewrite all the styles for you, right? This is really nice, because you don't have to click, click, click, to get back to that same state. It really cuts down on that feedback loop of being able to iterate quickly on whatever user interface is your writing.

[00:01:17] Hot module replacement takes this one step further. Webpack is actually smart enough to see the graph of everything, what depends on what, right? So an example of that would be if I come into search.jsx, right, it also depends on ShowCard, right? But if I go into landing, landing has no coordination with ShowCard at all.

[00:01:39] So if I modify, for example, ShowCard Search is going to have to be replaced, right, because it also depends on that. But landing can stay right where it is, right? So it's drawing this big dependency graph. In fact, I think I actually have a little graph here in my notes, maybe.

[00:02:00] Right there, right? So this is what I'm talking about. So if I replace ShowCard I can actually just change ShowCard and leave everything else as in, right? Well, Search and Search is gonna have to be replaced as well, but Landing can stay right where it is. So, armed with this knowledge Webpack can say cool, I'm gonna cut off this part of the graph, replace it and leave the other parts of the graph in place, right?

[00:02:23] So it's able to this on the fly without refreshing your browser at all. Hence, Hot Module replacement. It's really cool, I'm excited to teach it to you. And it's not so difficult to set up, I'm not gonna say it's easy, but it's not horrible [LAUGH]. Let's go with not horrible, that's what I'm going with right now, okay?