vite-hmr

Vite HMR works by accepting module updates and disposing of old modules to preserve React component state during fast refresh. It intercepts updates to prevent full page reloads, maintaining current state values like form inputs without resetting the component.

To use the Vite HMR API, you need to accept updates for a specific module and define disposal logic to clean up side effects. This pattern allows the new module to replace the old one seamlessly during development without triggering a full page reload.

React state resets during Vite Fast Refresh when modules are not properly accepted or when side effects from old modules are not cleaned up. Disposing of previous modules and correctly handling state preservation ensures that updates apply instantly without losing current values.

Yes, you can use custom events with Vite HMR to monitor module replacement. By enabling verbose logging and tracking these events, you can debug the HMR lifecycle, observe update propagation, and identify issues with side effects or state reset during development.

The best way to handle side effects during Vite module replacement is to implement module disposal logic. By explicitly cleaning up side effects in the disposal hook before accepting new updates, you prevent memory leaks and ensure the new module initializes cleanly.