diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index 63623033af146..9c4a72b7fedcb 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/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, diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js index 4ce785815447b..699f8e3a98889 100644 --- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js +++ b/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 =>
; + return fakeImport(Foo); + }); + + const ref = React.createRef(); + const root = ReactTestRenderer.create( + }> + + , + { + 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'); + }); });