<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    const {
      hasError,
    } = this.state;

    if (hasError) return <h1>Something went wrong.</h1>;

    return this.props.children; 
  }
}

throw new Error('crash');

import React, {
  lazy,
  Suspense,
} from 'react';

import Loading from './Loading.jsx';

const LazyComponent = lazy(() => import('./MyComponent.jsx'));

function MainBoard() {
  return (
     <Suspense fallback={<Loading />}>
       <LazyComponent />
     </Suspense>
  );
}

import React, { memo } from 'react'; 

function MyComponent(props) {
  /* render using props */
}

function areEqual(prevProps, nextProps) {
  if (prevProps === nextProps) return true;

  return false;
}

export default memo(MyComponent, areEqual);

import React, { memo } from 'react';
import radium from 'radium';

function MyComponent(props) {}

const reduxHook = connect(/* redux Hook */);

export default memo(
  reduxHook (
    radium(
      MyComponent
    )
  )
);

import React, { memo } from 'react';
import radium from 'radium';

function MyComponent(props) {}

const reduxHook = connect(/* redux Hook */);

export default reduxHook (
  radium (
    memo (
      MyComponent
    )
  )
);

const MyContext = React.createContext('ContextChannel');

class MyClass extends React.Component {
  static contextType = MyContext;
  
  componentDidMount() {
    console.log(this.context);
  }

  render() {
    console.log(this.context);
  }
}