Hotreloading

Hot reloading, also known as hot module replacement (HMR), is a development-time feature implemented by module bundlers and development servers. It replaces updated modules in a running application without a full page reload, often preserving state. It improves developer feedback and speed. It is distinct from live reloading, which performs a full reload of the page.

The mechanism involves monitoring source files for changes, compiling the updated modules, and sending them to the running application in the browser or on the server. The runtime maintains a module graph and swaps in the updated code, re-executing only the changed modules and, when possible, re-rendering affected components. Many systems provide a hot API (such as module.hot) to control acceptance, disposal, and cleanup of updates. Modern implementations like React Fast Refresh aim to preserve component state across edits more reliably.

In frontend development, HMR is commonly enabled in dev servers provided by tools such as Webpack, Vite, or Parcel. In server-side and full-stack workflows, hot reloading may reload server modules or restart processes automatically, using tools like nodemon or framework-specific solutions. HMR ecosystems span libraries and frameworks including React, Vue, Svelte, and Angular, often with tooling that supports or enhances the replacement process.

Limitations and considerations include that not all changes can be applied without a reload; structural changes, edits to global state, or certain side effects may require a full reload to ensure correctness. Misconfiguration can lead to stale state or memory leaks. HMR is typically intended for development use, and production builds generally disable it to ensure stability.