How Fast Refresh Works In Vite
summary
Builds a Vite plugin that injects the React Fast Refresh client via transformIndexHtml, adds per-module HMR wrappers that call import.meta.hot.accept(), and runs an AST transform (Babel or SWC, with a working prototype using esbuild to avoid a 30MB Rust dependency) to register function components. Demonstrates click-to-component support, shows state is preserved across updates for PascalCase, named components, and documents the major limitation that files must export only React components — provides an ESLint rule and a PR-ready esbuild change; it works on the presenter’s machine.
AI-written summary · about
chapters (8)
- 0:00Introduction and agenda
- 1:29Vite architecture overview
- 4:49Understanding HMR mechanics
- 7:02Fast Refresh fundamentals
- 8:23Building the Vite plugin
- 11:30Fast Refresh limitations
- 13:37Demo and optimization
- 17:36Future improvements
