Build ToolsVite HMR nhanh hơn Webpack vì native ESM — chỉ invalidate module thay đổi thay vì recompile bundle graph; React Fast Refresh giữ component state khi edit function body, remount khi thay đổi hook order.
HMR thay thế modules trong running app mà không reload trang — giữ nguyên application state, chỉ update phần code thay đổi. Webpack HMR mechanism: Webpack watch filesystem, khi file thay đổi, compile lại module thành chunk update; dev server gửi manifest qua WebSocket cho browser; browser download update chunk; HMR runtime apply module update theo module graph — nếu module có module.hot.accept() handler, handler được gọi; nếu không, propagate lên parent modules; nếu không module nào handle, fallback toàn bộ page reload. Vite HMR: nhanh hơn nhiều vì native ESM — browser import file trực tiếp, khi file thay đổi Vite chỉ invalidate module đó và direct importers (không recompile cả bundle graph). React Fast Refresh (Vite plugin / Next.js): HMR cho React components giữ nguyên component state — edit function body, component re-render với state hiện tại (không reset state như full reload). Nếu thay đổi hooks order hay component signature → full remount. State preservation: chỉ local state được giữ; Redux/Zustand store state cũng giữ (stored outside component tree). Debugging HMR failures: nếu HMR không work, kiểm tra console — thường do circular dependencies hoặc module không có HMR handlers.
Vite HMR is faster than Webpack because of native ESM — only the changed module and direct importers are invalidated rather than recompiling the full bundle graph; React Fast Refresh preserves component state on function body edits, remounts on hook order changes.
HMR replaces modules in a running app without reloading the page — preserving application state and only updating the changed code. Webpack HMR mechanism: Webpack watches the filesystem; when a file changes, it recompiles the module into an update chunk; the dev server sends a manifest via WebSocket to the browser; the browser downloads the update chunk; the HMR runtime applies the module update through the module graph — if a module has a module.hot.accept() handler, the handler is called; otherwise it propagates up to parent modules; if no module handles it, falls back to a full page reload. Vite HMR: much faster due to native ESM — the browser imports files directly; when a file changes, Vite only invalidates that module and its direct importers (no recompiling the entire bundle graph). React Fast Refresh (Vite plugin / Next.js): HMR for React components that preserves component state — editing a function body re-renders the component with the current state (no state reset like a full reload). Changing hook order or the component signature triggers a full remount. State preservation: only local state is preserved; Redux/Zustand store state is also preserved (stored outside the component tree). Debugging HMR failures: check the console — usually caused by circular dependencies or modules without HMR handlers.