A composed HOC for code splitting in react (requires recompose)

AsyncContainer.js

import React from 'react';
import { withState, compose, lifecycle } from 'recompose';

export default componentToImport => {
  const state = withState('component', 'setComponent', null);

  const hooks = lifecycle({
    async componentDidMount() {
      const { default: C } = await componentToImport();
      this.props.setComponent(() => props => <C {...props} />);
    }
  });

  const AsyncComponent = ({ component: C, ...props }) =>
    C ? <C {...props} /> : null;

  const AsyncContainer = compose(state, hooks)(AsyncComponent);

  return AsyncContainer;
};

implementation.js

import AsyncContainer from './AsyncContainer';

const AsyncSomething = AsyncContainer(() => import('./somecomponent'));

/* ............ */
<Route component={AsyncSomething} path='/something' />
  
/* ............ */
<AsyncSomething />