HMR API — hot.accept(), hot.dispose(), hot.invalidate()

Question

Accepted Answer

Vite's HMR API is exposed through the `import.meta.hot` object, providing developers with fine-grained control over how modules respond to updates. These APIs are only available during development and are automatically stripped from production builds. The three core methods—`accept()`, `dispose()`, and `invalidate()`—form the foundation of custom HMR handling, enabling modules to preserve state, perform cleanup, and gracefully handle updates that can't be hot-applied . ```js
if (import.meta.hot) {
  // Only runs in development
  console.log('HMR API available');
}

// After build/production, import.meta.hot is undefined
// and all HMR code is automatically tree-shaken
``` The `accept()` method tells Vite that a module can handle updates to itself or its dependencies. When a module accepts updates, Vite will apply changes without reloading the page. This is essential for preserving application state during development. Framework integrations like `@vitejs/plugin-vue` or `@vitejs/plugin-react` automatically inject appropriate accept handlers for components, but custom modules may need to implement their own . ```js
// 1. Self-accepting module
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // Called when this module is updated
    console.log('Module updated:', newModule);
    // Re-render or update UI with new module
  });
}

// 2. Accepting a specific dependency
if (import.meta.hot) {
  import.meta.hot.accept('./dependency.js', (newDep) => {
    // Called only when './dependency.js' changes
    console.log('Dependency updated:', newDep);
  });
}

// 3. Accepting multiple dependencies
if (import.meta.hot) {
  import.meta.hot.accept(
    ['./dep1.js', './dep2.js'],
    ([newDep1, newDep2]) => {
      // Called when any of the listed dependencies change
    }
  );
}

// 4. No-callback accept (uses default handling)
if (import.meta.hot) {
  import.meta.hot.accept();
}
```

When a module accepts itself without a callback, Vite assumes the module's exports will be used elsewhere and simply triggers a full page refresh if no other handlers can propagate the update . The `dispose()` method registers a callback that runs before a module is updated or unmounted. This is crucial for cleaning up resources like event listeners, intervals, or DOM elements that were created by the module. Without proper disposal, the old module's resources would leak, potentially causing memory issues or duplicate event handlers after hot updates . ```js
// Counter component with cleanup
let intervalId;
let counter = 0;

if (import.meta.hot) {
  import.meta.hot.dispose(() => {
    // Clean up before module update
    if (intervalId) {
      clearInterval(intervalId);
      console.log('Cleaned up interval');
    }
  });
}

intervalId = setInterval(() => {
  counter++;
  document.getElementById('counter').textContent = counter;
}, 1000);

// The dispose callback ensures old intervals don't keep running
// after the module is updated
```

Dispose handlers can also pass data to the new module through the `data` property, enabling state preservation across updates . ```js
// Stateful module with data preservation
if (import.meta.hot) {
  // Store state in hot.data
  import.meta.hot.data.counter = import.meta.hot.data.counter || 0;
  
  // Clean up on update
  import.meta.hot.dispose(() => {
    console.log('Preserving counter:', import.meta.hot.data.counter);
  });
  
  // Accept updates
  import.meta.hot.accept(() => {
    console.log('Module updated, counter preserved:', import.meta.hot.data.counter);
  });
}

// Use the preserved state
counter = import.meta.hot?.data?.counter || 0;
```

The `data` property persists across HMR updates, allowing modules to maintain state between versions . The `invalidate()` method forces a full page reload when a module cannot safely handle a hot update. This is useful when a module detects that its internal state or dependencies have changed in ways that can't be reconciled with HMR. Calling `invalidate()` also accepts an optional error message that will be displayed in the browser console . ```js
// When a module can't handle an update
if (import.meta.hot) {
  import.meta.hot.accept(() => {
    // Try to apply update
    try {
      // Attempt to reinitialize with new module
    } catch (err) {
      // If it fails, force a full reload
      import.meta.hot.invalidate('Failed to apply update: ' + err.message);
    }
  });
}

// When a critical dependency changes
import { criticalData } from './config.js';

if (import.meta.hot) {
  import.meta.hot.accept('./config.js', () => {
    // If config change requires full reload
    import.meta.hot.invalidate('Configuration changed, reloading...');
  });
}
``` Initial load: Module registers accept/dispose handlers if it wants HMR support . File change detected: Vite server identifies changed file and affected modules . Update propagation: Server sends WebSocket message to client with affected module paths . Dispose phase: Client executes dispo

HMR API — hot.accept(), hot.dispose(), hot.invalidate()

Vite's HMR API provides hot.accept() to handle module updates, hot.dispose() to clean up before updates, and hot.invalidate() to force a full page reload when needed

HMR API — hot.accept(), hot.dispose(), hot.invalidate()

Vite's HMR API provides hot.accept() to handle module updates, hot.dispose() to clean up before updates, and hot.invalidate() to force a full page reload when needed

Scenario Questions

Follow-up Questions