React Async Component Loader

AsyncComponentLoader.js

import React, { Component } from 'react';

/**
 * HOC for asynchronously loading a component dependency.
 * 
 * Use: replace
 * import MyComponent from './path/to/my-component';
 *
 * With:
 * const MyComponent = AsyncLoader(() => import('./path/to/my-component'));
 *
 * Expand as needed
 */

export default function AsyncLoader(importComponent) {
    
    return class AsyncComponent extends Component {
        
        state = { component: null, error: false }

        componentDidMount(){
            this.mounted = true;
            importComponent()
                .then(this.onComponentFetched)
                .catch(this.onComponentFail);
        }

        onComponentFetched = componentResponse => {
            const component = componentResponse.default;
            return this.setState(setError({ component }, false));
        }

        onComponentFail = () => this.setState(setError({}))

        render() {
            if (!this.state.component) {
                return (this.state.error) ?
                (<p>Error loading component</p>) : 
                (<p>Loading ... </p>)
            }
            const WrappedComponent = this.state.component;
            return <WrappedComponent {...this.props} />
        }
    }
}

function setError(obj, hasError = true) {
    return Object.assign({ }, { ...obj }, { error: hasError });
}