What is HMR (Hot Module Replacement / Hot Reload)

The webdev world is laced with acronyms, and HMR is on that list. What is it? Find a brief explanation here.

To understand what HMR is you first need to understand what a build tool is. If you do not know then you can read this article but it's essentially what you use to automate all your HTML, JS, CSS, and image processing ready to be deployed.  Most popular examples are webpack and Vite.

Just a side note... Hot reloading and HMR are usually used interchangeably.

So what is Hot Module Replacement

Hot module replacement is the ability of your build tool to reload part of your app (individual modules) when they change, without having to rebuild your entire app. In practice this looks like:

  • You save a the file you're working on in your code editor
  • That change is reflected in your browser while the app is running
  • This happens without loss of current app state.

So say you want to make a small change, such as the text on one of your webpages, instead of the entire app recompiling and reloading totally in your browser it'll just hot-swap out the text for the page you're currently viewing.

How is it different from live reload

With live reload technology (what came before hot reload) your build tool would simply detect that a file had changed and automatically refresh the webpage. This change would cause you to lose app state e.g scroll position, text forms state and if you're making an SPA without proper routing it you might lose what page you're on. Hot module reload fixes these problems, it feels like you've just modified the values in the dev tools.

How does it work

This is a very complex question and bundling tool handles it in a unique way. webpack has a good high level overview of how it works here.

Just a quick article today, but hopefully helpful.

If you want to you can find me @SimonHarrisCo