How framework-specific HMR works (React Fast Refresh, Vue HMR)

Question

Accepted Answer

Framework-specific Hot Module Replacement (HMR) in Vite builds upon the native HMR system but adds framework-aware update logic that preserves application state. React Fast Refresh and Vue HMR are implemented through dedicated Vite plugins (`@vitejs/plugin-react` and `@vitejs/plugin-vue`) that inject transformation logic and runtime handlers. These plugins enable component-level updates that maintain local state, a capability far beyond basic module replacement . Fast Refresh is a reimplementation of hot reloading with full support from React, unlike older solutions like React Hot Loader that used proxy components . It consists of two main parts: a Babel plugin (`react-refresh/babel`) and a runtime (`react-refresh/runtime`), both maintained within the `react-refresh` package . The Babel plugin transforms your code at compile time by detecting all components and custom Hooks, then injecting function calls to register components and collect Hook signatures . This transformation creates a registration system that maps components to unique identifiers. At runtime, when a file changes, the HMR system triggers the Fast Refresh runtime, which processes pending updates through React's built-in reconciliation support. React Fiber nodes (component instances) can then be updated with new render functions while preserving existing state . ```jsx
// Before transformation
function useFancyState() {
  const [foo, setFoo] = React.useState(0);
  useFancyEffect();
  return foo;
}

// After transformation
var _s = $RefreshSig$();
function useFancyState() {
  _s();
  const [foo, setFoo] = React.useState(0);
  useFancyEffect();
  return foo;
}
_s(useFancyState, 'useState{ct{}', false);

// $RefreshSig$ collects Hook signatures
// $RefreshReg$ registers components for Fast Refresh
```

The `_s` function tracks Hook signatures to enable state preservation across updates . Function components and Hooks preserve state by default when edited  Class components lose state on edits (only function components supported)  Hooks with dependencies (useEffect, useMemo, useCallback) always re-run during Fast Refresh, ignoring dependency lists to ensure edits reflect  useState and useRef retain values as long as arguments and Hook order don't change  Adding or removing Hooks causes temporary state reset for that component only  Fast Refresh operates differently based on what a file exports. If a file only exports React components, edits only update that file's components. If a file exports non-component values, Fast Refresh re-runs that file and all files importing it. If a file contains both components and non-component exports, or if a changed file is imported by non-React code, Fast Refresh falls back to full reload . ```jsx
// Force remount on every edit (useful for mount animations)
// Add anywhere in the file
// @refresh reset

// React Router handles route exports automatically
// But custom exports cause full reloads
export const meta = { title: "Home" }; // ✅ Handled by plugin
export const myValue = "test"; // ❌ Causes full reload
```

The `// @refresh reset` directive forces Fast Refresh to remount components in that file on every edit . Vue's HMR implementation through `@vitejs/plugin-vue` takes advantage of Vue's single-file component (SFC) structure to provide even more granular updates. The plugin integrates with Vite's HMR system to handle the three parts of a Vue SFC separately: template, script, and style . Template changes: Vue's compiler generates a new render function and hot-replaces it while preserving the component instance and all state  Script changes: The plugin attempts to merge new component options with the existing instance; if successful, state is preserved; otherwise, it falls back to reloading the component  Style changes: Follow the standard CSS HMR path—styles are injected/updated without any component reload  Vue 3 introduced improved HMR support through its Composition API and Proxy-based reactivity system. The Composition API makes component logic more modular, allowing HMR to update individual composables without affecting the whole component. When using Vite with Vue 3, HMR is enabled by default through `@vitejs/plugin-vue`, and no additional configuration is needed . ```js
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    hmr: true // Enabled by default
  }
});

// In Vue 2 projects using Webpack, manual HMR acceptance was needed
if (module.hot) {
  module.hot.accept();
}
```

Vite's Vue plugin handles HMR automatically without manual acceptance calls . Both systems achieve component-level HMR but through different mechanisms. React Fast Refresh relies on deep React integration, the Babel plugin for component registration, and runtime reconciliation. Vue HMR leverages Vue's SFC structure to update templates, scripts, and styles independently. React's approach requires more transformation and run

How framework-specific HMR works (React Fast Refresh, Vue HMR)

Scenario Questions

Follow-up Questions