React Dynamic Imports

September 12, 2018

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 })
    );
}

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

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

Related Articles

• ← Python Spiral Matrix
• React Context Basics →