Hot Module Replacement - HMR

Hot Module Replacement (HMR) is a web development technique that allows code changes to be applied instantly in a running application without requiring a full page reload. This significantly improves development productivity since the application's state (e.g., user input or UI state) is preserved.

How Does HMR Work?

HMR is used in modern build tools like Webpack, Vite, Parcel, or esbuild. The process works as follows:

1. File change detected – When you save a file, the HMR system detects the modification.
2. Module recompiled – Only the affected module is rebuilt, not the entire codebase.
3. Update injected into the application – The new code is loaded into the running JavaScript or CSS module.
4. State is preserved – If configured correctly, React states, Vue reactivity, or other UI states remain unchanged.

Benefits of HMR

✅ Faster development cycles – No need for full-page reloads.
✅ Preserved application state – Useful for React, Vue, and other SPA frameworks.
✅ Instant CSS updates – Style changes appear immediately.
✅ Improved DX (Developer Experience) – Reduces workflow interruptions.

When Doesn't HMR Work?

• With major changes, such as modifications to global variables or application configuration.
• If the framework or library does not support HMR.
• HMR is not used in production environments—classic reloading is preferred.

Example with Webpack

If you're using Webpack, you can enable HMR like this:

if (module.hot) {
  module.hot.accept('./module.js', function() {
    console.log('Module updated!');
  });
}

This ensures that changes to module.js are applied without restarting the entire application.