Warn about undefined return value for memo and forwardRef (#19550)

facebook · Aug 6, 2020 · a63893f · a63893f
1 parent 32ff428
commit a63893f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
@@ -316,4 +316,24 @@ describe('ReactEmptyComponent', () => {
     const noscript2 = container.firstChild;
     expect(noscript2).toBe(null);
   });
+
+  it('should warn about React.forwardRef that returns undefined', () => {
+    const Empty = () => {};
+    const EmptyForwardRef = React.forwardRef(Empty);
+
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<EmptyForwardRef />);
+    }).toThrowError(
+      'ForwardRef(Empty)(...): Nothing was returned from render.',
+    );
+  });
+
+  it('should warn about React.memo that returns undefined', () => {
+    const Empty = () => {};
+    const EmptyMemo = React.memo(Empty);
+
+    expect(() => {
+      ReactTestUtils.renderIntoDocument(<EmptyMemo />);
+    }).toThrowError('Empty(...): Nothing was returned from render.');
+  });
 });
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -29,7 +29,9 @@ import {
   ClassComponent,
   HostText,
   HostPortal,
+  ForwardRef,
   Fragment,
+  SimpleMemoComponent,
   Block,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
@@ -1393,14 +1395,16 @@ function ChildReconciler(shouldTrackSideEffects) {
         // Intentionally fall through to the next case, which handles both
         // functions and classes
         // eslint-disable-next-lined no-fallthrough
-        case FunctionComponent: {
-          const Component = returnFiber.type;
+        case Block:
+        case FunctionComponent:
+        case ForwardRef:
+        case SimpleMemoComponent: {
           invariant(
             false,
             '%s(...): Nothing was returned from render. This usually means a ' +
               'return statement is missing. Or, to render nothing, ' +
               'return null.',
-            Component.displayName || Component.name || 'Component',
+            getComponentName(returnFiber.type) || 'Component',
           );
         }
       }

diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -29,7 +29,9 @@ import {
   ClassComponent,
   HostText,
   HostPortal,
+  ForwardRef,
   Fragment,
+  SimpleMemoComponent,
   Block,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
@@ -1385,14 +1387,16 @@ function ChildReconciler(shouldTrackSideEffects) {
         // Intentionally fall through to the next case, which handles both
         // functions and classes
         // eslint-disable-next-lined no-fallthrough
-        case FunctionComponent: {
-          const Component = returnFiber.type;
+        case Block:
+        case FunctionComponent:
+        case ForwardRef:
+        case SimpleMemoComponent: {
           invariant(
             false,
             '%s(...): Nothing was returned from render. This usually means a ' +
               'return statement is missing. Or, to render nothing, ' +
               'return null.',
-            Component.displayName || Component.name || 'Component',
+            getComponentName(returnFiber.type) || 'Component',
           );
         }
       }