0
# Core React Components
1

2
Core component classes and lifecycle methods providing full React compatibility for building interactive user interfaces.
3

4
## Capabilities
5

6
### Component Class
7

8
Base abstract component class with full React lifecycle support and state management.
9

10
```typescript { .api }
11
/**
12
 * Base component class providing React-compatible lifecycle and state management
13
 */
14
abstract class Component<P = {}, S = {}> {
15
  /** Component properties passed from parent */
16
  props: P;
17
  /** Component state for internal data management */
18
  state: S;
19
  /** Component context for dependency injection */
20
  context?: any;
21
  /** References to DOM elements and child components */
22
  refs?: Refs;
23
  
24
  /**
25
   * Component constructor
26
   * @param props - Initial properties
27
   * @param context - Optional context object
28
   */
29
  constructor(props: P, context?: any);
30
  
31
  /**
32
   * Render method that returns the component's virtual DOM
33
   * @param props - Current props (optional)
34
   * @param state - Current state (optional) 
35
   * @param context - Current context (optional)
36
   * @returns Virtual DOM representation
37
   */
38
  abstract render(props?: P, state?: S, context?: any): InfernoNode;
39
  
40
  /**
41
   * Called after component is mounted to the DOM
42
   */
43
  componentDidMount?(): void;
44
  
45
  /**
46
   * Called before component is unmounted from the DOM
47
   */
48
  componentWillUnmount?(): void;
49
  
50
  /**
51
   * Called after component updates
52
   * @param previousProps - Previous props
53
   * @param previousState - Previous state
54
   * @param snapshot - Value returned from getSnapshotBeforeUpdate
55
   */
56
  componentDidUpdate?(previousProps: P, previousState: S, snapshot: any): void;
57
  
58
  /**
59
   * Determines if component should re-render
60
   * @param nextProps - Next props
61
   * @param nextState - Next state
62
   * @param nextContext - Next context
63
   * @returns true if component should update
64
   */
65
  shouldComponentUpdate?(nextProps: P, nextState: S, nextContext: any): boolean;
66
  
67
  /**
68
   * Called before DOM update to capture information
69
   * @param previousProps - Previous props
70
   * @param previousState - Previous state
71
   * @returns Snapshot value passed to componentDidUpdate
72
   */
73
  getSnapshotBeforeUpdate?(previousProps: P, previousState: S): any;
74
  
75
  /**
76
   * Error boundary handler for catching child component errors
77
   * @param error - Error that was thrown
78
   * @param errorInfo - Error details
79
   */
80
  componentDidCatch?(error: Error, errorInfo: any): void;
81
  
82
  /**
83
   * Updates component state and triggers re-render
84
   * @param partial - Partial state update or update function
85
   * @param callback - Optional callback after state update
86
   */
87
  setState(
88
    partial: Partial<S> | ((prevState: S, props: P) => Partial<S>), 
89
    callback?: () => void
90
  ): void;
91
  
92
  /**
93
   * Forces component to re-render regardless of state changes
94
   * @param callback - Optional callback after re-render
95
   */
96
  forceUpdate(callback?: () => void): void;
97
}
98
```
99

100
**Usage Examples:**
101

102
```typescript
103
import { Component } from "inferno-compat";
104

105
interface Props {
106
  name: string;
107
  onUpdate?: (value: string) => void;
108
}
109

110
interface State {
111
  count: number;
112
  message: string;
113
}
114

115
class Counter extends Component<Props, State> {
116
  constructor(props: Props) {
117
    super(props);
118
    this.state = {
119
      count: 0,
120
      message: `Hello ${props.name}`
121
    };
122
  }
123
  
124
  componentDidMount() {
125
    console.log('Counter component mounted');
126
  }
127
  
128
  componentDidUpdate(prevProps: Props, prevState: State) {
129
    if (prevState.count !== this.state.count) {
130
      this.props.onUpdate?.(`Count is now ${this.state.count}`);
131
    }
132
  }
133
  
134
  increment = () => {
135
    this.setState(prevState => ({
136
      count: prevState.count + 1
137
    }));
138
  }
139
  
140
  render() {
141
    return (
142
      <div>
143
        <p>{this.state.message}</p>
144
        <p>Count: {this.state.count}</p>
145
        <button onClick={this.increment}>Increment</button>
146
      </div>
147
    );
148
  }
149
}
150
```
151

152
### PureComponent Class
153

154
Optimized component class that implements shallow comparison for automatic performance optimization.
155

156
```typescript { .api }
157
/**
158
 * Component that automatically implements shallow comparison for shouldComponentUpdate
159
 * Prevents unnecessary re-renders when props and state haven't changed
160
 */
161
abstract class PureComponent<P = {}, S = {}> extends Component<P, S> {
162
  /**
163
   * Performs shallow comparison of props and state
164
   * @param props - Next props
165
   * @param state - Next state
166
   * @returns true if shallow comparison shows differences
167
   */
168
  shouldComponentUpdate(props: P, state: S): boolean;
169
}
170
```
171

172
**Usage Examples:**
173

174
```typescript
175
import { PureComponent } from "inferno-compat";
176

177
interface UserProps {
178
  user: {
179
    id: number;
180
    name: string;
181
    email: string;
182
  };
183
  onSelect: (id: number) => void;
184
}
185

186
class UserCard extends PureComponent<UserProps> {
187
  handleClick = () => {
188
    this.props.onSelect(this.props.user.id);
189
  }
190
  
191
  render() {
192
    const { user } = this.props;
193
    return (
194
      <div className="user-card" onClick={this.handleClick}>
195
        <h3>{user.name}</h3>
196
        <p>{user.email}</p>
197
      </div>
198
    );
199
  }
200
}
201

202
// This component will only re-render if the user object reference changes
203
// or if the onSelect function reference changes
204
```
205

206
### React Compatibility Features
207

208
The Component class includes React-specific compatibility features:
209

210
- **isReactComponent property**: Added automatically for React ecosystem compatibility
211
- **Context support**: Full React context API compatibility
212
- **Refs support**: Compatible with React ref patterns including string refs and callback refs
213
- **Error boundaries**: Support for componentDidCatch error handling
214
- **State batching**: Automatic batching of setState calls for performance
215

216
### Component Lifecycle Order
217

218
1. **Mounting**: constructor → render → componentDidMount
219
2. **Updating**: shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate  
220
3. **Unmounting**: componentWillUnmount
221
4. **Error handling**: componentDidCatch (when child component throws)
222

223
### State Management Best Practices
224

225
- Always use setState() to modify state, never mutate state directly
226
- State updates may be asynchronous, use functional setState for state dependencies
227
- Use PureComponent when component re-renders frequently with same props/state
228
- Implement shouldComponentUpdate manually for complex optimization scenarios