What is HMR?

HMR (Hot Module Replacement) is a feature in modern web development tools that updates your app in the browser instantly when you save a file, without doing a full page reload.

Before HMR, the typical workflow was to make a change, save, wait for the browser to reload, navigate back to where you were, and then see the result. If you were filling out a form or several clicks deep into the app, a full reload reset all of that. HMR solves this by swapping out only the module that changed. The rest of the app stays exactly as it was.

It’s especially useful with component-based frameworks like React. If you change the styling or logic of one component, HMR replaces just that component in the DOM while keeping everything else intact, including the current state of your app.

Tools like Vite and webpack have HMR built in. Vite in particular made HMR extremely fast by leveraging native ES modules in the browser, so updates feel nearly instant even in large projects.

I remember when HMR was first introduced in webpack and it genuinely felt like magic. It drastically reduced the friction of building dynamic front-end apps. Now, if I’m working on a legacy project that doesn’t have it configured, the first thing I do is introduce it.