REACT FAST REFRESH: NEXT-GEN HOT RELOADING EXPLAINED

Summary from the TLDR Web Dev newsletter

React Fast Refresh is an official Hot Module Replacement (HMR) solution that enables hot reloading while preserving application state. When you edit React components, Fast Refresh updates only the modified components and re-renders them while maintaining state in functional components and Hooks, though it falls back to full reloads for files that export non-React components or have syntax errors. The system works through a combination of Babel compile-time transformations that inject tracking code and a runtime system that registers components and Hook signatures.