LazyLoad.jsx

import React, { Component, PropTypes } from 'react';

export default class LazilyLoad extends Component {
  static propTypes = {
    modules: PropTypes.object,
    children: PropTypes.func.isRequired,
  };

  static defaultProps = { modules: {} };

  state = {
    modules: {},
    isLoaded: false,
  };

  componentDidMount() { this.load(); }

  componentDidUpdate(previous) {
    if (this.props.modules !== previous.modules) {
      this.load();
    }
  }

  async load() {
    this.setState({ isLoaded: false, modules: {} });

    const loaded = {};

    for (const [name, load] of Object.entries(this.props.modules)) {
      const { default: LoadedModule } = await load();
      loaded[name] = LoadedModule;
    }
    this.setState({ isLoaded: true, modules: loaded });
  }

  render() {
    if (!this.state.isLoaded) return null;
    return React.Children.only(this.props.children(this.state.modules));
  }
}