Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Hot Module Reloading" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

While this course does not cover Webpack features like hot module reloading, Brian spends some time talking about why it can be useful and when you can run into problems using it with React.

Get Unlimited Access Now

Transcript from the "Hot Module Reloading" Lesson

>> [MUSIC]

>> Brian: At this point in time, I want to leave a little note on hot module reload. It's one of the exciting parts of web pack, exciting parts of react. Not going to cover it today and the reason for that is it's, in my opinion, again another opinion, it's not fully baked yet.

[00:00:20] It doesn't totally work the way I expected to and I hate wrestling with my tools like it's just one of my least favorite things to do. I want to be writing code, I don't want to be wrestling trying to get things to work. And hot module reload you tend to have to wrestle with a little bit, a lot actually.

[00:00:38] And most importantly it doesn't work with stateless functional components, and I love stateless functional components, and I'm not willing to give those up right. Again when I'm talking about stateless functional components, I'm talking about components that look like this. Reason being is that hot module reload doesn't have the opportunity to instrument these, right, because they are just functions.

>> Brian: Hot Module Reload doesn't have a way to hook into these to basically allow you to hot module reload. Now what is hot module reload? The basic gist of what hot module reload is, say I went in here, and I changed the title of svideo in my code and I click save.

[00:01:14] What Webpack is gonna do is it opens a connection to your browser and says, here's new code that he just saved. It doesn't reload the page, it actually hot, on the fly reloads your code in the browser. And that's pretty compelling, bcause you no longer have to refresh your page to get your changes right away.

[00:01:34] So if you're like, excuse me, when I'm working on a drop down where you have to click and then click again and then click again to get to the state that you need to test, that's super useful because you can just see your code changing without having to click in every single time you refresh the page, right.

[00:01:50] And when you're doing user interface testing, maintaining that state is a really useful way to maintain their mental context, right? There's a tool called Live Reload that does it for CSS, which I would suggest you all use when you're doing your CSS. That does the same idea that every time you save your CSS it just reloads it in the browser, and you don't actually have to refresh the page.

[00:02:10] Hot module reload is the same idea, but with JavaScript. So it does work decently well if everything is not stateless functional component. You do have to instrument your code a little bit to get it to work, but it's not terrible, so I'll leave it up to you to implement it.

[00:02:30] It's a little bit of a pain and to be totally honest with you that the author of Hot Module Reload for React is this is the same guy that did redux, Dan Abramov, who is not only a really nice guy but is super super smart. He says himself the hot module reload for react is a hack.

[00:02:46] It's a great hack, but it's still a hack, and I tend to agree. He has a new tech coming out called battle transform. That'll work kind of the same way just in different method, that'll work better. But that's still a emerging technology. So it was too alpha E for me to feel comfortable talking about today, so I'll leave that to your own devices just I don't personally use it.

[00:03:12] Again, because I don't wanna wrestle with my tools, but once you get it working it actually is pretty cool. Any questions on hot module reload? With the caveat that I haven't used it extensively, so I don't have too much knowledge on it, okay.
>> Speaker 2: So there is a functional stateless components when you use them with the module reload?

>> Brian: They just don't refresh. Yeah, that's the that's the gist of that. Which is really frustrating that some components will reload and some won't. And that cognitive load of trying to figure out which ones will reload which ones won't is not worth it, right? Because if you have a stateless functional component above it, that won't refresh unless everything's broken.

[00:03:58] You can have functions or state full components underneath it, and those won't reload either because the parent won't reload. I think, again, I’m not super sure, but it’s okay. That's a good question. From Erica is hot module reload appear they're reacting? It's not. It's a Web pack thing, and anything that plugs in a web pack can.

[00:04:24] As far as I know react is really the only one working on it like their little community that cares about it right now. That might be true of maybe Angular 2 might do it. I don't know anything about Angular 2, so don't ask me. But it's a Web pack thing, anything they can plug in the web pack can do it.

[00:04:41] So I just haven't heard anyone else doing it yet, and I think it has to do with the architecture of react that it lends itself to hot module reload. Angular one definitely just would not be able to, it's two coupled together. Well I'm not gonna assert that it can't be done, I'm just gonna assert that it isn't being done, and it would be hard to do.