Member-only story
Handcrafting your own HMR
Hot Module Replacement (HMR) is a feature that allows you to see changes in your code instantly, without needing to refresh the entire page. It’s an essential capability in modern frameworks like React, Vue, and others. With HMR, only the module that has changed is reloaded, preserving the internal state of your application, which would otherwise be lost during a full page reload.
In this article, we’ll show you how to craft your own HMR solution from scratch, without relying on modern tools like Webpack or Vite.
Note: We’ll be using a simple example to implement HMR in a raw HTML project. Implementing HMR in frameworks like React can be more complex, as it involves preserving state and managing side effects. However, this article will give you a solid foundation for understanding the architecture behind HMR, which you can build upon for more advanced use cases.
To implement HMR, we need to solve three key challenges:
- Detecting Changes — When a file is modified, we need a way to inform the browser about the update.
- Replacing the Code — Once the browser knows about the update, we need to swap out the old module with the new one.
- Handling Updates — The application needs to decide how to apply the update. For example, if its a component, do a re-render. If its a store, notify…
