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

This commit is contained in:
Brian Vaughn
2020-08-06 16:12:32 -04:00
committed by GitHub
parent 32ff428687
commit a63893ff32
3 changed files with 34 additions and 6 deletions
@@ -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.');
});
});
@@ -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',
);
}
}
@@ -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',
);
}
}