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
```