React Dynamic Imports

Example Code

The key action happens by using React's componentDidMount lifecycle method and component state, although the application of when to import can be used anywhere when required.

componentDidMount() {
    import('components/ComponentB').then((module) =>
        this.setState({ module: module.default })
    );
}
copy

Here is the full code example:

import React, { Component } from "react";

/**
 * Dynamically load ComponentB.
 *
 * @class ComponentA
 * @extends {Component}
 */
class ComponentA extends Component {
  constructor(props) {
    super(props);

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

  /**
   * On mount, dynamically fetch ComponentB.
   *
   * @memberof ComponentA
   */
  componentDidMount() {
    import("components/ComponentB").then((module) =>
      this.setState({ module: module.default })
    );
  }

  /**
   * Render ComponentA component.
   *
   * @memberof ComponentA
   * @returns {ComponentA} component Basic div with dynamically loaded child
   */
  render() {
    const { module: ComponentB } = this.state;
    return (
      <div className="component-a">
        {ComponentB && <ComponentB {...this.props} />}
      </div>
    );
  }
}

export default ComponentA;
copy

Hello is a series that is about short, sharp examples. Read more on this series to find small gems to add your toolset.