Exclude forwardRef and memo from stack frames (#18559)
We can't patch the row. We could give these their own "built-in" stack frame since they're conceptually HoCs. However, from a debugging perspective this is not very useful meta data and quite noisy. So I'm just going to exclude them.
Sebastian Markbåge committed
Apr 9, 2020 at 11:42 UTC
cbab25bb5159e82f0d74b0d2ad84d7ad7dd3613a
3 files changed
+16
-7
packages/react-reconciler/src/ReactFiberComponentStack.js
-3
@@ -17,7 +17,6 @@ import {
17
FunctionComponent,
18
IndeterminateComponent,
19
ForwardRef,
20
- MemoComponent,
20
SimpleMemoComponent,
21
Block,
22
ClassComponent,
@@ -50,8 +49,6 @@ function describeFiber(fiber: Fiber): string {
49
return describeFunctionComponentFrame(fiber.type, source, owner);
50
case ForwardRef:
51
return describeFunctionComponentFrame(fiber.type.render, source, owner);
53
- case MemoComponent:
54
- return describeFunctionComponentFrame(fiber.type.type, source, owner);
52
case Block:
53
return describeFunctionComponentFrame(fiber.type._render, source, owner);
54
case ClassComponent:
packages/react-reconciler/src/__tests__/ReactMemo-test.js
+13
-3
@@ -392,12 +392,20 @@ describe('memo', () => {
392
Outer.defaultProps = {outer: 0};
393
394
// No warning expected because defaultProps satisfy both.
395
- ReactNoop.render(<Outer />);
395
+ ReactNoop.render(
396
+ <div>
397
+ <Outer />
398
+ </div>,
399
+ );
400
expect(Scheduler).toFlushWithoutYielding();
401
402
// Mount
403
expect(() => {
400
- ReactNoop.render(<Outer inner="2" middle="3" outer="4" />);
404
+ ReactNoop.render(
405
+ <div>
406
+ <Outer inner="2" middle="3" outer="4" />
407
+ </div>,
408
+ );
409
expect(Scheduler).toFlushWithoutYielding();
410
}).toErrorDev([
411
'Invalid prop `outer` of type `string` supplied to `Inner`, expected `number`.',
@@ -408,7 +416,9 @@ describe('memo', () => {
416
// Update
417
expect(() => {
418
ReactNoop.render(
411
- <Outer inner={false} middle={false} outer={false} />,
419
+ <div>
420
+ <Outer inner={false} middle={false} outer={false} />
421
+ </div>,
422
);
423
expect(Scheduler).toFlushWithoutYielding();
424
}).toErrorDev([
packages/shared/ReactComponentStackFrame.js
+3
-1
@@ -121,7 +121,8 @@ export function describeUnknownElementTypeFrameInDEV(
121
case REACT_FORWARD_REF_TYPE:
122
return describeFunctionComponentFrame(type.render, source, ownerFn);
123
case REACT_MEMO_TYPE:
124
- return describeFunctionComponentFrame(type.type, source, ownerFn);
124
+ // Memo may contain any component type so we recursively resolve it.
125
+ return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn);
126
case REACT_BLOCK_TYPE:
127
return describeFunctionComponentFrame(type._render, source, ownerFn);
128
case REACT_LAZY_TYPE: {
@@ -129,6 +130,7 @@ export function describeUnknownElementTypeFrameInDEV(
130
const payload = lazyComponent._payload;
131
const init = lazyComponent._init;
132
try {
133
+ // Lazy may contain any component type so we recursively resolve it.
134
return describeUnknownElementTypeFrameInDEV(
135
init(payload),
136
source,