A Look at Vite HMR API and its Use in React Plugins
summary
Shows how Vite’s HMR API plus React Fast Refresh actually works: uses import.meta.hot.accept (including the two-argument dependency form) to update components while preserving state, calls invalidate to trigger full reloads when needed, and demonstrates using vite-plugin-inspect to view the plugin’s code transforms. Compares Babel and SWC transforms, explains esbuild’s JSX removal, details the module graph behavior (propagation stops at roots or cycles and forces reload), and demos a zustand-backed dynamic config that updates reliably.
AI-written summary · about
chapters (9)
- 0:00Introduction to HMR
- 1:14Basic HMR API usage
- 2:38React Fast Refresh setup
- 4:29HMR module graph and updates
- 6:29HMR limitations and cycles
- 7:12Fast Refresh component rules
- 8:42Context API HMR handling
- 9:30Dynamic config with HMR
- 10:59Summary and Q&A
related talks
19mHow Fast Refresh Works In Vite
38mVite, a New Era of Frontend Tooling?
52mVite Under a Lense
01h 19mVite Panel Discussion 2023
36mYou build React apps: do you even know how?
15mVite: The next generation frontend tooling
38mHow vite changes the game for Vue and Web development
43mInside a Pipeline: Demystifying Vite and Its Plugins