Warn about refs on lazy function components (#14645)

Author: gaearon

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -984,6 +984,9 @@ function mountLazyComponent(
 letchild;
 switch(resolvedTag){
 caseFunctionComponent: {
+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()=>{
+constLazyFoo=lazy(()=>{
+constFoo=props=><div/>;
+returnfakeImport(Foo);
+});
+
+constref=React.createRef();
+constroot=ReactTestRenderer.create(
+<Suspensefallback={<Texttext="Loading..."/>}>
+<LazyFooref={ref}/>
+</Suspense>,
+{
+unstable_isConcurrent: true,
+},
+);
+
+expect(root).toFlushAndYield(['Loading...']);
+expect(root).toMatchRenderedOutput(null);
+awaitPromise.resolve();
+expect(()=>{
+expect(root).toFlushAndYield([]);
+}).toWarnDev('Function components cannot be given refs');
+});
 });