Async component React

asyncomponent.js

import React, { Component } from 'react';

export default function asyncComponent(importComponent) {

  class AsyncComponent extends Component {

    constructor(props) {
      super(props);

      this.state = {
        component: null,
      };
    }

    async componentDidMount() {
      const { default: component } = await importComponent();

      this.setState({
        component: component
      });
    }

    render() {
      const C = this.state.component;

      return C
        ? <C {...this.props} />
        : null;
    }

  }

  return AsyncComponent;
}

using.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider, observer } from 'mobx-react';

import UserStore from './Stores/UserStore';
import LanguageStore from './Stores/Language';

import AsyncComponent from './Components/AsyncComponent';
import cookies from './Utils/cookies';

// Container routes
// import NotMatchContainer from './Containers/NotMatch/NotMatchContainer';
// import AboutContainer from './Containers/About/AboutContainer';
// import HomeContainer from './Containers/Home/HomeContainer';
// import FindContainer from './Containers/Find/FindContainer';

const AboutContainer = () => import('./Components/About/About');
const HomeContainer = () => import('./Components/Home/Home');
const FindContainer = () => import('./Components/Find/Find');
const PayPalContainer = () => import('./Components/Braintree/Braintree');

const NotMatchContainer = () => import('./Components/About/About');

// STORES

const userStore = UserStore.create();
const daCookie = cookies.cookieReader('gen.lang');
const languageStore = LanguageStore.create({ language: daCookie });

const store = {
  user: userStore,
  language: languageStore
};

// If you use React Router, make this component
// render <Router> with your routes. Currently,
// only synchronous routes are hot reloaded, and
// you will see a warning from <Router> on every reload.
// You can ignore this warning. For details, see:
// https://github.com/reactjs/react-router/issues/2182
@observer
export default class App extends Component {
  render() {
    return (
      <Provider {...store}>
        <Router>
          <div>
            <Switch>
              <Route exact path="/" component={AsyncComponent(HomeContainer)} />
              <Route
                exact
                path="/home"
                component={AsyncComponent(HomeContainer)}
              />
              <Route
                exact
                path="/about"
                component={AsyncComponent(AboutContainer)}
              />
              <Route
                exact
                path="/find"
                component={AsyncComponent(FindContainer)}
              />
              <Route
                exact
                path="/braintree"
                component={AsyncComponent(PayPalContainer)}
              />
              <Route component={AsyncComponent(NotMatchContainer)} />
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}