What is hmr?

Hot Module Replacement (HMR) is a feature used in web development tools that lets you swap, add, or remove modules (pieces of code) in a running application without needing to reload the whole page. It updates only the parts that changed, keeping the rest of the app and its state intact.

Let's break it down

  • Module: A small, reusable piece of code, like a JavaScript file or a component.
  • Hot: Means “on the fly” - the change happens while the app is already running.
  • Replacement: The old module is replaced with the new version. When you edit a file, the development server detects the change, recompiles that file, and sends the updated code to the browser. The browser then swaps the old module for the new one without a full page refresh.

Why does it matter?

  • Speed: You see changes instantly, which speeds up development.
  • State preservation: The app’s current data (e.g., form inputs, UI state) stays the same, so you don’t have to repeat steps to reach a particular screen.
  • Better feedback loop: Faster iteration helps you catch bugs early and experiment more freely.

Where is it used?

  • React: With tools like Create React App, Vite, or Next.js.
  • Vue: Via Vue CLI or Vite.
  • Angular: Through the Angular CLI’s built‑in HMR support.
  • Other frameworks: Svelte, Ember, and many bundlers (Webpack, Rollup, Parcel) offer HMR plugins. Basically, any modern front‑end project that uses a development server can enable HMR.

Good things about it

  • Rapid development: Immediate visual feedback reduces waiting time.
  • Keeps app state: No need to reload the page, so you don’t lose UI state or data.
  • Improves productivity: Developers stay in the “flow” longer, leading to fewer context switches.
  • Customizable: You can decide which modules accept hot updates and which trigger a full reload.

Not-so-good things

  • Complex setup: Some frameworks need extra configuration to work smoothly with HMR.
  • Potential bugs: Hot updates can leave the app in an inconsistent state if a module isn’t designed to handle replacement.
  • Not for production: HMR is a development‑only feature; it adds overhead and should be disabled in live sites.
  • Limited to certain changes: Some changes (like altering global variables or certain configuration files) still require a full reload.