Learn how Vite's Hot Module Replacement (HMR) works under the hood and all the key concepts that power it.
This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.
Learn how Vite's Hot Module Replacement (HMR) works under the hood and all the key concepts that power it.
This talk has been presented at JSNation 2025, check out the latest edition of this JavaScript Conference.
Tools like Vite, Parcel, and Webpack have built-in support for homework replacement, allowing developers to update code more efficiently.
HTML APIs in homework replacement act as hooks in the lifecycle, allowing you to accept changes, dispose of unneeded states, prune removed modules, and invalidate when changes are not as expected.
When a module accepts HMR, the hooks implemented for that module are executed, and any new modules are updated within the accepted boundary.
The server watches for file changes, triggers invalidation and propagation, and informs the client whether modules need to be updated or if a full page reload is required.
The client sets up HTML APIs to receive instructions from the server. It updates the necessary modules or performs a full reload based on the server's instructions.
HMR allows developers to see changes in real-time without refreshing the page, speeding up the development process by allowing faster iteration and testing.
For more in-depth details on HMR implementation in Vite, you can visit Vite's Discourse or follow discussions on platforms like BlueSky or X.
A full page reload is required if no modules can accept changes or if there are interconnected modules where not all can accept changes.
Homework replacement, also known as Hot Module Replacement (HMR), allows you to update your code without having to refresh your page. It enables immediate viewing of changes in your browser when updating components or adjusting styles.
Welcome to JS Nation. Homework replacement, also known as HTML, allows code updates without page refresh. Tools like Vite, Parcel, Webpack have it built-in. Understanding HTML involves APIs, server reactions to file edits, and client-side handling of changes.
Hello. Welcome to JS Nation. I'm Bjorn. I want to talk about homework replacement today. So homework replacement is a big topic. Hopefully, this talk will make it more easy to understand for you and more digestible.
So let's jump right into it. What is homework replacement? Homework replacement is also known as HTML. It allows you to update your code without having to refresh your page. So when you update your components or adjust your styles, you can immediately see the changes in your browser. It allows you to iterate much faster than having to wait for the bundle to finish.
So if you have used tools like Vite, Parcel, Webpack, for example, in this right-side here, this Vite logo, and also on my shirt here, this Vite logo, it's where I'm a co-team of. So they have homework replacement built in. So if you have used them, you likely have already experienced something like this in practice. So let's jump to how it really works inside them. So there are different ways to understand HTML. It's quite a big system.
So there's kind of three things that we can look into from the point of view. There are HTML APIs, where you implement how the module replacement is actually done. There is the flow from the server, so when you edit the file, how the server reacts to it. There's also the flow from the client, so the browser will try to handle changes from the server. These three things we're going to cover next. So HTML APIs, you can think of it as hooks. In the HTML lifecycle, sometimes you would have to accept changes when a new module comes in. So this hook tells you that you can accept changes. You can do the replacement. So you'd attach a callback so that you do the necessary changes there. There's a disposal if you need to dispose any unneeded states.
You'd attach a callback for necessary changes. Dispose unneeded states, prune removed modules, and invalidate unexpected changes. Lifecycle involves disposing, accepting for replacement, updating, and pruning modules. Accept new modules, handle imported changes, and mutate states using hooks.
So you'd attach a callback so that you do the necessary changes there. There's a disposal if you need to dispose any unneeded states. For example, you have a state there is no longer use before the updates, you do it there. There's a prune if you have a module that's removed. For example, if you remove an import, and you don't need it, you can remove the state completely. And there's also invalidate. This is less a hook, but more like a like an action. But we touch on it later, where if you have the changes suddenly not going as expected, you can call this to restart the loop HTML again. So you can look at the graph on the right side, you can see that when you have a file, you can set up the HTML callbacks here. So you can use the hooks around here with these APIs. And then whenever update the file, you call dispose, and then you call accept to do the replacement, and then we update again and perform the same thing again. And then we delete the file, you dispose, and then finally you call prune. So this is more or less the lifecycle for each modules.
So accept, you can have two signatures, if you're using practice, you can accept the current module. So a new module comes in you accept it and the replacement. You can also accept changes from the imported modules. Maybe this is what you care about, you can do the changes there. And then you mutate any state that you want. And this hook usually just handle a vplugin, so if you install a react-vue-svelte-vplugin, this is basically what they're doing under the hook. It's a bit more isolated because components are more isolated in Vue-Svelte components. So the changes are more idiomatic than what's shown here, but roughly they're using this hook to do the changes that they need to. And this is the most important part of the HTML API to think about for accepting. There's also dispose and prune.
Here's an example. You can use dispose to reset a global state if you're not using it. You can also delete the state if the module is not used at all. So this is some ways that you can also use the hook callbacks and there's also invalid. So in this example here, you try to accept callback, but something strange is not working. So you're gonna bail out, and then invalidate. So this is just one use case, you can use invalidate for.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments