A full page reload completely resets the application state by re-requesting all resources, while an HMR update replaces only the changed modules in memory, preserving application state and runtime context
The fundamental difference between a full page reload and an HMR update lies in what gets preserved and what's re-executed. A full page reload is like restarting your entire application—the browser navigates away from the current page, clears all JavaScript state, and re-requests every resource from the server. An HMR update, by contrast, surgically replaces specific modules in the running application's memory, allowing the rest of the application to continue executing uninterrupted. This preserves application state, form inputs, scroll positions, and ongoing animations, making the development feedback loop significantly faster and more pleasant.
Destroys all JavaScript state: Every variable, component state, and module export is lost .
Resets the DOM: The browser constructs an entirely new DOM tree from scratch .
Clears runtime context: Event listeners, intervals, and WebSocket connections are terminated .
Re-requests all resources: The browser fetches HTML, JavaScript, CSS, and assets anew .
Time cost: Typically 800ms-3s depending on network and application size .
Preserves JavaScript state: Unchanged modules continue running with their existing state .
Surgically updates the DOM: Only elements affected by changed modules are updated .
Maintains runtime context: Event listeners not attached to changed modules remain active .
Fetches only changed modules: The browser requests only the files that were modified .
Time cost: Typically 50-200ms regardless of application size .
The difference becomes dramatically apparent in real-world workflows. Consider editing a component's styling while testing a multi-step form. With a full page reload, you'd lose all form inputs and have to re-navigate through the steps. With HMR, the styling updates instantly while the form data and navigation state remain intact. This preservation of context is what makes modern frontend development feel fluid and productive .
Even with HMR, full page reloads occur in specific scenarios: when you edit a file that doesn't have an HMR handler, when you change a module that no accepting parent can handle, when you modify the HTML entry point, or when the HMR boundary can't propagate the update due to circular dependencies . Vite attempts to recover but will trigger a full reload when necessary .
Some older tools use live reload, which automatically refreshes the page when files change but provides no state preservation. HMR is a significant evolution beyond live reload because it maintains the application's runtime state. The difference is analogous to hot-swapping a hard drive in a running server versus shutting down and restarting the entire machine .
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
