Warn for forwardRef(memo(...)) (#14070)
People are probably gonna do this all the time.
Sophie Alpert committed
Nov 2, 2018 at 12:32 UTC
c898020e015f4ee6f793a652668d6d78b0d43e76
2 files changed
+26
-2
packages/react/src/__tests__/forwardRef-test.js
+17
@@ -353,4 +353,21 @@ describe('forwardRef', () => {
353
expect(ref.current).toBe(null);
354
expect(differentRef.current.type).toBe('div');
355
});
356
+
357
+ it('warns on forwardRef(memo(...))', () => {
358
+ expect(() => {
359
+ React.forwardRef(
360
+ React.memo((props, ref) => {
361
+ return null;
362
+ }),
363
+ );
364
+ }).toWarnDev(
365
+ [
366
+ 'Warning: forwardRef requires a render function but received a `memo` ' +
367
+ 'component. Instead of forwardRef(memo(...)), use ' +
368
+ 'memo(forwardRef(...)).',
369
+ ],
370
+ {withoutStack: true},
371
+ );
372
+ });
373
});
packages/react/src/forwardRef.js
+9
-2
@@ -5,7 +5,7 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import {REACT_FORWARD_REF_TYPE} from 'shared/ReactSymbols';
8
+import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
9
10
import warningWithoutStack from 'shared/warningWithoutStack';
11
@@ -13,7 +13,14 @@ export default function forwardRef<Props, ElementType: React$ElementType>(
13
render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
14
) {
15
if (__DEV__) {
16
- if (typeof render !== 'function') {
16
+ if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
17
+ warningWithoutStack(
18
+ false,
19
+ 'forwardRef requires a render function but received a `memo` ' +
20
+ 'component. Instead of forwardRef(memo(...)), use ' +
21
+ 'memo(forwardRef(...)).',
22
+ );
23
+ } else if (typeof render !== 'function') {
24
warningWithoutStack(
25
false,
26
'forwardRef requires a render function but was given %s.',