Hot module replacement, usually shortened to HMR, is a development feature that swaps a piece of changed code into a running app without reloading the whole page. The moment a developer saves an edit, only that module is replaced and the result appears on screen, while everything else keeps its place.
Imagine you are decorating a room and want to test a new lamp. A full reload is like switching off all the power, fitting the lamp, then turning everything back on and re-arranging the furniture from scratch. HMR is like changing just that one lamp while the rest of the room stays exactly as it was. For a developer filling out a long JavaScript form to test it, that means the form does not get wiped on every tiny change.
HMR is closely related to hot reload, but it is more surgical: instead of refreshing the page, it patches the single changed part. It runs only during development and never touches the version your customers use.
Under the hood, the dev server keeps an open WebSocket to the browser. When a file changes, it sends just the updated module, and a small runtime in the page slots it in and re-runs the affected piece. Tools like Vite and webpack both do this, though Vite made it noticeably faster by serving modules natively.
There is a limit worth knowing. HMR works cleanly for things like styles and UI components, but deep changes to core logic or shared state can leave the app in a confused state, so the dev server quietly falls back to a full reload. When edits stop showing up correctly, a manual refresh is the usual fix.
At TopDevs we set up HMR on every project so our developers see each change instantly, which shortens the loop between writing code and seeing it work.
