Warn about refs on lazy function components (#14645)

facebook · Jan 21, 2019 · 2a084f5 · 2a084f5
1 parent b5a3df6
commit 2a084f5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git 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
@@ -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');
+  });
 });