0
# Hot Component Wrapper
1

2
The `hot` higher-order component (HOC) is the primary interface for enabling hot reloading on React components. It wraps components to preserve their state during hot module replacement while providing error boundaries and lifecycle management.
3

4
## Capabilities
5

6
### Hot Function
7

8
Creates a higher-order component that enables hot reloading for the wrapped component.
9

10
```typescript { .api }
11
/**
12
 * Marks module and returns a HOC to mark a Component inside it as hot-exported
13
 * @param module - ALWAYS should be just "module"
14
 * @returns hot HOC function
15
 */
16
function hot(module: any): <T = React.ComponentType<any>>(Component: T, props?: AppContainerProps) => T;
17

18
interface AppContainerProps {
19
  errorBoundary?: boolean;
20
  errorReporter?: React.ComponentType<ErrorReporterProps>;
21
}
22

23
interface ErrorReporterProps {
24
  error: any;
25
}
26
```
27

28
**Usage Examples:**
29

30
```javascript
31
// Basic usage with ES modules
32
import { hot } from 'react-hot-loader';
33

34
const MyComponent = () => <div>Hello World</div>;
35

36
export default hot(module)(MyComponent);
37
```
38

39
```javascript
40
// Using root import (automatically detects module)
41
import { hot } from 'react-hot-loader/root';
42

43
const MyComponent = () => <div>Hello World</div>;
44

45
export default hot(MyComponent);
46
```
47

48
```typescript
49
// TypeScript usage with props
50
import React from 'react';
51
import { hot } from 'react-hot-loader';
52

53
interface Props {
54
  name: string;
55
  age: number;
56
}
57

58
const UserProfile: React.FC<Props> = ({ name, age }) => (
59
  <div>
60
    <h1>{name}</h1>
61
    <p>Age: {age}</p>
62
  </div>
63
);
64

65
export default hot(module)(UserProfile);
66
```
67

68
```javascript
69
// With custom error reporter
70
import { hot } from 'react-hot-loader';
71
import CustomErrorReporter from './CustomErrorReporter';
72

73
const MyApp = () => <div>My App</div>;
74

75
export default hot(module)(MyApp, {
76
  errorReporter: CustomErrorReporter,
77
  errorBoundary: true
78
});
79
```
80

81
### Root Hot Function
82

83
Pre-configured version that automatically detects the calling module, eliminating the need to pass `module` parameter.
84

85
```typescript { .api }
86
/**
87
 * Pre-configured hot function that automatically detects the calling module
88
 * @param Component - React component to make hot-reloadable
89
 * @param props - Optional AppContainer props
90
 * @returns Hot-wrapped component
91
 */
92
function hot<T = React.ComponentType<any>>(Component: T, props?: AppContainerProps): T;
93
```
94

95
**Usage Examples:**
96

97
```javascript
98
import { hot } from 'react-hot-loader/root';
99

100
const App = () => {
101
  const [count, setCount] = useState(0);
102
  
103
  return (
104
    <div>
105
      <p>Count: {count}</p>
106
      <button onClick={() => setCount(count + 1)}>
107
        Increment
108
      </button>
109
    </div>
110
  );
111
};
112

113
// No need to pass module
114
export default hot(App);
115
```
116

117
## Hot Reload Behavior
118

119
### State Preservation
120
- **Local component state**: Preserved across hot reloads
121
- **Component props**: Updated with new values from parent
122
- **Hooks state**: Maintained with React's hook preservation
123
- **Context values**: Updated if context provider changes
124

125
### Module Integration
126
The hot wrapper integrates with module bundlers:
127

128
```javascript
129
// Webpack HMR integration (automatic)
130
if (module.hot) {
131
  module.hot.accept('./MyComponent', () => {
132
    // Component will hot reload automatically
133
  });
134
}
135
```
136

137
```javascript
138
// Parcel HMR integration (automatic)  
139
if (module.hot) {
140
  module.hot.accept(() => {
141
    // Hot reload handling
142
  });
143
}
144
```
145

146
### Error Handling
147
Hot wrapped components automatically include error boundary functionality:
148

149
```javascript
150
// Errors during hot reload are caught and displayed
151
const ProblematicComponent = () => {
152
  throw new Error('Development error');
153
  return <div>Won't render</div>;
154
};
155

156
export default hot(module)(ProblematicComponent);
157
// Error will be displayed in development, not crash the app
158
```
159

160
## Advanced Usage
161

162
### Custom Error Boundaries
163
```javascript
164
import { hot } from 'react-hot-loader';
165

166
const MyErrorReporter = ({ error, errorInfo, component }) => (
167
  <div style={{ color: 'red', padding: '20px' }}>
168
    <h2>Development Error</h2>
169
    <details>
170
      <summary>Error Details</summary>
171
      <pre>{error.stack}</pre>
172
    </details>
173
    <button onClick={() => component.retryHotLoaderError()}>
174
      Retry
175
    </button>
176
  </div>
177
);
178

179
const App = () => <div>My App</div>;
180

181
export default hot(module)(App, {
182
  errorReporter: MyErrorReporter,
183
  errorBoundary: true
184
});
185
```
186

187
### Production Behavior
188
In production builds, the hot wrapper becomes a no-op:
189

190
```javascript
191
// Development: Full hot reload functionality
192
// Production: Returns component unchanged
193
export default hot(module)(MyComponent);
194
```
195

196
## Limitations and Best Practices
197

198
### Limitations
199
- Only works in development mode with HMR enabled
200
- Cannot preserve state of unmounted components
201
- Some advanced React patterns may interfere with hot reloading
202
- Class components with complex inheritance may have issues
203

204
### Best Practices
205
```javascript
206
// ✅ Good: Use at component export level
207
export default hot(module)(MyComponent);
208

209
// ❌ Avoid: Don't use inside render methods
210
const BadExample = () => {
211
  const HotComponent = hot(module)(SomeComponent); // Don't do this
212
  return <HotComponent />;
213
};
214

215
// ✅ Good: Use with functional components
216
const FunctionalComponent = () => <div>Hello</div>;
217
export default hot(module)(FunctionalComponent);
218

219
// ✅ Good: Use with class components  
220
class ClassComponent extends React.Component {
221
  render() { return <div>Hello</div>; }
222
}
223
export default hot(module)(ClassComponent);
224

225
// ✅ Good: One hot export per module
226
export default hot(module)(MainComponent);
227
```