Hot Module Replacement
Updating code in a running application without requiring a full page reload.
Definition
Hot Module Replacement (HMR) allows developers to update JavaScript modules in a running application without triggering a full page reload. When code changes, only the modified modules are replaced while preserving application state.
HMR dramatically speeds up development iteration by maintaining state during styling tweaks and logic changes. Modern frameworks like React, Vue, and Vite have built-in HMR support.
Why It Matters
HMR transforms the development experience by reducing the feedback loop from changes to visible results. Maintaining state during updates is especially valuable when debugging complex interaction flows.
Fast iteration cycles enabled by HMR improve developer productivity and satisfaction.
Examples in Practice
Changing a React component's styling and seeing updates instantly without losing form data.
Vite's HMR updating individual modules within milliseconds of file save.
Preserving authentication state while iterating on dashboard component layouts.