Understanding Hot Module Replacement (HMR)

You’ve changed one line of code, hit save, and watched your app update instantly, no refresh, no state loss. Feels like magic, right?

That magic is Hot Module Replacement (HMR), one of the most underrated yet game-changing features in modern frontend development.

1. What Is Hot Module Replacement (HMR)?

Hot Module Replacement (HMR) is a mechanism that allows your app to update modules in real-time, without reloading the entire page.

Instead of starting your app from scratch, it just replaces the changed parts, keeping everything else intact, including your React component state, scroll position, and even in-memory data.

2. Live Reload vs. Hot Module Replacement

Live reload simply refreshes the entire browser when a file changes, which means you lose all current state and navigation context. HMR, on the other hand, patches only the changed modules, preserves state, and updates the app instantly. This makes development much faster, smoother, and less disruptive.

3. How HMR Works Under the Hood

Let’s peek under the hood.

Step-by-step breakdown:

1. You save a file → build tool detects change.
2. Dev server sends a message (usually via WebSocket) to the browser.
3. The HMR runtime compares module hashes.
4. Only changed modules are re-imported or re-evaluated.
5. Your app updates without losing state.

4. Example: HMR in Action (Vite)

Vite and modern bundlers make HMR incredibly simple:

if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    console.log('Module updated:', newModule);
  });
}

Here’s what’s happening:

• import.meta.hot exists only in dev mode.
• When the file changes, the runtime calls your handler.
• You can then re-render or apply updates seamlessly.

5. A Short History of HMR

HMR was popularized by Webpack in 2015. Since then, modern tools like Vite, Next.js Fast Refresh, and Parcel have reimagined it using native ES modules and smarter patching strategies, making hot updates nearly invisible.

6. How Different Tools Handle HMR

Different tools implement HMR differently:

• Webpack uses runtime patching via WebSockets and supports state preservation with frameworks like React or Vue.
• Vite leverages native ES Modules plus WebSockets, giving extremely fast reloads.
• Parcel combines WebSockets and a runtime overlay, making it zero-config and automatic.
• Next.js builds on HMR with Fast Refresh, a React-aware refresh system that preserves component state intelligently.

7. Tiny Demo: Building a Minimal HMR System

Want to see what’s really happening behind the scenes? Here’s a minimal HMR runtime built with Node.js + WebSocket:

dev-server.js

import WebSocket from 'ws';
import fs from 'fs';

const wss = new WebSocket.Server({ port: 1234 });
fs.watch('./src', { recursive: true }, (event, filename) => {
  wss.clients.forEach(client => 
    client.send(JSON.stringify({ file: filename }))
  );
});
console.log('HMR server running on ws://localhost:1234');

client.js

const ws = new WebSocket('ws://localhost:1234');

ws.onmessage = ({ data }) => {
  const { file } = JSON.parse(data);
  import(`${file}?t=${Date.now()}`).then(() => 
    console.log(`${file} hot updated!`)
  );
};

This simple setup:

• Watches your source files for changes.
• Notifies the browser via WebSocket.
• Dynamically re-imports the changed module without a page reload.

8. Why It’s a Big Deal

HMR isn’t just about speed. It’s about preserving developer flow, that uninterrupted rhythm where ideas move faster than context switches.

When HMR works well:

• React components retain state across edits.
• CSS updates apply instantly.
• You stay focused on solving problems, not waiting for reloads.

9. Final Thoughts

“HMR isn’t just a feature, it’s a rhythm. It keeps your code, your browser, and your brain in sync.”

Next time your app updates without a full refresh, take a second to appreciate that invisible WebSocket quietly keeping your flow alive.

👋

Hey, I’m Ram krishnan, I love breaking down complex engineering concepts into clear, visual stories. From frontend systems to developer tooling, I write about what makes engineering efficient, elegant, and enjoyable.

Follow me on LinkedIn or Medium to learn together.