title: Is this the correct way of using React.Suspense?
body: <p>I have several questions about React.Suspense.</p>
  <p>Here is some example code for reference:</p>
  <pre><code>// components/ComponentA/index.js
  import React from &quot;react&quot;;
  
  const style = {
    display: &quot;grid&quot;,
    placeItems: &quot;center&quot;
  };
  export default function ComponentA() {
    return &lt;div style={style}&gt;I am componentA&lt;/div&gt;;
  }
  </code></pre>
  <pre><code>// components/ComponentB/index.js
  import React from &quot;react&quot;;
  
  const style = {
    display: &quot;grid&quot;,
    placeItems: &quot;center&quot;
  };
  export default function ComponentB() {
    return &lt;div style={style}&gt;I am componentB&lt;/div&gt;;
  }
  </code></pre>
  <pre><code>// App.js
  import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  const ComponentA = React.lazy(() =&gt; import(&quot;./components/ComponentA&quot;));
  const ComponentB = React.lazy(() =&gt; import(&quot;./components/ComponentB&quot;));
  
  export default function App() {
    const [state, toggleState] = React.useReducer((state) =&gt; !state, false);
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;button onClick={toggleState}&gt;click to show&lt;/button&gt;
        &lt;React.Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;
          {state ? &lt;ComponentA /&gt; : &lt;ComponentB /&gt;}
        &lt;/React.Suspense&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>When running this code, I've noticed several things right away.</p>
  <p>The first thing I noticed is that when the app loads for the first time, there is a split moment where you can see <code>loading...</code> before <code>I am componentB</code> is rendered.</p>
  <p>The second thing I noticed is that if you click the button, you can, again, for a split moment see <code>loading...</code> before <code>I am componentA</code> is rendered on the screen.</p>
  <p>I assume this is the expected result with dynamic imports.</p>
  <p>The final thing that I noticed is that continuing to toggle the button, I never see <code>loading...</code> again. I assume that this is because the components have already been imported and used by the client. Which is, I also assume, expected behavior.</p>
  <p>My three questions here are,</p>
  <ul>
  <li>am I using React's dynamic imports correctly (or should I use <code>import</code> elsewhere) and,</li>
  <li>when should <code>React.Suspense</code> and dynamic imports be used</li>
  </ul>
  <p>If the components are relatively simple, do I need to even consider lazy loading components?</p>
  <p>Sandbox for reference</p>
  <p><a href="https://codesandbox.io/s/dazzling-glade-dd6we?file=/src/App.js" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="dazzling-glade-dd6we?" /></a></p>