title: Possible to forward a ref using React.Suspense and React.Lazy?
body: <p>I wondering if it would be possible to use React 16's lazy, Suspense, createRef and forwardRef features together in order to attach a reference to a dynamically imported component. Does anyone know if this is possible. I tried to follow the example (<a href="https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614" rel="nofollow noreferrer">https://github.com/facebook/react/pull/13446/commits/4295ad8e216e0747a22eac3eed73c66b153270d4#diff-e7eafbb41b012aba463f5a2f8fc00f65R1614</a>), however it doesn't quite seem to work with dynamically imported components. </p>
  
  <p>I have been able to get similar desired behavior by setting custom props in the parent component, passing it down to the child component and then setting the ref to that prop in the child's render function(Example below). My only issue with this approach is that it may not be the cleanest solution and it may be difficult to keep the implementation consistent across a large team. It will also make it easier when attempting to place the ref on the actual component.</p>
  
  <p>// Working (Undesired implementation)
  // Parent.js</p>
  
  <pre><code>const LazyClass = lazy(() =&gt; { return import('./Child') };
  
  class Parent extends React.Component {
      this.childRef = React.createRef();
  
      render() {
      return (
          &lt;Suspense fallback={&lt;div&gt;Loading&lt;/div&gt;}&gt;
              &lt;Child forwardRef={this.childRef} /&gt;
          &lt;/Suspense&gt;
          );
      }
  
  }
  </code></pre>
  
  <p>// Child.js</p>
  
  <pre><code>class Child extends React.Component {
  
      render() {
          return (&lt;div&gt;I am the Child!&lt;/div&gt;);
      }
  
  }
  
  export default React.forwardRef(({forwardRef, ...props}/*, ref*/) =&gt; 
      &lt;Child {...props} ref={forwardRef} /&gt;
  );
  </code></pre>
  
  <p>//////////////////////////////////////////////////////
  // Desired Implementation with React.forwardRef()</p>
  
  <p>//Parent.js</p>
  
  <pre><code>const LazyClass = lazy(() =&gt; { return import('./Child') };
  
  class Parent extends React.Component {
  
  
      this.childRef = React.createRef();
  
      render() {
          return (
              &lt;Suspense fallback={&lt;div&gt;Loading&lt;/div&gt;}&gt;
                  &lt;Child ref={this.childRef} /&gt;
              &lt;/Suspense&gt;
          );
      }
  
  }
  </code></pre>
  
  <p>// Child.js</p>
  
  <pre><code>class Child extends React.Component {
  
      render() {
          return (&lt;div&gt;I am the child&lt;/div&gt;);
      }
  
  }
  
  export default React.forwardRef((props, ref) =&gt; 
      &lt;Child { ...props } ref={ref} /&gt;
  );
  </code></pre>
  
  <p>Setting the ref directly on a Lazily loaded component always returns null. It would be nice if it returned the value from React.createRef(). </p>