title: React & React-router async components mounted multiple times (componentDidMount called many times)
body: <p>I am using Webpack 3.7.1 and React 15.6.1 and I am loading different components dynamically.</p>
  
  <h2>What i did</h2>
  
  <ul>
  <li>Using <strong>AsyncComponent</strong> and <strong>import()</strong> to generate the chunks and load components asynchronously</li>
  <li><strong>Configured</strong> the webpack.config file properly so that the chunks are created (code splitting)</li>
  </ul>
  
  <h2>The issue</h2>
  
  <ul>
  <li>The components are rerendered (mounted) multiple times. If I console log something in any of the componentDidMount() of any components, it appears in my console 2 or more times !It was not doing so before : when I was just importing normally the component ...</li>
  </ul>
  
  <h2>The behaviour before I change to async components</h2>
  
  <ul>
  <li>The components were loaded correctly and mounted only one time ...</li>
  </ul>
  
  <h2>My Webpack.config file</h2>
  
  <pre><code>module.exports = {
    devServer: {
      historyApiFallback: true
    },
    entry: {
      app:"./src/index.js",
      vendor: [
        "axios",
        "react",
        "react-dom",
        "react-redux",
        "react-router",
        "react-router-dom",
        "redux"
      ]
    },
    output: {
      path: __dirname + '/public/views',
      filename: '[name].js',
      chunkFilename: '[chunkhash].chunk.js',
      publicPath: "/views/"
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: "babel-loader",
          exclude: [/node_modules/, /pdfmake.js$/]
        },
        {
          test: /\.json$/,
          loader: "json-loader"
        }
      ]
    },
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        minChunks: Infinity
      }),
      new webpack.NamedModulesPlugin(),
      new HtmlWebpackPlugin({
        filename:  __dirname + "/views/index.ejs",
        template: __dirname + "/views/template.ejs",
        inject: 'body',
        chunks: ['vendor', 'app'],
        chunksSortMode: 'manual'
      }),
      new PreloadWebpackPlugin({
        rel: "preload",
        include: ["vendor", "app"]
      }),
      new webpack.optimize.OccurrenceOrderPlugin(),
    ]
  };
  </code></pre>
  
  <h2>My AppContainer.js file</h2>
  
  <pre><code> /**
   * General container of the website
   */
  class AppContainer extends Component {
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      console.log("MOUNTING APP CONTAINER")
    }
  
  
  
    render() {
      const HomePage = AsyncComponent(() =&gt;
        import(/* webpackChunkName:"HomePage"  */ "../components/homepage/homepage")
      );
  
  
      return (
        &lt;div&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/" component={HomePage} /&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The component itself is more complicated (doing API calls and there are more routes) but simplified it here for stack purposes ;)</p>
  
  <h2>My AsyncComponent.js file</h2>
  
  <pre><code>import React, { Component } from "react";
  
  export default function asyncComponent(importComponent) {
      class AsyncComponent extends Component {
        constructor(props) {
          super(props);
  
          this.state = {
            component: null
          };
        }
  
        async componentDidMount() {
          const { default: component } = await importComponent();
  
          this.setState({
            component: component
          });
        }
  
        render() {
          const C = this.state.component;
  
          return C ? &lt;C {...this.props} /&gt; : null;
        }
      }
  
      return AsyncComponent;
    }
  </code></pre>
  
  <p>I guess the issue comes from the AsyncComponents/chunks generation as I did not have this issue before using AsyncCOmponents and splitting my code in chunks... But I don't get where it is coming from exactly</p>
  
  <h1>Thank you very much for your help</h1>