pmmmwh/react-refresh-webpack-plugin
React Refresh Webpack Plugin
React Refresh Webpack Plugin is a development tool that enables live reloading of React components while preserving their local state during development. It integrates with build processes to instantly update component code without losing user state or session data, while also offering options to clear and reinitialize component state when unstable interfaces need clean recovery.
The plugin manages updates and state preservation in the browser by intercepting the bundling lifecycle, applying abstract syntax tree transformations to inject metadata and preamble hooks, and communicating with module loader update APIs. It maintains a persistent mapping of component identities and local state hooks outside the React tree across hot reloads.
Development diagnostics include browser-based error overlays that capture compilation failures and runtime exceptions, intercepting uncaught exceptions to render interactive debugging information directly inside the active web page.
Features
- Hot Code Reloading - Enables hot code reloading for React components so code edits reflect immediately without losing local state.
- Webpack Build Plugins - Integrates into Webpack to enable live component reloading while preserving local state during development.
- Fast Refresh Environments - Instantly updates React component code during development without losing user state or session data.
- Hot-Reload State Preservation - Maintains persistent component identities and local state hooks outside the React tree across hot reloads.
- React State Management - Handles the preservation and reset of React component-level state during live development updates.
- Webpack-Based Bundling - Intersects the Webpack bundling lifecycle to automatically inject refresh runtime logic into output compilation chunks.
- JavaScript AST Transformations - Applies JavaScript AST transformations during the build to inject metadata and preamble hooks into component source code.
- HMR Proxies - Manages module replacement and state preservation in the browser by decoupling mount points via HMR component wrappers.
- Runtime Error Overlays - Catches runtime execution errors and presents interactive debugging overlays directly inside the active browser window.
- State Resets - Clears and reinitializes component state during reloads to ensure unstable interfaces recover cleanly after code changes.
- Error Overlays - Provides visual error overlays in the browser to display compilation failures and runtime exceptions during development.
