0
# React Hot Loader
1
2
React Hot Loader enables live editing of React components during development without losing component state. It provides seamless Hot Module Replacement (HMR) integration that preserves React component state across code changes, making development faster and more efficient.
3
4
## Package Information
5
6
- **Package Name**: react-hot-loader
7
- **Package Type**: npm
8
- **Language**: JavaScript with TypeScript definitions
9
- **Installation**: `npm install react-hot-loader`
10
11
## Core Imports
12
13
```javascript
14
import { hot, AppContainer, setConfig, cold, areComponentsEqual, configureComponent } from 'react-hot-loader';
15
```
16
17
**TypeScript with full imports:**
18
```typescript
19
import {
20
hot,
21
AppContainer,
22
setConfig,
23
cold,
24
areComponentsEqual,
25
configureComponent,
26
type AppContainerProps,
27
type Config,
28
type HotError
29
} from 'react-hot-loader';
30
```
31
32
**CommonJS:**
33
```javascript
34
const { hot, AppContainer, setConfig, cold, areComponentsEqual } = require('react-hot-loader');
35
```
36
37
**Alternative Entry Points:**
38
```javascript
39
// Simplified hot function (auto-detects module)
40
import { hot } from 'react-hot-loader/root';
41
42
// Build integrations
43
import 'react-hot-loader/patch'; // Patching utilities
44
require('react-hot-loader/babel'); // Babel plugin
45
require('react-hot-loader/webpack'); // Webpack loader
46
```
47
48
## Basic Usage
49
50
```javascript
51
import React from 'react';
52
import { hot } from 'react-hot-loader/root';
53
54
const App = () => {
55
const [count, setCount] = React.useState(0);
56
57
return (
58
<div>
59
<h1>Counter: {count}</h1>
60
<button onClick={() => setCount(count + 1)}>
61
Increment
62
</button>
63
</div>
64
);
65
};
66
67
export default hot(App);
68
```
69
70
Manual AppContainer usage (legacy approach):
71
```javascript
72
import React from 'react';
73
import ReactDOM from 'react-dom';
74
import { AppContainer } from 'react-hot-loader';
75
import App from './App';
76
77
const render = (Component) => {
78
ReactDOM.render(
79
<AppContainer>
80
<Component />
81
</AppContainer>,
82
document.getElementById('root')
83
);
84
};
85
86
render(App);
87
88
if (module.hot) {
89
module.hot.accept('./App', () => {
90
render(App);
91
});
92
}
93
```
94
95
## Architecture
96
97
React Hot Loader consists of several key components:
98
99
- **Hot HOC**: Higher-order component that wraps React components for hot reloading
100
- **AppContainer**: Error boundary that manages hot reload lifecycle and displays errors
101
- **Proxy System**: Internal component proxying for state preservation during updates
102
- **Build Integration**: Babel plugin and Webpack loader for automatic component registration
103
- **Configuration System**: Customizable options for hot reloading behavior
104
- **React Patching**: Runtime modification of React methods for hot reload compatibility
105
106
## Capabilities
107
108
### Hot Higher-Order Component
109
110
Core functionality for enabling hot reloading on React components. Wraps components to preserve state during hot module replacement.
111
112
```typescript { .api }
113
function hot(module: any): <T = React.ComponentType<any>>(Component: T, props?: AppContainerProps) => T;
114
115
interface AppContainerProps {
116
errorBoundary?: boolean;
117
errorReporter?: React.ComponentType<ErrorReporterProps>;
118
}
119
120
interface ErrorReporterProps {
121
error: any;
122
errorInfo?: React.ErrorInfo;
123
component?: AppContainer;
124
}
125
```
126
127
[Hot Component Wrapper](./hot-wrapper.md)
128
129
### App Container
130
131
Error boundary component that manages hot reload lifecycle, catches errors during development, and provides error reporting.
132
133
```typescript { .api }
134
class AppContainer extends React.Component<AppContainerProps & AppChildren> {
135
constructor(props: AppContainerProps & AppChildren);
136
render(): React.ReactElement;
137
}
138
139
interface AppChildren {
140
children?: React.ReactElement<any>;
141
}
142
```
143
144
[App Container](./app-container.md)
145
146
### Configuration Management
147
148
Comprehensive configuration system for customizing hot reload behavior, error handling, and performance optimizations.
149
150
```typescript { .api }
151
function setConfig(config: Partial<Config>): void;
152
153
interface Config {
154
logLevel: string;
155
onComponentRegister: (type: any, uniqueLocalName: string, fileName: string) => any;
156
onComponentCreate: (type: any, displayName: string) => any;
157
pureSFC: boolean;
158
pureRender: boolean;
159
allowSFC: boolean;
160
disableHotRenderer: boolean;
161
disableHotRendererWhenInjected: boolean;
162
showReactDomPatchNotification: boolean;
163
ignoreSFC: boolean;
164
ignoreComponents: boolean;
165
reloadHooks: boolean;
166
errorReporter: React.ComponentType<HotError>;
167
ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
168
trackTailUpdates: boolean;
169
}
170
171
interface HotError {
172
error: Error;
173
errorInfo?: React.ErrorInfo;
174
}
175
```
176
177
[Configuration](./configuration.md)
178
179
### Component Utilities
180
181
Utility functions for component comparison, cold component marking, component configuration, and hot reload control.
182
183
```typescript { .api }
184
function areComponentsEqual<T>(typeA: React.ComponentType<T>, typeB: React.ComponentType<T>): boolean;
185
function cold<T = React.ComponentType<any>>(component: T): T;
186
function configureComponent(component: React.ComponentType<any>, options: any): React.ComponentType<any>;
187
```
188
189
[Component Utilities](./component-utilities.md)
190
191
### Build Integration
192
193
Build-time integration tools including Babel plugin and Webpack loader for automatic component registration and hot reload setup.
194
195
```javascript { .api }
196
// Babel plugin usage in .babelrc
197
{
198
"plugins": ["react-hot-loader/babel"]
199
}
200
201
// Webpack loader usage
202
{
203
test: /\.jsx?$/,
204
use: ['react-hot-loader/webpack']
205
}
206
```
207
208
[Build Integration](./build-integration.md)
209
210
## Alternative Entry Points
211
212
### Root Import
213
Provides pre-configured `hot` function that automatically detects the calling module:
214
```javascript
215
import { hot } from 'react-hot-loader/root';
216
```
217
218
### Babel Plugin
219
For build-time component registration:
220
```javascript
221
require('react-hot-loader/babel')
222
```
223
224
### Webpack Loader
225
For webpack-based component registration:
226
```javascript
227
require('react-hot-loader/webpack')
228
```
229
230
### Patch Utility
231
For runtime React method patching (same functionality as main entry point):
232
```javascript
233
import 'react-hot-loader/patch';
234
```
235
236
### Development-only Exports
237
Internal functions available only in development mode:
238
```typescript { .api }
239
function enterModule(moduleId: string): void;
240
function leaveModule(moduleId: string): void;
241
function compareOrSwap(oldComponent: any, newComponent: any): boolean;
242
```
243
244
## Types
245
246
```typescript { .api }
247
interface AppContainerProps {
248
errorBoundary?: boolean;
249
errorReporter?: React.ComponentType<ErrorReporterProps>;
250
}
251
252
interface AppChildren {
253
children?: React.ReactElement<any>;
254
}
255
256
interface ErrorReporterProps {
257
error: any;
258
errorInfo?: React.ErrorInfo;
259
component?: AppContainer;
260
}
261
262
interface HotError {
263
error: Error;
264
errorInfo?: React.ErrorInfo;
265
}
266
267
interface Config {
268
logLevel: string;
269
onComponentRegister: (type: any, uniqueLocalName: string, fileName: string) => any;
270
onComponentCreate: (type: any, displayName: string) => any;
271
pureSFC: boolean;
272
pureRender: boolean;
273
allowSFC: boolean;
274
disableHotRenderer: boolean;
275
disableHotRendererWhenInjected: boolean;
276
showReactDomPatchNotification: boolean;
277
ignoreSFC: boolean;
278
ignoreComponents: boolean;
279
reloadHooks: boolean;
280
errorReporter: React.ComponentType<HotError>;
281
ErrorOverlay: React.ComponentType<{ errors: Array<HotError> }>;
282
trackTailUpdates: boolean;
283
}
284
```