title: Lazy loading in react - the component is not loading
body: <p>Can someone please explain why my lazy loaded component never loads?</p>
  
  <p>All is see is the message loading... on the screen...and no errors.</p>
  
  <p>Below is my code:</p>
  
  <pre><code>import React, { Component, lazy, Suspense } from "react";
  import "./App.css";
  //const Mycomp = lazy(() =&gt; import("./components/myComp"));
  const Mycomp = lazy(() =&gt; {
    let x = new Promise(
      () =&gt; {
        import("./components/myComp");
      },
      e =&gt; {
        console.log(e);
      }
    );
    return x;
  });
  
  class App extends Component {
    sayHi = () =&gt; {
      console.log("supa");
    };
  
    render() {
      return (
        &lt;Suspense fallback={&lt;div&gt; loading...&lt;/div&gt;}&gt;
          &lt;div className="App"&gt;
            &lt;header className="App-header"&gt;
              &lt;Mycomp /&gt;
              &lt;input type="button" value="sayHi" onClick={this.sayHi} /&gt;
            &lt;/header&gt;
          &lt;/div&gt;
        &lt;/Suspense&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>This is simply for learning purpose.. so please be kind.. I'm not very familiar with react in general....</p>
  
  <p>below is the code for myComp.jsx:</p>
  
  <pre><code>import React, { Component } from "react";
  
  class Mycomp extends Component {
    state = {};
    render() {
      return &lt;div&gt;Hi i'm loaded now.&lt;/div&gt;;
    }
  }
  
  export default Mycomp;
  </code></pre>