title: React.lazy and prefetching components
body: <p>I have a 2 step Application Flow that looks like this:</p>
  
  <pre><code>const Step1 = React.lazy(() =&gt; import('./Step1'));
  const Step1 = React.lazy(() =&gt; import('./Step2'));
  
  &lt;Suspense fallback={&lt;Loading /&gt;}&gt;
    &lt;Route path="/step1" render={() =&gt; &lt;Step1 /&gt;} /&gt;
    &lt;Route path="/step2" render={() =&gt; &lt;Step2 /&gt;} /&gt;
  &lt;/Suspense&gt;
  </code></pre>
  
  <p>Using React.lazy, I can defer loading <code>&lt;Step2 /&gt;</code> while the user is on <code>&lt;Step1 /&gt;</code>, which can improve initial page load. However, I would like to prefetch <code>&lt;Step2 /&gt;</code> while the user is on <code>&lt;Step1 /&gt;</code> as an optimization. Is there an API to do this with React.lazy?</p>
  
  <p>Edit:</p>
  
  <p>To elaborate - I'm using a router to render a 2 step form. Initially the user will start on <code>/step1</code>. After the user completes all the tasks in <code>&lt;Step1 /&gt;</code> they will be routed to path <code>/step2</code>. At this point the router will render the <code>&lt;Step2 /&gt;</code> component.</p>
  
  <p>I'm asking if there is a pattern to pre-fetch <code>&lt;Step2 /&gt;</code> while the user is still on <code>&lt;Step1 /&gt;</code>.</p>