What is hot.data?

Question

What is hot.data?

Accepted Answer

`hot.data` is a property of Vite's `import.meta.hot` object that serves as persistent storage across Hot Module Replacement (HMR) updates. When a module is hot-replaced, the old version's `hot.data` object is automatically passed to the new version's `hot.data`, allowing modules to preserve state and avoid resetting critical information during development. This is essential for maintaining application state, ongoing connections, or expensive computations across code edits . ```js
// counter.js
let counter = import.meta.hot?.data.counter || 0;

if (import.meta.hot) {
  // Store current value before update
  import.meta.hot.dispose(() => {
    import.meta.hot.data.counter = counter;
  });
  
  // Accept updates
  import.meta.hot.accept(() => {
    console.log('Counter preserved:', import.meta.hot.data.counter);
  });
}

export function increment() {
  counter++;
  return counter;
}
```

In this example, the counter value persists across code edits because it's stored in `hot.data` during disposal and retrieved during initialization . When a module is marked for HMR, Vite's runtime creates a persistent object associated with that module. This object is stored in a map keyed by module ID. During the update lifecycle, when the old module version is disposed, Vite extracts its `hot.data` object and stores it temporarily. When the new module version loads and its `hot.data` is accessed, Vite returns the preserved object from the old version. This ensures seamless data transfer between module versions without requiring manual serialization or external storage . The primary use case is preserving expensive state that would be costly to recreate on every edit. This includes WebSocket connections, timers, accumulated data, user session state, and component instance references. Without `hot.data`, every code edit would reset these resources, forcing developers to re-establish connections or re-enter data. Libraries and framework plugins use `hot.data` internally to maintain component instances and render caches across updates . ```js
// websocket.js
let socket = import.meta.hot?.data.socket;

if (!socket) {
  socket = new WebSocket('wss://api.example.com');
  socket.addEventListener('message', handleMessage);
  console.log('New WebSocket connection created');
} else {
  console.log('Reusing preserved WebSocket connection');
}

if (import.meta.hot) {
  import.meta.hot.dispose(() => {
    // Don't close the socket on hot updates!
    // We're preserving it for the new version
    import.meta.hot.data.socket = socket;
  });
  
  import.meta.hot.accept(() => {
    console.log('WebSocket module updated, connection preserved');
  });
}

function handleMessage(event) {
  console.log('Received:', event.data);
}

export function sendMessage(msg) {
  socket.send(msg);
}
```

This pattern maintains a single WebSocket connection across multiple code edits, preventing reconnection overhead and preserving message subscriptions . `hot.data` works in concert with `hot.dispose()` and `hot.accept()`. The typical pattern is: in `dispose()`, you save any state you want to preserve into `hot.data`. When the new module loads, you retrieve that state from `hot.data`. If you only use `hot.data` without `dispose()`, the data won't be saved across updates. If you use `dispose()` without `hot.data`, you can clean up resources but won't preserve anything. Together, they enable complete state lifecycle management . Data persistence scope: `hot.data` is per-module, not global. Each module has its own persistent object . No serialization needed: The object is transferred by reference, so complex objects like functions and class instances remain usable . Not for production: `import.meta.hot` and all related APIs are stripped from production builds . Module eviction: If a module is removed from the dependency graph, its `hot.data` is garbage collected . Framework plugins like `@vitejs/plugin-react` and `@vitejs/plugin-vue` use `hot.data` internally to preserve component state and context across HMR updates. For example, React Fast Refresh maintains a mapping of component instances to their latest definitions using `hot.data`, ensuring that when a component file changes, existing instances can be updated with new render functions while preserving local state .

What is hot.data?

hot.data is a persistent object available on import.meta.hot that allows modules to pass state from the old version to the new version during HMR updates, preserving data across module replacements

Scenario Questions

Follow-up Questions