How Vite handles HMR for CSS vs JavaScript vs frameworks

JavaScript HMR is more complex because changes can affect module dependencies. When a JavaScript file changes, Vite's server identifies the exact modules affected via its module graph. It then sends a WebSocket update containing the changed module path and timestamp. The client dynamically re-imports the module with a cache-busting query parameter (?t=timestamp). If the module has an accept handler, that handler receives the new module exports. If not, Vite walks up the import chain looking for an accepting parent—if none exists, it falls back to a full page reload [citation:1]. This approach ensures updates remain fast regardless of application size because only the changed module and its direct dependents are reprocessed [citation:9].

React requires special handling because simply replacing a component module would lose its internal state. Vite's React plugin (@vitejs/plugin-react) integrates React Fast Refresh, which preserves component state across edits. The plugin works by separating component definitions from their instances—when a component file changes, only the render function is swapped out while the React Fiber nodes (component instances and state) remain intact [citation:7]. The plugin enables Fast Refresh by default with fastRefresh: true, and it works seamlessly with both function components and hooks. Error boundaries can catch HMR-related errors, and the error overlay provides immediate feedback [citation:7].

Vue's HMR implementation through @vitejs/plugin-vue handles the three parts of a Vue SFC separately. When a <template> changes, Vue's compiler generates a new render function and hot-replaces it while preserving the component instance. When <script> changes, the plugin attempts to merge new options with the existing instance—if successful, state is preserved; otherwise, it falls back to reloading the component. CSS changes within <style> blocks follow the same path as regular CSS HMR. This three-tiered approach ensures maximum state preservation while keeping updates fast [citation:1].

Svelte's HMR through @sveltejs/vite-plugin-svelte takes yet another approach. Svelte components compile to vanilla JavaScript classes, and HMR is handled by replacing the component class while preserving instances where possible. The Svelte plugin maintains a registry of component instances and, when a component changes, it creates a new class and updates existing instances to use the new class's methods while keeping their state. This is more complex than React or Vue because Svelte's compilation model produces framework-specific runtime code that must be carefully hot-swapped.

Despite these differences, all HMR implementations share the same underlying architecture: a WebSocket connection between server and client, a module graph on the server tracking dependencies, and the import.meta.hot API for modules to declare acceptance [citation:1]. The specialized behavior for different file types is implemented through Vite's plugin system—each plugin can hook into the build process and inject appropriate HMR handling code during transformation. This plugin-based architecture is what makes Vite's HMR system both powerful and extensible, supporting over 20 frameworks through community plugins [citation:4].