Warn about refs on lazy function components (#14645)

Author: gaearon

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -984,6 +984,9 @@ function mountLazyComponent(
   let child;
   switch (resolvedTag) {
     case FunctionComponent: {
+      if (__DEV__) {
+        validateFunctionComponentInDev(workInProgress, Component);
+      }
       child = updateFunctionComponent(
         null,
         workInProgress,

packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js

@@ -1064,4 +1064,28 @@ describe('ReactLazy', () => {
     root.unstable_flushAll();
     expect(root).toMatchRenderedOutput('2');
   });
+
+  it('warns about ref on functions for lazy-loaded components', async () => {
+    const LazyFoo = lazy(() => {
+      const Foo = props => <div />;
+      return fakeImport(Foo);
+    });
+
+    const ref = React.createRef();
+    const root = ReactTestRenderer.create(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <LazyFoo ref={ref} />
+      </Suspense>,
+      {
+        unstable_isConcurrent: true,
+      },
+    );
+
+    expect(root).toFlushAndYield(['Loading...']);
+    expect(root).toMatchRenderedOutput(null);
+    await Promise.resolve();
+    expect(() => {
+      expect(root).toFlushAndYield([]);
+    }).toWarnDev('Function components cannot be given refs');
+  });
 });