gaearon/react-hot-loader
React Hot Loader
react-hot-loader is a developer utility for updating React components and hooks in real time. It functions as a state-preserving UI updater that wraps components in proxies, allowing the underlying logic to be replaced without unmounting the component tree.
The tool maintains internal application state across hot module updates by swapping component logic while keeping the mount point constant. It includes mechanisms to intercept rendering errors during updates through temporary error boundaries and manages hook-order validation to prevent state mismatches when functional hooks change.
The project integrates with module bundlers to automate the injection of hot replacement logic. Its capability surface covers real-time updates for lazy-loaded and code-split components, module replacement diagnostics, and the ability to exclude specific components from the reloading process.
Features
- Real-Time Runtime Updates - Provides real-time updates for user interface components while preserving internal state and mount points.
- Hot Reloading Tools - Provides a comprehensive utility for live code injection and state preservation during React development.
- Hot Code Reloading - Enables an iterative development workflow where UI changes are reflected instantly without page refreshes.
- Hot Module Replacement - Integrates with module bundlers to inject hot replacement logic for real-time module updates.
- Hook Runtime Updates - Refreshes functional component hooks when dependencies or function bodies change during hot replacement.
- Component Proxies - Wraps components in proxies to maintain a stable mount point while updating the underlying implementation.
- Hot-Reload State Preservation - Maintains internal application state across hot module updates by swapping component logic without unmounting the tree.
- State-Preserving Logic Swapping - Maintains internal application state by swapping component logic without unmounting the component tree.
- Hook Order Validation - Forces component remounting when hook sequences change to prevent state mismatches in functional components.
- Hook Sequence Synchronization - Triggers a local tree remount when hook order changes to prevent state mismatches between versions.
- Code-Split Update Support - Ensures components loaded via lazy loading or code splitting boundaries are updated correctly during hot replacement.
- Proxy Type Validation - Compares proxied components to determine if they share the same type while ignoring reference changes from reloading.
- Update Error Interception - Intercepts rendering errors during hot updates to prevent the entire application from crashing due to bugs.
- Build Tool Integrations - Provides plugins and loaders to automate the injection of hot replacement logic during the build process.
- Reference-Agnostic Comparisons - Determines if components share the same type by ignoring reference changes caused by hot reloading.
- HMR Proxies - Wraps components in proxies to replace underlying logic without unmounting the component tree.
- Error Boundaries - Implements temporary error boundaries to isolate failures during hot updates and prevent application crashes.
- Hot-Reload Error Overlays - Injects local error boundaries during updates and displays a global error overlay for reporting.
- UI State Preservation - Implements techniques to preserve the internal state of UI components while they are being updated in real time.
- React Ecosystem - Enables real-time component updates.
