A class component is a JavaScript class extending React.Component or React.PureComponent. Its constructor can initialize state, lifecycle methods can respond to updates or perform side effects, and render returns the UI. section 1.1.3
Use the pattern to organize component behavior around:
- State initialized in the constructor. section 1.1.3
- Side effects such as loading data in lifecycle methods. section 1.1.3
- UI derived from props and state through render. section 1.1.3
class MyComponent extends React.Component {
constructor (props) {
super(props);
this.state = {
// Set up state here. #1
};
}
componentDidMount () {
// Perform a side effect like loading data. #2
}
render () {
// Return the UI using prop values and state. #3
}
}
Use the listing to see the constructor, componentDidMount, and render methods arranged in one class component. section 1.1.3
