Skip to main content

CC ↔ React class Instance extends React.Component, provides render() Method to return UI, manage state & perform side effects on Lifecycle Methods

aka CC, Class-Component

?deprecated? likely maintained for old codebase compatibility

?? Error Boundary feature WAS only possible with class components - now there's FC providers that can trigger error boundary

declare a class that extends React.Component (or React.PureComponent)

class _MyComponent extends React.Component {
  render() {}
}

declare a class with props

class _MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.mystate = {//...setup state};
  };
  componentDidMount() {
    // Perform side-effect at start-up
  }
  render() {
    // Return some UI using props & state
  }
};

render()​

CC Method inhert from React.Component to return UI as JSX

Error Boundary​

fallback mechanism for to handle Exception in child component

References​

  1. ReactComponentElement ↔ Type for React CC or FC

  2. componentDidUpdate() ↔ CC Lifecycle Method to trigger when CC updates (excl Mount)

  3. componentDidMount() ↔ CC Lifecycle Method to trigger when CC Mount to DOM API

  4. componentWillUnmount() ↔ CC Lifecycle Method to trigger when CC Unmount from DOM API

  5. render() ↔ CC Method inhert from React.Component to return UI as JSX

  6. to use [Error Boundary](error-boundary), only avail in [**_CC_**](cc) ↔ Error Boundary now available in FC via Next 13!

  7. this.state ↔ to initialize state in CC

  8. for old codebase ↔ to keep legacy Class Component