facebook · sebmarkbage · Apr 6, 2020 · Apr 3, 2020 · Apr 4, 2020 · Apr 4, 2020
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -619,11 +619,11 @@ exports[`Store should show the right display names for special component types 1
       <MyComponent>
       <MyComponent> [ForwardRef]
     ▾ <Anonymous> [ForwardRef]
-        <MyComponent>
+        <MyComponent2>
       <Custom> [ForwardRef]
-      <MyComponent> [Memo]
+      <MyComponent4> [Memo]
     ▾ <MyComponent> [Memo]
         <MyComponent> [ForwardRef]
     ▾ <Suspense>
-        <MyComponent>
+        <MyComponent5>
 `;
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -856,16 +856,20 @@ describe('Store', () => {
 
     const MyComponent = (props, ref) => null;
     const FowardRefComponent = React.forwardRef(MyComponent);
+    const MyComponent2 = (props, ref) => null;
     const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
-      <MyComponent />
+      <MyComponent2 />
     ));
+    const MyComponent3 = (props, ref) => null;
     const FowardRefComponentWithCustomDisplayName = React.forwardRef(
-      MyComponent,
+      MyComponent3,
     );
     FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
-    const MemoComponent = React.memo(MyComponent);
+    const MyComponent4 = (props, ref) => null;
+    const MemoComponent = React.memo(MyComponent4);
     const MemoForwardRefComponent = React.memo(FowardRefComponent);
-    const LazyComponent = React.lazy(() => fakeImport(MyComponent));
+    const MyComponent5 = (props, ref) => null;
+    const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
     const App = () => (
       <React.Fragment>

diff --git a/packages/react-dom/src/__tests__/findDOMNode-test.js b/packages/react-dom/src/__tests__/findDOMNode-test.js
@@ -124,7 +124,6 @@ describe('findDOMNode', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in div (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
@@ -154,8 +153,7 @@ describe('findDOMNode', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in div (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });

diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -15,7 +15,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 import * as React from 'react';
 import invariant from 'shared/invariant';
 import getComponentName from 'shared/getComponentName';
-import describeComponentFrame from 'shared/describeComponentFrame';
+import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   warnAboutDeprecatedLifecycles,
@@ -112,11 +112,11 @@ if (__DEV__) {
   };
 
   describeStackFrame = function(element): string {
-    const source = element._source;
-    const type = element.type;
-    const name = getComponentName(type);
-    const ownerName = null;
-    return describeComponentFrame(name, source, ownerName);
+    return describeUnknownElementTypeFrameInDEV(
+      element.type,
+      element._source,
+      null,
+    );
   };
 
   pushCurrentDebugStack = function(stack: Array<Frame>) {

diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -25,7 +25,7 @@ import {
   getPublicRootInstance,
 } from 'react-reconciler/src/ReactFiberReconciler';
 // TODO: direct imports like some-package/src/* are bad. Fix me.
-import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from 'react-reconciler/src/ReactFiberComponentStack';
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {
   setBatchingImplementation,

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -773,7 +773,6 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
@@ -811,8 +810,7 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });
@@ -846,7 +844,6 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
@@ -882,8 +879,7 @@ describe('ReactFabric', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });

diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -483,7 +483,6 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child);
@@ -521,8 +520,7 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child);
   });
@@ -556,7 +554,6 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in StrictMode (at **)' +
         '\n    in ContainsStrictModeChild (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
@@ -592,8 +589,7 @@ describe('ReactNative', () => {
         'Learn more about using refs safely here: ' +
         'https://fb.me/react-strict-mode-find-node' +
         '\n    in RCTView (at **)' +
-        '\n    in IsInStrictMode (at **)' +
-        '\n    in StrictMode (at **)',
+        '\n    in IsInStrictMode (at **)',
     ]);
     expect(match).toBe(child._nativeTag);
   });

diff --git a/packages/react-reconciler/src/ReactCapturedValue.js b/packages/react-reconciler/src/ReactCapturedValue.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactFiber';
 
-import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 
 export type CapturedValue<T> = {|
   value: T,

diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
@@ -44,10 +44,8 @@ import {
   createFiberFromPortal,
 } from './ReactFiber';
 import {emptyRefsObject} from './ReactFiberClassComponent';
-import {
-  getCurrentFiberStackInDev,
-  getStackByFiberInDevAndProd,
-} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
+import {getCurrentFiberStackInDev} from './ReactCurrentFiber';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading';
 import {StrictMode} from './ReactTypeOfMode';
 

diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js
@@ -10,50 +10,11 @@
 import type {Fiber} from './ReactFiber';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {
-  HostRoot,
-  HostPortal,
-  HostText,
-  Fragment,
-  ContextProvider,
-  ContextConsumer,
-} from './ReactWorkTags';
-import describeComponentFrame from 'shared/describeComponentFrame';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 import getComponentName from 'shared/getComponentName';
 
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
-function describeFiber(fiber: Fiber): string {
-  switch (fiber.tag) {
-    case HostRoot:
-    case HostPortal:
-    case HostText:
-    case Fragment:
-    case ContextProvider:
-    case ContextConsumer:
-      return '';
-    default:
-      const owner = fiber._debugOwner;
-      const source = fiber._debugSource;
-      const name = getComponentName(fiber.type);
-      let ownerName = null;
-      if (owner) {
-        ownerName = getComponentName(owner.type);
-      }
-      return describeComponentFrame(name, source, ownerName);
-  }
-}
-
-export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
-  let info = '';
-  let node = workInProgress;
-  do {
-    info += describeFiber(node);
-    node = node.return;
-  } while (node);
-  return info;
-}
-
 export let current: Fiber | null = null;
 export let isRendering: boolean = false;
 

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -73,7 +73,7 @@ import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
 
 import {onCommitUnmount} from './ReactFiberDevToolsHook';
-import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 import {resolveDefaultProps} from './ReactFiberLazyComponent';
 import {
   getCommitTime,

diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber';
+
+import {
+  HostComponent,
+  LazyComponent,
+  SuspenseComponent,
+  SuspenseListComponent,
+  FunctionComponent,
+  IndeterminateComponent,
+  ForwardRef,
+  MemoComponent,
+  SimpleMemoComponent,
+  Block,
+  ClassComponent,
+} from './ReactWorkTags';
+import {
+  describeBuiltInComponentFrame,
+  describeFunctionComponentFrame,
+  describeClassComponentFrame,
+} from 'shared/ReactComponentStackFrame';
+
+function describeFiber(fiber: Fiber): string {
+  const owner: null | Function = __DEV__
+    ? fiber._debugOwner
+      ? fiber._debugOwner.type
+      : null
+    : null;
+  const source = __DEV__ ? fiber._debugSource : null;
+  switch (fiber.tag) {
+    case HostComponent:
+      return describeBuiltInComponentFrame(fiber.type, source, owner);
+    case LazyComponent:
+      return describeBuiltInComponentFrame('Lazy', source, owner);
+    case SuspenseComponent:
+      return describeBuiltInComponentFrame('Suspense', source, owner);
+    case SuspenseListComponent:
+      return describeBuiltInComponentFrame('SuspenseList', source, owner);
+    case FunctionComponent:
+    case IndeterminateComponent:
+    case SimpleMemoComponent:
+      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:
+      return describeClassComponentFrame(fiber.type, source, owner);
+    default:
+      return '';
+  }
+}
+
+export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
+  let info = '';
+  let node = workInProgress;
+  do {
+    info += describeFiber(node);
+    node = node.return;
+  } while (node);
+  return info;
+}
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -69,8 +69,8 @@ import {
   IsThisRendererActing,
 } from './ReactFiberWorkLoop';
 import {createUpdate, enqueueUpdate} from './ReactUpdateQueue';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 import {
-  getStackByFiberInDevAndProd,
   isRendering as ReactCurrentFiberIsRendering,
   current as ReactCurrentFiberCurrent,
 } from './ReactCurrentFiber';

diff --git a/packages/react-reconciler/src/ReactFiberThrow.js b/packages/react-reconciler/src/ReactFiberThrow.js
@@ -40,7 +40,7 @@ import {
   ForceUpdate,
   enqueueUpdate,
 } from './ReactUpdateQueue';
-import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading';
 import {
   suspenseStackCursor,

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -159,11 +159,11 @@ import {
 // DEV stuff
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 import {
   isRendering as ReactCurrentDebugFiberIsRenderingInDEV,
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
-  getStackByFiberInDevAndProd,
 } from './ReactCurrentFiber';
 import {
   invokeGuardedCallback,

diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactFiber';
 
-import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
+import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 
 import getComponentName from 'shared/getComponentName';
 import {StrictMode} from './ReactTypeOfMode';

diff --git a/packages/react/src/ReactDebugCurrentFrame.js b/packages/react/src/ReactDebugCurrentFrame.js
@@ -9,8 +9,7 @@
 
 import type {ReactElement} from 'shared/ReactElementType';
 
-import describeComponentFrame from 'shared/describeComponentFrame';
-import getComponentName from 'shared/getComponentName';
+import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 
 const ReactDebugCurrentFrame = {};
 
@@ -38,12 +37,11 @@ if (__DEV__) {
 
     // Add an extra top frame while an element is being validated
     if (currentlyValidatingElement) {
-      const name = getComponentName(currentlyValidatingElement.type);
       const owner = currentlyValidatingElement._owner;
-      stack += describeComponentFrame(
-        name,
+      stack += describeUnknownElementTypeFrameInDEV(
+        currentlyValidatingElement.type,
         currentlyValidatingElement._source,
-        owner && getComponentName(owner.type),
+        owner ? owner.type : null,
       );
     }