From cbab25bb5159e82f0d74b0d2ad84d7ad7dd3613a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Thu, 9 Apr 2020 11:42:22 -0700 Subject: [PATCH] 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. --- .../src/ReactFiberComponentStack.js | 3 --- .../src/__tests__/ReactMemo-test.js | 16 +++++++++++++--- packages/shared/ReactComponentStackFrame.js | 4 +++- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js index 5fbe1014b957..5867d4e9be6b 100644 --- a/packages/react-reconciler/src/ReactFiberComponentStack.js +++ b/packages/react-reconciler/src/ReactFiberComponentStack.js @@ -17,7 +17,6 @@ import { FunctionComponent, IndeterminateComponent, ForwardRef, - MemoComponent, SimpleMemoComponent, Block, ClassComponent, @@ -50,8 +49,6 @@ function describeFiber(fiber: Fiber): string { return describeFunctionComponentFrame(fiber.type, source, owner); case ForwardRef: return describeFunctionComponentFrame(fiber.type.render, source, owner); - case MemoComponent: - return describeFunctionComponentFrame(fiber.type.type, source, owner); case Block: return describeFunctionComponentFrame(fiber.type._render, source, owner); case ClassComponent: diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js index aa2774085dc1..24788e0e8724 100644 --- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js +++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js @@ -392,12 +392,20 @@ describe('memo', () => { Outer.defaultProps = {outer: 0}; // No warning expected because defaultProps satisfy both. - ReactNoop.render(); + ReactNoop.render( +
+ +
, + ); expect(Scheduler).toFlushWithoutYielding(); // Mount expect(() => { - ReactNoop.render(); + ReactNoop.render( +
+ +
, + ); expect(Scheduler).toFlushWithoutYielding(); }).toErrorDev([ 'Invalid prop `outer` of type `string` supplied to `Inner`, expected `number`.', @@ -408,7 +416,9 @@ describe('memo', () => { // Update expect(() => { ReactNoop.render( - , +
+ +
, ); expect(Scheduler).toFlushWithoutYielding(); }).toErrorDev([ diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js index 956efa32f9bc..76043711fbeb 100644 --- a/packages/shared/ReactComponentStackFrame.js +++ b/packages/shared/ReactComponentStackFrame.js @@ -121,7 +121,8 @@ export function describeUnknownElementTypeFrameInDEV( case REACT_FORWARD_REF_TYPE: return describeFunctionComponentFrame(type.render, source, ownerFn); case REACT_MEMO_TYPE: - return describeFunctionComponentFrame(type.type, source, ownerFn); + // Memo may contain any component type so we recursively resolve it. + return describeUnknownElementTypeFrameInDEV(type.type, source, ownerFn); case REACT_BLOCK_TYPE: return describeFunctionComponentFrame(type._render, source, ownerFn); case REACT_LAZY_TYPE: { @@ -129,6 +130,7 @@ export function describeUnknownElementTypeFrameInDEV( const payload = lazyComponent._payload; const init = lazyComponent._init; try { + // Lazy may contain any component type so we recursively resolve it. return describeUnknownElementTypeFrameInDEV( init(payload), source,