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.
facebook · Apr 9, 2020 · cbab25b · cbab25b
1 parent 26fc164
commit cbab25b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git 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
@@ -392,12 +392,20 @@ describe('memo', () => {
         Outer.defaultProps = {outer: 0};
 
         // No warning expected because defaultProps satisfy both.
-        ReactNoop.render(<Outer />);
+        ReactNoop.render(
+          <div>
+            <Outer />
+          </div>,
+        );
         expect(Scheduler).toFlushWithoutYielding();
 
         // Mount
         expect(() => {
-          ReactNoop.render(<Outer inner="2" middle="3" outer="4" />);
+          ReactNoop.render(
+            <div>
+              <Outer inner="2" middle="3" outer="4" />
+            </div>,
+          );
           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(
-            <Outer inner={false} middle={false} outer={false} />,
+            <div>
+              <Outer inner={false} middle={false} outer={false} />
+            </div>,
           );
           expect(Scheduler).toFlushWithoutYielding();
         }).toErrorDev([

diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
@@ -121,14 +121,16 @@ 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: {
         const lazyComponent: LazyComponent<any, any> = (type: any);
         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,