src/components/AsyncComponent/index.js
/**
 * Usually, all the components in the route are loaded regardless of
 * wich route is matched. This function help us to only load the component
 * that responds to the matched route.
 * @param {*} importComponent
 */
Usually, all the components in the route are loaded regardless of
wich route is matched. This function help us to only load the component
that responds to the matched route.
@param {*} importComponent
Usually all the components in the route are loaded regardless of wich route is matched . This function help us to only load the component that responds to the matched route . @param { * } importComponent
function asyncComponent(importComponent) {
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        component: null,
      };
    }
    async componentDidMount() {
      const { default: component } = await importComponent();
      this.setState({
        component,
      });
    }
    render() {
      const C = this.state.component;
      return C ? <C className="async__loaded" {...this.props} /> : null;
    }
  }
  return AsyncComponent;
}
function asyncComponent ( importComponent ) { class AsyncComponent extends React . Component { constructor ( props ) { super ( props ) ; this . state = { component : null , } ; } async componentDidMount ( ) { const { default : component } = await importComponent ( ) ; this . setState ( { component , } ) ; } render ( ) { const C = this . state . component ; return C ? < C className = "async__loaded" { ... this . props } / > : null ; } } return AsyncComponent ; }
Usually, all the components in the route are loaded regardless of
 wich route is matched.
Usually all the components in the route are loaded regardless of wich route is matched .
// Call the imported component and save it in the state // Render the component if it has completed loading // The loaded component // We can add a spinner here // const Loading = () => ( //   <div style={{ color: '#db7093' }}>Component not loaded yet...</div> // );