{"commit":{"shortRevision":"7df65725ba","revision":"7df65725ba7826508e0f3c0f1c6f088efdbecfca","authorName":"Brian Vaughn","subject":"Split getComponentName into getComponentNameFromFiber and getComponentNameFromType (#20940)","authorEmail":"bvaughn@fb.com","authoredAt":"2021-03-05T16:02:02-05:00"},"body":"Split getComponentName into getComponentNameFromFiber and getComponentNameFromType","files":[{"status":"M","path":"packages\/react-dom\/src\/client\/ReactDOMLegacy.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRenderer.js"},{"status":"M","path":"packages\/react-dom\/src\/server\/ReactPartialRendererContext.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactFabric.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeFiberInspector.js"},{"status":"M","path":"packages\/react-native-renderer\/src\/ReactNativeRenderer.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactChildFiber.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactChildFiber.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactCurrentFiber.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiber.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberClassComponent.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberClassComponent.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberContext.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberContext.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberErrorLogger.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberHooks.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberReconciler.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberReconciler.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberThrow.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberThrow.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberTreeReflection.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactStrictModeWarnings.new.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactStrictModeWarnings.old.js"},{"status":"M","path":"packages\/react-reconciler\/src\/ReactTestSelectors.js"},{"status":"M","path":"packages\/react-reconciler\/src\/SchedulingProfiler.js"},{"status":"A","path":"packages\/react-reconciler\/src\/getComponentNameFromFiber.js"},{"status":"M","path":"packages\/react-test-renderer\/src\/ReactTestRenderer.js"},{"status":"M","path":"packages\/react\/src\/ReactElement.js"},{"status":"M","path":"packages\/react\/src\/ReactElementValidator.js"},{"status":"M","path":"packages\/react\/src\/jsx\/ReactJSXElement.js"},{"status":"M","path":"packages\/react\/src\/jsx\/ReactJSXElementValidator.js"},{"status":"R086","path":"packages\/shared\/getComponentNameFromType.js","previousPath":"packages\/shared\/getComponentName.js"}],"patch":"diff --git a\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js b\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\nindex 6ca009233b..7a3608a493 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMLegacy.js\n@@ -32,7 +32,7 @@ import {\n findHostInstance,\n findHostInstanceWithWarning,\n } from 'react-reconciler\/src\/ReactFiberReconciler';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import invariant from 'shared\/invariant';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {has as hasInstance} from 'shared\/ReactInstanceMap';\n@@ -235,7 +235,7 @@ export function findDOMNode(\n 'never access something that requires stale data from the previous ' +\n 'render, such as refs. Move this logic to componentDidMount and ' +\n 'componentDidUpdate instead.',\n- getComponentName(owner.type) || 'A component',\n+ getComponentNameFromType(owner.type) || 'A component',\n );\n }\n owner.stateNode._warnedAboutRefsInRender = true;\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\nindex a8528ed946..d01c431e73 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRenderer.js\n@@ -14,7 +14,7 @@ import type {ReactProvider, ReactContext} from 'shared\/ReactTypes';\n \n import * as React from 'react';\n import invariant from 'shared\/invariant';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import {describeUnknownElementTypeFrameInDEV} from 'shared\/ReactComponentStackFrame';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {\n@@ -259,7 +259,7 @@ function warnNoop(\n if (__DEV__) {\n const constructor = publicInstance.constructor;\n const componentName =\n- (constructor && getComponentName(constructor)) || 'ReactClass';\n+ (constructor && getComponentNameFromType(constructor)) || 'ReactClass';\n const warningKey = componentName + '.' + callerName;\n if (didWarnAboutNoopUpdateForComponent[warningKey]) {\n return;\n@@ -404,7 +404,7 @@ function validateRenderResult(child, type) {\n '%s(...): Nothing was returned from render. This usually means a ' +\n 'return statement is missing. Or, to render nothing, ' +\n 'return null.',\n- getComponentName(type) || 'Component',\n+ getComponentNameFromType(type) || 'Component',\n );\n }\n }\n@@ -467,7 +467,8 @@ function resolve(\n if (typeof Component.getDerivedStateFromProps === 'function') {\n if (__DEV__) {\n if (inst.state === null || inst.state === undefined) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName =\n+ getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutUninitializedState[componentName]) {\n console.error(\n '`%s` uses `getDerivedStateFromProps` but its initial state is ' +\n@@ -491,7 +492,8 @@ function resolve(\n \n if (__DEV__) {\n if (partialState === undefined) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName =\n+ getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutUndefinedDerivedState[componentName]) {\n console.error(\n '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +\n@@ -513,7 +515,8 @@ function resolve(\n Component.prototype &&\n typeof Component.prototype.render === 'function'\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName =\n+ getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutBadClass[componentName]) {\n console.error(\n@@ -535,7 +538,8 @@ function resolve(\n \/\/ Support for module components is deprecated and is removed behind a flag.\n \/\/ Whether or not it would crash later, we want to show a good message in DEV first.\n if (inst != null && inst.render != null) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName =\n+ getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutModulePatternComponent[componentName]) {\n console.error(\n 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n@@ -583,7 +587,8 @@ function resolve(\n warnAboutDeprecatedLifecycles &&\n inst.componentWillMount.__suppressDeprecationWarning !== true\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName =\n+ getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutDeprecatedWillMount[componentName]) {\n console.warn(\n@@ -665,7 +670,7 @@ function resolve(\n console.error(\n '%s uses the legacy childContextTypes API which is no longer supported. ' +\n 'Use React.createContext() instead.',\n- getComponentName(Component) || 'Unknown',\n+ getComponentNameFromType(Component) || 'Unknown',\n );\n }\n }\n@@ -678,7 +683,7 @@ function resolve(\n invariant(\n contextKey in childContextTypes,\n '%s.getChildContext(): key \"%s\" is not defined in childContextTypes.',\n- getComponentName(Component) || 'Unknown',\n+ getComponentNameFromType(Component) || 'Unknown',\n contextKey,\n );\n }\n@@ -687,7 +692,7 @@ function resolve(\n console.error(\n '%s.getChildContext(): childContextTypes must be defined in order to ' +\n 'use getChildContext().',\n- getComponentName(Component) || 'Unknown',\n+ getComponentNameFromType(Component) || 'Unknown',\n );\n }\n }\n@@ -1298,7 +1303,7 @@ class ReactDOMServerRenderer {\n \"it's defined in, or you might have mixed up default and \" +\n 'named imports.';\n }\n- const ownerName = owner ? getComponentName(owner) : null;\n+ const ownerName = owner ? getComponentNameFromType(owner) : null;\n if (ownerName) {\n info += '\\n\\nCheck the render method of `' + ownerName + '`.';\n }\ndiff --git a\/packages\/react-dom\/src\/server\/ReactPartialRendererContext.js b\/packages\/react-dom\/src\/server\/ReactPartialRendererContext.js\nindex 87b9be06b0..65af591e36 100644\n--- a\/packages\/react-dom\/src\/server\/ReactPartialRendererContext.js\n+++ b\/packages\/react-dom\/src\/server\/ReactPartialRendererContext.js\n@@ -12,7 +12,7 @@ import type {ReactContext} from 'shared\/ReactTypes';\n \n import {disableLegacyContext} from 'shared\/ReactFeatureFlags';\n import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared\/ReactSymbols';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import checkPropTypes from 'shared\/checkPropTypes';\n \n let didWarnAboutInvalidateContextType;\n@@ -105,7 +105,7 @@ export function processContext(\n console.error(\n '%s defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext().%s',\n- getComponentName(type) || 'Component',\n+ getComponentNameFromType(type) || 'Component',\n addendum,\n );\n }\n@@ -121,7 +121,7 @@ export function processContext(\n console.error(\n '%s uses the legacy contextTypes API which is no longer supported. ' +\n 'Use React.createContext() with static contextType instead.',\n- getComponentName(type) || 'Unknown',\n+ getComponentNameFromType(type) || 'Unknown',\n );\n }\n }\n@@ -142,7 +142,7 @@ export function processContext(\n console.error(\n '%s uses the legacy contextTypes API which is no longer supported. ' +\n 'Use React.createContext() with React.useContext() instead.',\n- getComponentName(type) || 'Unknown',\n+ getComponentNameFromType(type) || 'Unknown',\n );\n }\n }\ndiff --git a\/packages\/react-native-renderer\/src\/ReactFabric.js b\/packages\/react-native-renderer\/src\/ReactFabric.js\nindex 9761124e7d..82a6cb7e6b 100644\n--- a\/packages\/react-native-renderer\/src\/ReactFabric.js\n+++ b\/packages\/react-native-renderer\/src\/ReactFabric.js\n@@ -43,7 +43,7 @@ import {\n } from '.\/ReactNativeFiberInspector';\n import {LegacyRoot} from 'react-reconciler\/src\/ReactRootTags';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n \n@@ -60,7 +60,7 @@ function findHostInstance_DEPRECATED(\n 'never access something that requires stale data from the previous ' +\n 'render, such as refs. Move this logic to componentDidMount and ' +\n 'componentDidUpdate instead.',\n- getComponentName(owner.type) || 'A component',\n+ getComponentNameFromType(owner.type) || 'A component',\n );\n }\n \n@@ -111,7 +111,7 @@ function findNodeHandle(componentOrHandle: any): ?number {\n 'never access something that requires stale data from the previous ' +\n 'render, such as refs. Move this logic to componentDidMount and ' +\n 'componentDidUpdate instead.',\n- getComponentName(owner.type) || 'A component',\n+ getComponentNameFromType(owner.type) || 'A component',\n );\n }\n \ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeFiberInspector.js b\/packages\/react-native-renderer\/src\/ReactNativeFiberInspector.js\nindex d008e86204..04ddc968d7 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeFiberInspector.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeFiberInspector.js\n@@ -14,7 +14,7 @@ import {\n findCurrentHostFiber,\n findCurrentFiberUsingSlowPath,\n } from 'react-reconciler\/src\/ReactFiberTreeReflection';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import {HostComponent} from 'react-reconciler\/src\/ReactWorkTags';\n import invariant from 'shared\/invariant';\n \/\/ Module provided by RN:\n@@ -81,7 +81,7 @@ if (__DEV__) {\n \n const createHierarchy = function(fiberHierarchy) {\n return fiberHierarchy.map(fiber => ({\n- name: getComponentName(fiber.type),\n+ name: getComponentNameFromType(fiber.type),\n getInspectorData: findNodeHandle => {\n return {\n props: getHostProps(fiber),\ndiff --git a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\nindex 547fdd2de5..36b9e2b1e2 100644\n--- a\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n+++ b\/packages\/react-native-renderer\/src\/ReactNativeRenderer.js\n@@ -46,7 +46,7 @@ import {\n } from '.\/ReactNativeFiberInspector';\n import {LegacyRoot} from 'react-reconciler\/src\/ReactRootTags';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n \n const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;\n \n@@ -63,7 +63,7 @@ function findHostInstance_DEPRECATED(\n 'never access something that requires stale data from the previous ' +\n 'render, such as refs. Move this logic to componentDidMount and ' +\n 'componentDidUpdate instead.',\n- getComponentName(owner.type) || 'A component',\n+ getComponentNameFromType(owner.type) || 'A component',\n );\n }\n \n@@ -110,7 +110,7 @@ function findNodeHandle(componentOrHandle: any): ?number {\n 'never access something that requires stale data from the previous ' +\n 'render, such as refs. Move this logic to componentDidMount and ' +\n 'componentDidUpdate instead.',\n- getComponentName(owner.type) || 'A component',\n+ getComponentNameFromType(owner.type) || 'A component',\n );\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactChildFiber.new.js b\/packages\/react-reconciler\/src\/ReactChildFiber.new.js\nindex 222a8730c4..f9041ce659 100644\n--- a\/packages\/react-reconciler\/src\/ReactChildFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactChildFiber.new.js\n@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared\/ReactTypes';\n import type {Fiber} from '.\/ReactInternalTypes';\n import type {Lanes} from '.\/ReactFiberLane.new';\n \n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {Placement, ChildDeletion} from '.\/ReactFiberFlags';\n import {\n getIteratorFn,\n@@ -82,7 +82,7 @@ if (__DEV__) {\n );\n child._store.validated = true;\n \n- const componentName = getComponentName(returnFiber.type) || 'Component';\n+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';\n \n if (ownerHasKeyUseWarning[componentName]) {\n return;\n@@ -124,7 +124,8 @@ function coerceRef(\n element._owner.stateNode !== element._self\n )\n ) {\n- const componentName = getComponentName(returnFiber.type) || 'Component';\n+ const componentName =\n+ getComponentNameFromFiber(returnFiber) || 'Component';\n if (!didWarnAboutStringRefs[componentName]) {\n if (warnAboutStringRefs) {\n console.error(\n@@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {\n \n function warnOnFunctionType(returnFiber: Fiber) {\n if (__DEV__) {\n- const componentName = getComponentName(returnFiber.type) || 'Component';\n+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';\n \n if (ownerHasFunctionTypeWarning[componentName]) {\n return;\n@@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) {\n '%s(...): Nothing was returned from render. This usually means a ' +\n 'return statement is missing. Or, to render nothing, ' +\n 'return null.',\n- getComponentName(returnFiber.type) || 'Component',\n+ getComponentNameFromFiber(returnFiber) || 'Component',\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactChildFiber.old.js b\/packages\/react-reconciler\/src\/ReactChildFiber.old.js\nindex 036fa65503..10c4ccb4dc 100644\n--- a\/packages\/react-reconciler\/src\/ReactChildFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactChildFiber.old.js\n@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared\/ReactTypes';\n import type {Fiber} from '.\/ReactInternalTypes';\n import type {Lanes} from '.\/ReactFiberLane.old';\n \n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {Placement, ChildDeletion} from '.\/ReactFiberFlags';\n import {\n getIteratorFn,\n@@ -82,7 +82,7 @@ if (__DEV__) {\n );\n child._store.validated = true;\n \n- const componentName = getComponentName(returnFiber.type) || 'Component';\n+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';\n \n if (ownerHasKeyUseWarning[componentName]) {\n return;\n@@ -124,7 +124,8 @@ function coerceRef(\n element._owner.stateNode !== element._self\n )\n ) {\n- const componentName = getComponentName(returnFiber.type) || 'Component';\n+ const componentName =\n+ getComponentNameFromFiber(returnFiber) || 'Component';\n if (!didWarnAboutStringRefs[componentName]) {\n if (warnAboutStringRefs) {\n console.error(\n@@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {\n \n function warnOnFunctionType(returnFiber: Fiber) {\n if (__DEV__) {\n- const componentName = getComponentName(returnFiber.type) || 'Component';\n+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';\n \n if (ownerHasFunctionTypeWarning[componentName]) {\n return;\n@@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) {\n '%s(...): Nothing was returned from render. This usually means a ' +\n 'return statement is missing. Or, to render nothing, ' +\n 'return null.',\n- getComponentName(returnFiber.type) || 'Component',\n+ getComponentNameFromFiber(returnFiber) || 'Component',\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactCurrentFiber.js b\/packages\/react-reconciler\/src\/ReactCurrentFiber.js\nindex 5a6a648eb7..b2186131a9 100644\n--- a\/packages\/react-reconciler\/src\/ReactCurrentFiber.js\n+++ b\/packages\/react-reconciler\/src\/ReactCurrentFiber.js\n@@ -11,7 +11,7 @@ import type {Fiber} from '.\/ReactInternalTypes';\n \n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import {getStackByFiberInDevAndProd} from '.\/ReactFiberComponentStack';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n \n const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;\n \n@@ -25,7 +25,7 @@ export function getCurrentFiberOwnerNameInDevOrNull(): string | null {\n }\n const owner = current._debugOwner;\n if (owner !== null && typeof owner !== 'undefined') {\n- return getComponentName(owner.type);\n+ return getComponentNameFromFiber(owner);\n }\n }\n return null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.new.js b\/packages\/react-reconciler\/src\/ReactFiber.new.js\nindex f1a0f56b23..5a56fb0592 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.new.js\n@@ -52,7 +52,7 @@ import {\n LegacyHiddenComponent,\n CacheComponent,\n } from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n \n import {isDevToolsPresent} from '.\/ReactFiberDevToolsHook.new';\n import {\n@@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps(\n \"it's defined in, or you might have mixed up default and \" +\n 'named imports.';\n }\n- const ownerName = owner ? getComponentName(owner.type) : null;\n+ const ownerName = owner ? getComponentNameFromFiber(owner) : null;\n if (ownerName) {\n info += '\\n\\nCheck the render method of `' + ownerName + '`.';\n }\n@@ -678,9 +678,7 @@ function createFiberFromProfiler(\n }\n \n const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);\n- \/\/ TODO: The Profiler fiber shouldn't have a type. It has a tag.\n fiber.elementType = REACT_PROFILER_TYPE;\n- fiber.type = REACT_PROFILER_TYPE;\n fiber.lanes = lanes;\n \n if (enableProfilerTimer) {\n@@ -700,13 +698,7 @@ export function createFiberFromSuspense(\n key: null | string,\n ) {\n const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);\n-\n- \/\/ TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- fiber.type = REACT_SUSPENSE_TYPE;\n fiber.elementType = REACT_SUSPENSE_TYPE;\n-\n fiber.lanes = lanes;\n return fiber;\n }\n@@ -718,12 +710,6 @@ export function createFiberFromSuspenseList(\n key: null | string,\n ) {\n const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);\n- if (__DEV__) {\n- \/\/ TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- fiber.type = REACT_SUSPENSE_LIST_TYPE;\n- }\n fiber.elementType = REACT_SUSPENSE_LIST_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -736,12 +722,6 @@ export function createFiberFromOffscreen(\n key: null | string,\n ) {\n const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);\n- \/\/ TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- if (__DEV__) {\n- fiber.type = REACT_OFFSCREEN_TYPE;\n- }\n fiber.elementType = REACT_OFFSCREEN_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden(\n key: null | string,\n ) {\n const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);\n- \/\/ TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- if (__DEV__) {\n- fiber.type = REACT_LEGACY_HIDDEN_TYPE;\n- }\n fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -772,12 +746,6 @@ export function createFiberFromCache(\n key: null | string,\n ) {\n const fiber = createFiber(CacheComponent, pendingProps, key, mode);\n- \/\/ TODO: The Cache fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- if (__DEV__) {\n- fiber.type = REACT_CACHE_TYPE;\n- }\n fiber.elementType = REACT_CACHE_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -795,9 +763,7 @@ export function createFiberFromText(\n \n export function createFiberFromHostInstanceForDeletion(): Fiber {\n const fiber = createFiber(HostComponent, null, null, NoMode);\n- \/\/ TODO: These should not need a type.\n fiber.elementType = 'DELETED';\n- fiber.type = 'DELETED';\n return fiber;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiber.old.js b\/packages\/react-reconciler\/src\/ReactFiber.old.js\nindex 6419fd6b26..8536c024d6 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiber.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiber.old.js\n@@ -52,7 +52,7 @@ import {\n LegacyHiddenComponent,\n CacheComponent,\n } from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n \n import {isDevToolsPresent} from '.\/ReactFiberDevToolsHook.old';\n import {\n@@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps(\n \"it's defined in, or you might have mixed up default and \" +\n 'named imports.';\n }\n- const ownerName = owner ? getComponentName(owner.type) : null;\n+ const ownerName = owner ? getComponentNameFromFiber(owner) : null;\n if (ownerName) {\n info += '\\n\\nCheck the render method of `' + ownerName + '`.';\n }\n@@ -678,9 +678,7 @@ function createFiberFromProfiler(\n }\n \n const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);\n- \/\/ TODO: The Profiler fiber shouldn't have a type. It has a tag.\n fiber.elementType = REACT_PROFILER_TYPE;\n- fiber.type = REACT_PROFILER_TYPE;\n fiber.lanes = lanes;\n \n if (enableProfilerTimer) {\n@@ -700,13 +698,7 @@ export function createFiberFromSuspense(\n key: null | string,\n ) {\n const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);\n-\n- \/\/ TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- fiber.type = REACT_SUSPENSE_TYPE;\n fiber.elementType = REACT_SUSPENSE_TYPE;\n-\n fiber.lanes = lanes;\n return fiber;\n }\n@@ -718,12 +710,6 @@ export function createFiberFromSuspenseList(\n key: null | string,\n ) {\n const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);\n- if (__DEV__) {\n- \/\/ TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- fiber.type = REACT_SUSPENSE_LIST_TYPE;\n- }\n fiber.elementType = REACT_SUSPENSE_LIST_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -736,12 +722,6 @@ export function createFiberFromOffscreen(\n key: null | string,\n ) {\n const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);\n- \/\/ TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- if (__DEV__) {\n- fiber.type = REACT_OFFSCREEN_TYPE;\n- }\n fiber.elementType = REACT_OFFSCREEN_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden(\n key: null | string,\n ) {\n const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);\n- \/\/ TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- if (__DEV__) {\n- fiber.type = REACT_LEGACY_HIDDEN_TYPE;\n- }\n fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -772,12 +746,6 @@ export function createFiberFromCache(\n key: null | string,\n ) {\n const fiber = createFiber(CacheComponent, pendingProps, key, mode);\n- \/\/ TODO: The Cache fiber shouldn't have a type. It has a tag.\n- \/\/ This needs to be fixed in getComponentName so that it relies on the tag\n- \/\/ instead.\n- if (__DEV__) {\n- fiber.type = REACT_CACHE_TYPE;\n- }\n fiber.elementType = REACT_CACHE_TYPE;\n fiber.lanes = lanes;\n return fiber;\n@@ -795,9 +763,7 @@ export function createFiberFromText(\n \n export function createFiberFromHostInstanceForDeletion(): Fiber {\n const fiber = createFiber(HostComponent, null, null, NoMode);\n- \/\/ TODO: These should not need a type.\n fiber.elementType = 'DELETED';\n- fiber.type = 'DELETED';\n return fiber;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\nindex 6dffcc3289..69149016f5 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.new.js\n@@ -84,7 +84,8 @@ import {\n } from 'shared\/ReactFeatureFlags';\n import invariant from 'shared\/invariant';\n import shallowEqual from 'shared\/shallowEqual';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings.new';\n import {REACT_LAZY_TYPE, getIteratorFn} from 'shared\/ReactSymbols';\n import {\n@@ -332,7 +333,7 @@ function updateForwardRef(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -442,7 +443,7 @@ function updateMemoComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(type),\n+ getComponentNameFromType(type),\n );\n }\n }\n@@ -469,7 +470,7 @@ function updateMemoComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(type),\n+ getComponentNameFromType(type),\n );\n }\n }\n@@ -530,7 +531,7 @@ function updateSimpleMemoComponent(\n outerPropTypes,\n nextProps, \/\/ Resolved (SimpleMemoComponent has no defaultProps)\n 'prop',\n- getComponentName(outerMemoType),\n+ getComponentNameFromType(outerMemoType),\n );\n }\n }\n@@ -862,7 +863,7 @@ function updateFunctionComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -945,7 +946,7 @@ function updateClassComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -1012,7 +1013,7 @@ function updateClassComponent(\n console.error(\n 'It looks like %s is reassigning its own `this.props` while rendering. ' +\n 'This is not supported and can lead to confusing bugs.',\n- getComponentName(workInProgress.type) || 'a component',\n+ getComponentNameFromFiber(workInProgress) || 'a component',\n );\n }\n didWarnAboutReassigningProps = true;\n@@ -1343,7 +1344,7 @@ function mountLazyComponent(\n outerPropTypes,\n resolvedProps, \/\/ Resolved for outer only\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -1465,7 +1466,7 @@ function mountIndeterminateComponent(\n Component.prototype &&\n typeof Component.prototype.render === 'function'\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutBadClass[componentName]) {\n console.error(\n@@ -1515,7 +1516,7 @@ function mountIndeterminateComponent(\n typeof value.render === 'function' &&\n value.$$typeof === undefined\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutModulePatternComponent[componentName]) {\n console.error(\n 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n@@ -1542,7 +1543,7 @@ function mountIndeterminateComponent(\n value.$$typeof === undefined\n ) {\n if (__DEV__) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutModulePatternComponent[componentName]) {\n console.error(\n 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n@@ -1609,7 +1610,7 @@ function mountIndeterminateComponent(\n console.error(\n '%s uses the legacy contextTypes API which is no longer supported. ' +\n 'Use React.createContext() with React.useContext() instead.',\n- getComponentName(Component) || 'Unknown',\n+ getComponentNameFromType(Component) || 'Unknown',\n );\n }\n \n@@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n warnAboutDefaultPropsOnFunctionComponents &&\n Component.defaultProps !== undefined\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {\n console.error(\n@@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n }\n \n if (typeof Component.getDerivedStateFromProps === 'function') {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {\n console.error(\n@@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n typeof Component.contextType === 'object' &&\n Component.contextType !== null\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {\n console.error(\n@@ -3514,7 +3515,7 @@ function beginWork(\n outerPropTypes,\n resolvedProps, \/\/ Resolved for outer only\n 'prop',\n- getComponentName(type),\n+ getComponentNameFromType(type),\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\nindex 7801afe9fa..b8bacadcfe 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberBeginWork.old.js\n@@ -84,7 +84,8 @@ import {\n } from 'shared\/ReactFeatureFlags';\n import invariant from 'shared\/invariant';\n import shallowEqual from 'shared\/shallowEqual';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings.old';\n import {REACT_LAZY_TYPE, getIteratorFn} from 'shared\/ReactSymbols';\n import {\n@@ -332,7 +333,7 @@ function updateForwardRef(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -442,7 +443,7 @@ function updateMemoComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(type),\n+ getComponentNameFromType(type),\n );\n }\n }\n@@ -469,7 +470,7 @@ function updateMemoComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(type),\n+ getComponentNameFromType(type),\n );\n }\n }\n@@ -530,7 +531,7 @@ function updateSimpleMemoComponent(\n outerPropTypes,\n nextProps, \/\/ Resolved (SimpleMemoComponent has no defaultProps)\n 'prop',\n- getComponentName(outerMemoType),\n+ getComponentNameFromType(outerMemoType),\n );\n }\n }\n@@ -862,7 +863,7 @@ function updateFunctionComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -945,7 +946,7 @@ function updateClassComponent(\n innerPropTypes,\n nextProps, \/\/ Resolved props\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -1012,7 +1013,7 @@ function updateClassComponent(\n console.error(\n 'It looks like %s is reassigning its own `this.props` while rendering. ' +\n 'This is not supported and can lead to confusing bugs.',\n- getComponentName(workInProgress.type) || 'a component',\n+ getComponentNameFromFiber(workInProgress) || 'a component',\n );\n }\n didWarnAboutReassigningProps = true;\n@@ -1343,7 +1344,7 @@ function mountLazyComponent(\n outerPropTypes,\n resolvedProps, \/\/ Resolved for outer only\n 'prop',\n- getComponentName(Component),\n+ getComponentNameFromType(Component),\n );\n }\n }\n@@ -1465,7 +1466,7 @@ function mountIndeterminateComponent(\n Component.prototype &&\n typeof Component.prototype.render === 'function'\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutBadClass[componentName]) {\n console.error(\n@@ -1515,7 +1516,7 @@ function mountIndeterminateComponent(\n typeof value.render === 'function' &&\n value.$$typeof === undefined\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutModulePatternComponent[componentName]) {\n console.error(\n 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n@@ -1542,7 +1543,7 @@ function mountIndeterminateComponent(\n value.$$typeof === undefined\n ) {\n if (__DEV__) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n if (!didWarnAboutModulePatternComponent[componentName]) {\n console.error(\n 'The <%s \/> component appears to be a function component that returns a class instance. ' +\n@@ -1609,7 +1610,7 @@ function mountIndeterminateComponent(\n console.error(\n '%s uses the legacy contextTypes API which is no longer supported. ' +\n 'Use React.createContext() with React.useContext() instead.',\n- getComponentName(Component) || 'Unknown',\n+ getComponentNameFromType(Component) || 'Unknown',\n );\n }\n \n@@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n warnAboutDefaultPropsOnFunctionComponents &&\n Component.defaultProps !== undefined\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {\n console.error(\n@@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n }\n \n if (typeof Component.getDerivedStateFromProps === 'function') {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {\n console.error(\n@@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {\n typeof Component.contextType === 'object' &&\n Component.contextType !== null\n ) {\n- const componentName = getComponentName(Component) || 'Unknown';\n+ const componentName = getComponentNameFromType(Component) || 'Unknown';\n \n if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {\n console.error(\n@@ -3514,7 +3515,7 @@ function beginWork(\n outerPropTypes,\n resolvedProps, \/\/ Resolved for outer only\n 'prop',\n- getComponentName(type),\n+ getComponentNameFromType(type),\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.new.js b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.new.js\nindex 8259e59a70..0042bf2f93 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.new.js\n@@ -25,7 +25,8 @@ import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings.new';\n import {isMounted} from '.\/ReactFiberTreeReflection';\n import {get as getInstance, set as setInstance} from 'shared\/ReactInstanceMap';\n import shallowEqual from 'shared\/shallowEqual';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import invariant from 'shared\/invariant';\n import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared\/ReactSymbols';\n \n@@ -119,7 +120,7 @@ if (__DEV__) {\n \n warnOnUndefinedDerivedState = function(type, partialState) {\n if (partialState === undefined) {\n- const componentName = getComponentName(type) || 'Component';\n+ const componentName = getComponentNameFromType(type) || 'Component';\n if (!didWarnAboutUndefinedDerivedState.has(componentName)) {\n didWarnAboutUndefinedDerivedState.add(componentName);\n console.error(\n@@ -222,7 +223,7 @@ const classComponentUpdater = {\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logStateUpdateScheduled(name, lane, payload);\n }\n }\n@@ -257,7 +258,7 @@ const classComponentUpdater = {\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logStateUpdateScheduled(name, lane, payload);\n }\n }\n@@ -291,7 +292,7 @@ const classComponentUpdater = {\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logForceUpdateScheduled(name, lane);\n }\n }\n@@ -339,7 +340,7 @@ function checkShouldComponentUpdate(\n console.error(\n '%s.shouldComponentUpdate(): Returned undefined instead of a ' +\n 'boolean value. Make sure to return true or false.',\n- getComponentName(ctor) || 'Component',\n+ getComponentNameFromType(ctor) || 'Component',\n );\n }\n }\n@@ -359,7 +360,7 @@ function checkShouldComponentUpdate(\n function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {\n const instance = workInProgress.stateNode;\n if (__DEV__) {\n- const name = getComponentName(ctor) || 'Component';\n+ const name = getComponentNameFromType(ctor) || 'Component';\n const renderPresent = instance.render;\n \n if (!renderPresent) {\n@@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {\n '%s has a method called shouldComponentUpdate(). ' +\n 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +\n 'Please extend React.Component if shouldComponentUpdate is used.',\n- getComponentName(ctor) || 'A pure component',\n+ getComponentNameFromType(ctor) || 'A pure component',\n );\n }\n if (typeof instance.componentDidUnmount === 'function') {\n@@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {\n console.error(\n '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +\n 'This component defines getSnapshotBeforeUpdate() only.',\n- getComponentName(ctor),\n+ getComponentNameFromType(ctor),\n );\n }\n \n@@ -631,7 +632,7 @@ function constructClassInstance(\n console.error(\n '%s defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext().%s',\n- getComponentName(ctor) || 'Component',\n+ getComponentNameFromType(ctor) || 'Component',\n addendum,\n );\n }\n@@ -674,7 +675,7 @@ function constructClassInstance(\n \n if (__DEV__) {\n if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {\n- const componentName = getComponentName(ctor) || 'Component';\n+ const componentName = getComponentNameFromType(ctor) || 'Component';\n if (!didWarnAboutUninitializedState.has(componentName)) {\n didWarnAboutUninitializedState.add(componentName);\n console.error(\n@@ -730,7 +731,7 @@ function constructClassInstance(\n foundWillReceivePropsName !== null ||\n foundWillUpdateName !== null\n ) {\n- const componentName = getComponentName(ctor) || 'Component';\n+ const componentName = getComponentNameFromType(ctor) || 'Component';\n const newApiName =\n typeof ctor.getDerivedStateFromProps === 'function'\n ? 'getDerivedStateFromProps()'\n@@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) {\n '%s.componentWillMount(): Assigning directly to this.state is ' +\n \"deprecated (except inside a component's \" +\n 'constructor). Use setState instead.',\n- getComponentName(workInProgress.type) || 'Component',\n+ getComponentNameFromFiber(workInProgress) || 'Component',\n );\n }\n classComponentUpdater.enqueueReplaceState(instance, instance.state, null);\n@@ -804,7 +805,7 @@ function callComponentWillReceiveProps(\n if (instance.state !== oldState) {\n if (__DEV__) {\n const componentName =\n- getComponentName(workInProgress.type) || 'Component';\n+ getComponentNameFromFiber(workInProgress) || 'Component';\n if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {\n didWarnAboutStateAssignmentForComponent.add(componentName);\n console.error(\n@@ -849,7 +850,7 @@ function mountClassInstance(\n \n if (__DEV__) {\n if (instance.state === newProps) {\n- const componentName = getComponentName(ctor) || 'Component';\n+ const componentName = getComponentNameFromType(ctor) || 'Component';\n if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {\n didWarnAboutDirectlyAssigningPropsToState.add(componentName);\n console.error(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.old.js b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.old.js\nindex fe20322bb1..9849604386 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberClassComponent.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberClassComponent.old.js\n@@ -25,7 +25,8 @@ import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings.old';\n import {isMounted} from '.\/ReactFiberTreeReflection';\n import {get as getInstance, set as setInstance} from 'shared\/ReactInstanceMap';\n import shallowEqual from 'shared\/shallowEqual';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import invariant from 'shared\/invariant';\n import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared\/ReactSymbols';\n \n@@ -119,7 +120,7 @@ if (__DEV__) {\n \n warnOnUndefinedDerivedState = function(type, partialState) {\n if (partialState === undefined) {\n- const componentName = getComponentName(type) || 'Component';\n+ const componentName = getComponentNameFromType(type) || 'Component';\n if (!didWarnAboutUndefinedDerivedState.has(componentName)) {\n didWarnAboutUndefinedDerivedState.add(componentName);\n console.error(\n@@ -222,7 +223,7 @@ const classComponentUpdater = {\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logStateUpdateScheduled(name, lane, payload);\n }\n }\n@@ -257,7 +258,7 @@ const classComponentUpdater = {\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logStateUpdateScheduled(name, lane, payload);\n }\n }\n@@ -291,7 +292,7 @@ const classComponentUpdater = {\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logForceUpdateScheduled(name, lane);\n }\n }\n@@ -339,7 +340,7 @@ function checkShouldComponentUpdate(\n console.error(\n '%s.shouldComponentUpdate(): Returned undefined instead of a ' +\n 'boolean value. Make sure to return true or false.',\n- getComponentName(ctor) || 'Component',\n+ getComponentNameFromType(ctor) || 'Component',\n );\n }\n }\n@@ -359,7 +360,7 @@ function checkShouldComponentUpdate(\n function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {\n const instance = workInProgress.stateNode;\n if (__DEV__) {\n- const name = getComponentName(ctor) || 'Component';\n+ const name = getComponentNameFromType(ctor) || 'Component';\n const renderPresent = instance.render;\n \n if (!renderPresent) {\n@@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {\n '%s has a method called shouldComponentUpdate(). ' +\n 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +\n 'Please extend React.Component if shouldComponentUpdate is used.',\n- getComponentName(ctor) || 'A pure component',\n+ getComponentNameFromType(ctor) || 'A pure component',\n );\n }\n if (typeof instance.componentDidUnmount === 'function') {\n@@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {\n console.error(\n '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +\n 'This component defines getSnapshotBeforeUpdate() only.',\n- getComponentName(ctor),\n+ getComponentNameFromType(ctor),\n );\n }\n \n@@ -631,7 +632,7 @@ function constructClassInstance(\n console.error(\n '%s defines an invalid contextType. ' +\n 'contextType should point to the Context object returned by React.createContext().%s',\n- getComponentName(ctor) || 'Component',\n+ getComponentNameFromType(ctor) || 'Component',\n addendum,\n );\n }\n@@ -674,7 +675,7 @@ function constructClassInstance(\n \n if (__DEV__) {\n if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {\n- const componentName = getComponentName(ctor) || 'Component';\n+ const componentName = getComponentNameFromType(ctor) || 'Component';\n if (!didWarnAboutUninitializedState.has(componentName)) {\n didWarnAboutUninitializedState.add(componentName);\n console.error(\n@@ -730,7 +731,7 @@ function constructClassInstance(\n foundWillReceivePropsName !== null ||\n foundWillUpdateName !== null\n ) {\n- const componentName = getComponentName(ctor) || 'Component';\n+ const componentName = getComponentNameFromType(ctor) || 'Component';\n const newApiName =\n typeof ctor.getDerivedStateFromProps === 'function'\n ? 'getDerivedStateFromProps()'\n@@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) {\n '%s.componentWillMount(): Assigning directly to this.state is ' +\n \"deprecated (except inside a component's \" +\n 'constructor). Use setState instead.',\n- getComponentName(workInProgress.type) || 'Component',\n+ getComponentNameFromFiber(workInProgress) || 'Component',\n );\n }\n classComponentUpdater.enqueueReplaceState(instance, instance.state, null);\n@@ -804,7 +805,7 @@ function callComponentWillReceiveProps(\n if (instance.state !== oldState) {\n if (__DEV__) {\n const componentName =\n- getComponentName(workInProgress.type) || 'Component';\n+ getComponentNameFromFiber(workInProgress) || 'Component';\n if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {\n didWarnAboutStateAssignmentForComponent.add(componentName);\n console.error(\n@@ -849,7 +850,7 @@ function mountClassInstance(\n \n if (__DEV__) {\n if (instance.state === newProps) {\n- const componentName = getComponentName(ctor) || 'Component';\n+ const componentName = getComponentNameFromType(ctor) || 'Component';\n if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {\n didWarnAboutDirectlyAssigningPropsToState.add(componentName);\n console.error(\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\nindex 33ed1b5c95..e8acf1f31d 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.new.js\n@@ -80,7 +80,7 @@ import {\n PassiveMask,\n PassiveUnmountPendingDev,\n } from '.\/ReactFiberFlags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import invariant from 'shared\/invariant';\n import {\n resetCurrentFiber as resetCurrentDebugFiberInDEV,\n@@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n console.error(\n '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +\n 'must be returned. You have returned undefined.',\n- getComponentName(finishedWork.type),\n+ getComponentNameFromFiber(finishedWork),\n );\n }\n }\n@@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) {\n console.error(\n 'Unexpected ref object provided for %s. ' +\n 'Use either a ref-setter function or React.createRef().',\n- getComponentName(finishedWork.type),\n+ getComponentNameFromFiber(finishedWork),\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\nindex 7574eb4fd3..7759080a09 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCommitWork.old.js\n@@ -80,7 +80,7 @@ import {\n PassiveMask,\n PassiveUnmountPendingDev,\n } from '.\/ReactFiberFlags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import invariant from 'shared\/invariant';\n import {\n resetCurrentFiber as resetCurrentDebugFiberInDEV,\n@@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {\n console.error(\n '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +\n 'must be returned. You have returned undefined.',\n- getComponentName(finishedWork.type),\n+ getComponentNameFromFiber(finishedWork),\n );\n }\n }\n@@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.props`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n if (instance.state !== finishedWork.memoizedState) {\n@@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber(\n 'This might either be because of a bug in React, or because ' +\n 'a component reassigns its own `this.state`. ' +\n 'Please file an issue.',\n- getComponentName(finishedWork.type) || 'instance',\n+ getComponentNameFromFiber(finishedWork) || 'instance',\n );\n }\n }\n@@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) {\n console.error(\n 'Unexpected ref object provided for %s. ' +\n 'Use either a ref-setter function or React.createRef().',\n- getComponentName(finishedWork.type),\n+ getComponentNameFromFiber(finishedWork),\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberContext.new.js b\/packages\/react-reconciler\/src\/ReactFiberContext.new.js\nindex e96295be85..a7735f7b56 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberContext.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberContext.new.js\n@@ -13,7 +13,7 @@ import type {StackCursor} from '.\/ReactFiberStack.new';\n import {isFiberMounted} from '.\/ReactFiberTreeReflection';\n import {disableLegacyContext} from 'shared\/ReactFeatureFlags';\n import {ClassComponent, HostRoot} from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import invariant from 'shared\/invariant';\n import checkPropTypes from 'shared\/checkPropTypes';\n \n@@ -104,7 +104,7 @@ function getMaskedContext(\n }\n \n if (__DEV__) {\n- const name = getComponentName(type) || 'Unknown';\n+ const name = getComponentNameFromFiber(workInProgress) || 'Unknown';\n checkPropTypes(contextTypes, context, 'context', name);\n }\n \n@@ -187,7 +187,7 @@ function processChildContext(\n \/\/ It has only been added in Fiber to match the (unintentional) behavior in Stack.\n if (typeof instance.getChildContext !== 'function') {\n if (__DEV__) {\n- const componentName = getComponentName(type) || 'Unknown';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n \n if (!warnedAboutMissingGetChildContext[componentName]) {\n warnedAboutMissingGetChildContext[componentName] = true;\n@@ -208,12 +208,12 @@ function processChildContext(\n invariant(\n contextKey in childContextTypes,\n '%s.getChildContext(): key \"%s\" is not defined in childContextTypes.',\n- getComponentName(type) || 'Unknown',\n+ getComponentNameFromFiber(fiber) || 'Unknown',\n contextKey,\n );\n }\n if (__DEV__) {\n- const name = getComponentName(type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n checkPropTypes(childContextTypes, childContext, 'child context', name);\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberContext.old.js b\/packages\/react-reconciler\/src\/ReactFiberContext.old.js\nindex 9207fcb55e..c4736bcbd3 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberContext.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberContext.old.js\n@@ -13,7 +13,7 @@ import type {StackCursor} from '.\/ReactFiberStack.old';\n import {isFiberMounted} from '.\/ReactFiberTreeReflection';\n import {disableLegacyContext} from 'shared\/ReactFeatureFlags';\n import {ClassComponent, HostRoot} from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import invariant from 'shared\/invariant';\n import checkPropTypes from 'shared\/checkPropTypes';\n \n@@ -104,7 +104,7 @@ function getMaskedContext(\n }\n \n if (__DEV__) {\n- const name = getComponentName(type) || 'Unknown';\n+ const name = getComponentNameFromFiber(workInProgress) || 'Unknown';\n checkPropTypes(contextTypes, context, 'context', name);\n }\n \n@@ -187,7 +187,7 @@ function processChildContext(\n \/\/ It has only been added in Fiber to match the (unintentional) behavior in Stack.\n if (typeof instance.getChildContext !== 'function') {\n if (__DEV__) {\n- const componentName = getComponentName(type) || 'Unknown';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n \n if (!warnedAboutMissingGetChildContext[componentName]) {\n warnedAboutMissingGetChildContext[componentName] = true;\n@@ -208,12 +208,12 @@ function processChildContext(\n invariant(\n contextKey in childContextTypes,\n '%s.getChildContext(): key \"%s\" is not defined in childContextTypes.',\n- getComponentName(type) || 'Unknown',\n+ getComponentNameFromFiber(fiber) || 'Unknown',\n contextKey,\n );\n }\n if (__DEV__) {\n- const name = getComponentName(type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n checkPropTypes(childContextTypes, childContext, 'child context', name);\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberErrorLogger.js b\/packages\/react-reconciler\/src\/ReactFiberErrorLogger.js\nindex a76c65e4d3..81688a4d23 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberErrorLogger.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberErrorLogger.js\n@@ -12,7 +12,8 @@ import type {CapturedValue} from '.\/ReactCapturedValue';\n \n import {showErrorDialog} from '.\/ReactFiberErrorDialog';\n import {ClassComponent} from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n+import {HostRoot} from 'react-reconciler\/src\/ReactWorkTags';\n \n export function logCapturedError(\n boundary: Fiber,\n@@ -51,21 +52,22 @@ export function logCapturedError(\n \/\/ https:\/\/github.com\/facebook\/react\/pull\/13384\n }\n \n- const componentName = source ? getComponentName(source.type) : null;\n+ const componentName = source ? getComponentNameFromFiber(source) : null;\n const componentNameMessage = componentName\n ? `The above error occurred in the <${componentName}> component:`\n : 'The above error occurred in one of your React components:';\n \n let errorBoundaryMessage;\n- const errorBoundaryName = getComponentName(boundary.type);\n- if (errorBoundaryName) {\n- errorBoundaryMessage =\n- `React will try to recreate this component tree from scratch ` +\n- `using the error boundary you provided, ${errorBoundaryName}.`;\n- } else {\n+ if (boundary.tag === HostRoot) {\n errorBoundaryMessage =\n 'Consider adding an error boundary to your tree to customize error handling behavior.\\n' +\n 'Visit https:\/\/reactjs.org\/link\/error-boundaries to learn more about error boundaries.';\n+ } else {\n+ const errorBoundaryName =\n+ getComponentNameFromFiber(boundary) || 'Anonymous';\n+ errorBoundaryMessage =\n+ `React will try to recreate this component tree from scratch ` +\n+ `using the error boundary you provided, ${errorBoundaryName}.`;\n }\n const combinedMessage =\n `${componentNameMessage}\\n${componentStack}\\n\\n` +\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\nindex 9d1fa5f82e..bfea1ddda1 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.new.js\n@@ -81,7 +81,7 @@ import {\n } from '.\/ReactFiberWorkLoop.new';\n \n import invariant from 'shared\/invariant';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import is from 'shared\/objectIs';\n import {markWorkInProgressReceivedUpdate} from '.\/ReactFiberBeginWork.new';\n import {\n@@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) {\n \n function warnOnHookMismatchInDev(currentHookName: HookType) {\n if (__DEV__) {\n- const componentName = getComponentName(currentlyRenderingFiber.type);\n+ const componentName = getComponentNameFromFiber(currentlyRenderingFiber);\n if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {\n didWarnAboutMismatchedHooksForComponent.add(componentName);\n \n@@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource(\n \/\/ begin phase without double rendering. We should consider suppressing\n \/\/ any error from a double render (with a warning) to more closely match\n \/\/ the production behavior.\n- const componentName = getComponentName(currentlyRenderingFiber.type);\n+ const componentName = getComponentNameFromFiber(\n+ currentlyRenderingFiber,\n+ );\n invariant(\n false,\n 'A mutable source was mutated while the %s component was rendering. ' +\n@@ -1326,7 +1328,7 @@ function mountRef(initialValue: T): {|current: T|} {\n 'Reading from a ref during render is only safe if:\\n' +\n '1. The ref value has not been updated, or\\n' +\n '2. The ref holds a lazily-initialized value that is only set once.\\n',\n- getComponentName(currentlyRenderingFiber.type) || 'Unknown',\n+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',\n );\n }\n }\n@@ -1343,7 +1345,7 @@ function mountRef(initialValue: T): {|current: T|} {\n '%s: Unsafe write of a mutable value during render.\\n\\n' +\n 'Writing to a ref during render is only safe if the ref holds ' +\n 'a lazily-initialized value that is only set once.\\n',\n- getComponentName(currentlyRenderingFiber.type) || 'Unknown',\n+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',\n );\n }\n }\n@@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {\n function warnOnOpaqueIdentifierAccessInDEV(fiber) {\n if (__DEV__) {\n \/\/ TODO: Should warn in effects and callbacks, too\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {\n console.error(\n 'The object passed back from useOpaqueIdentifier is meant to be ' +\n@@ -2059,7 +2061,7 @@ function dispatchAction(\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logStateUpdateScheduled(name, lane, action);\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\nindex 61f1a17452..fea9afd815 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberHooks.old.js\n@@ -81,7 +81,7 @@ import {\n } from '.\/ReactFiberWorkLoop.old';\n \n import invariant from 'shared\/invariant';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import is from 'shared\/objectIs';\n import {markWorkInProgressReceivedUpdate} from '.\/ReactFiberBeginWork.old';\n import {\n@@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) {\n \n function warnOnHookMismatchInDev(currentHookName: HookType) {\n if (__DEV__) {\n- const componentName = getComponentName(currentlyRenderingFiber.type);\n+ const componentName = getComponentNameFromFiber(currentlyRenderingFiber);\n if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {\n didWarnAboutMismatchedHooksForComponent.add(componentName);\n \n@@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource(\n \/\/ begin phase without double rendering. We should consider suppressing\n \/\/ any error from a double render (with a warning) to more closely match\n \/\/ the production behavior.\n- const componentName = getComponentName(currentlyRenderingFiber.type);\n+ const componentName = getComponentNameFromFiber(\n+ currentlyRenderingFiber,\n+ );\n invariant(\n false,\n 'A mutable source was mutated while the %s component was rendering. ' +\n@@ -1326,7 +1328,7 @@ function mountRef(initialValue: T): {|current: T|} {\n 'Reading from a ref during render is only safe if:\\n' +\n '1. The ref value has not been updated, or\\n' +\n '2. The ref holds a lazily-initialized value that is only set once.\\n',\n- getComponentName(currentlyRenderingFiber.type) || 'Unknown',\n+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',\n );\n }\n }\n@@ -1343,7 +1345,7 @@ function mountRef(initialValue: T): {|current: T|} {\n '%s: Unsafe write of a mutable value during render.\\n\\n' +\n 'Writing to a ref during render is only safe if the ref holds ' +\n 'a lazily-initialized value that is only set once.\\n',\n- getComponentName(currentlyRenderingFiber.type) || 'Unknown',\n+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',\n );\n }\n }\n@@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {\n function warnOnOpaqueIdentifierAccessInDEV(fiber) {\n if (__DEV__) {\n \/\/ TODO: Should warn in effects and callbacks, too\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {\n console.error(\n 'The object passed back from useOpaqueIdentifier is meant to be ' +\n@@ -2059,7 +2061,7 @@ function dispatchAction(\n if (__DEV__) {\n if (enableDebugTracing) {\n if (fiber.mode & DebugTracingMode) {\n- const name = getComponentName(fiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(fiber) || 'Unknown';\n logStateUpdateScheduled(name, lane, action);\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\nindex 2c5c183163..063b70926b 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.new.js\n@@ -32,7 +32,7 @@ import {\n HostRoot,\n SuspenseComponent,\n } from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import invariant from 'shared\/invariant';\n import {enableSchedulingProfiler} from 'shared\/ReactFeatureFlags';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n@@ -205,7 +205,7 @@ function findHostInstanceWithWarning(\n return null;\n }\n if (hostFiber.mode & StrictLegacyMode) {\n- const componentName = getComponentName(fiber.type) || 'Component';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Component';\n if (!didWarnAboutFindNodeInStrictMode[componentName]) {\n didWarnAboutFindNodeInStrictMode[componentName] = true;\n \n@@ -310,7 +310,7 @@ export function updateContainer(\n 'triggering nested component updates from render is not allowed. ' +\n 'If necessary, trigger nested updates in componentDidUpdate.\\n\\n' +\n 'Check the render method of %s.',\n- getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',\n+ getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js b\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\nindex 430db15494..8aac687d3e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberReconciler.old.js\n@@ -32,7 +32,7 @@ import {\n HostRoot,\n SuspenseComponent,\n } from '.\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import invariant from 'shared\/invariant';\n import {enableSchedulingProfiler} from 'shared\/ReactFeatureFlags';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n@@ -205,7 +205,7 @@ function findHostInstanceWithWarning(\n return null;\n }\n if (hostFiber.mode & StrictLegacyMode) {\n- const componentName = getComponentName(fiber.type) || 'Component';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Component';\n if (!didWarnAboutFindNodeInStrictMode[componentName]) {\n didWarnAboutFindNodeInStrictMode[componentName] = true;\n \n@@ -310,7 +310,7 @@ export function updateContainer(\n 'triggering nested component updates from render is not allowed. ' +\n 'If necessary, trigger nested updates in componentDidUpdate.\\n\\n' +\n 'Check the render method of %s.',\n- getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',\n+ getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',\n );\n }\n }\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\nindex af199f0aa8..9ff0715f16 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.new.js\n@@ -15,7 +15,7 @@ import type {Update} from '.\/ReactUpdateQueue.new';\n import type {Wakeable} from 'shared\/ReactTypes';\n import type {SuspenseContext} from '.\/ReactFiberSuspenseContext.new';\n \n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {\n ClassComponent,\n HostRoot,\n@@ -140,7 +140,7 @@ function createClassErrorUpdate(\n console.error(\n '%s: Error boundaries should implement getDerivedStateFromError(). ' +\n 'In that method, return a state update to display an error message or fallback UI.',\n- getComponentName(fiber.type) || 'Unknown',\n+ getComponentNameFromFiber(fiber) || 'Unknown',\n );\n }\n }\n@@ -200,7 +200,7 @@ function throwException(\n if (__DEV__) {\n if (enableDebugTracing) {\n if (sourceFiber.mode & DebugTracingMode) {\n- const name = getComponentName(sourceFiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';\n logComponentSuspended(name, wakeable);\n }\n }\n@@ -361,7 +361,7 @@ function throwException(\n \/\/ No boundary was found. Fallthrough to error mode.\n \/\/ TODO: Use invariant so the message is stripped in prod?\n value = new Error(\n- (getComponentName(sourceFiber.type) || 'A React component') +\n+ (getComponentNameFromFiber(sourceFiber) || 'A React component') +\n ' suspended while rendering, but no fallback UI was specified.\\n' +\n '\\n' +\n 'Add a component higher in the tree to ' +\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\nindex 6ae53d02fc..da0d90f057 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberThrow.old.js\n@@ -15,7 +15,7 @@ import type {Update} from '.\/ReactUpdateQueue.old';\n import type {Wakeable} from 'shared\/ReactTypes';\n import type {SuspenseContext} from '.\/ReactFiberSuspenseContext.old';\n \n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {\n ClassComponent,\n HostRoot,\n@@ -140,7 +140,7 @@ function createClassErrorUpdate(\n console.error(\n '%s: Error boundaries should implement getDerivedStateFromError(). ' +\n 'In that method, return a state update to display an error message or fallback UI.',\n- getComponentName(fiber.type) || 'Unknown',\n+ getComponentNameFromFiber(fiber) || 'Unknown',\n );\n }\n }\n@@ -200,7 +200,7 @@ function throwException(\n if (__DEV__) {\n if (enableDebugTracing) {\n if (sourceFiber.mode & DebugTracingMode) {\n- const name = getComponentName(sourceFiber.type) || 'Unknown';\n+ const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';\n logComponentSuspended(name, wakeable);\n }\n }\n@@ -361,7 +361,7 @@ function throwException(\n \/\/ No boundary was found. Fallthrough to error mode.\n \/\/ TODO: Use invariant so the message is stripped in prod?\n value = new Error(\n- (getComponentName(sourceFiber.type) || 'A React component') +\n+ (getComponentNameFromFiber(sourceFiber) || 'A React component') +\n ' suspended while rendering, but no fallback UI was specified.\\n' +\n '\\n' +\n 'Add a component higher in the tree to ' +\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js b\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\nindex 06356aa709..510c58eaf2 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberTreeReflection.js\n@@ -15,7 +15,7 @@ import invariant from 'shared\/invariant';\n \n import {get as getInstance} from 'shared\/ReactInstanceMap';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {\n ClassComponent,\n HostComponent,\n@@ -101,7 +101,7 @@ export function isMounted(component: React$Component): boolean {\n 'never access something that requires stale data from the previous ' +\n 'render, such as refs. Move this logic to componentDidMount and ' +\n 'componentDidUpdate instead.',\n- getComponentName(ownerFiber.type) || 'A component',\n+ getComponentNameFromFiber(ownerFiber) || 'A component',\n );\n }\n instance._warnedAboutRefsInRender = true;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\nindex 7caee07872..03cb122aca 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n@@ -221,7 +221,7 @@ import {\n } from '.\/ReactProfilerTimer.new';\n \n \/\/ DEV stuff\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings.new';\n import {\n isRendering as ReactCurrentDebugFiberIsRenderingInDEV,\n@@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {\n \n \/\/ We show the whole stack but dedupe on the top component's name because\n \/\/ the problematic code almost always lies inside that component.\n- const componentName = getComponentName(fiber.type) || 'ReactComponent';\n+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';\n if (didWarnStateUpdateForNotYetMountedComponent !== null) {\n if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {\n return;\n@@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {\n }\n \/\/ We show the whole stack but dedupe on the top component's name because\n \/\/ the problematic code almost always lies inside that component.\n- const componentName = getComponentName(fiber.type) || 'ReactComponent';\n+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';\n if (didWarnStateUpdateForUnmountedComponent !== null) {\n if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {\n return;\n@@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {\n case ForwardRef:\n case SimpleMemoComponent: {\n const renderingComponentName =\n- (workInProgress && getComponentName(workInProgress.type)) ||\n+ (workInProgress && getComponentNameFromFiber(workInProgress)) ||\n 'Unknown';\n \/\/ Dedupe by the rendering component because it's the one that needs to be fixed.\n const dedupeKey = renderingComponentName;\n if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {\n didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);\n const setStateComponentName =\n- getComponentName(fiber.type) || 'Unknown';\n+ getComponentNameFromFiber(fiber) || 'Unknown';\n console.error(\n 'Cannot update a component (`%s`) while rendering a ' +\n 'different component (`%s`). To locate the bad setState() call inside `%s`, ' +\n@@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {\n \"This ensures that you're testing the behavior the user would see \" +\n 'in the browser.' +\n ' Learn more at https:\/\/reactjs.org\/link\/wrap-tests-with-act',\n- getComponentName(fiber.type),\n+ getComponentNameFromFiber(fiber),\n );\n }\n }\n@@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {\n \"This ensures that you're testing the behavior the user would see \" +\n 'in the browser.' +\n ' Learn more at https:\/\/reactjs.org\/link\/wrap-tests-with-act',\n- getComponentName(fiber.type),\n+ getComponentNameFromFiber(fiber),\n );\n } finally {\n if (previousFiber) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\nindex 1467929ce4..d3eeb26d11 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n@@ -221,7 +221,7 @@ import {\n } from '.\/ReactProfilerTimer.old';\n \n \/\/ DEV stuff\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import ReactStrictModeWarnings from '.\/ReactStrictModeWarnings.old';\n import {\n isRendering as ReactCurrentDebugFiberIsRenderingInDEV,\n@@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {\n \n \/\/ We show the whole stack but dedupe on the top component's name because\n \/\/ the problematic code almost always lies inside that component.\n- const componentName = getComponentName(fiber.type) || 'ReactComponent';\n+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';\n if (didWarnStateUpdateForNotYetMountedComponent !== null) {\n if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {\n return;\n@@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {\n }\n \/\/ We show the whole stack but dedupe on the top component's name because\n \/\/ the problematic code almost always lies inside that component.\n- const componentName = getComponentName(fiber.type) || 'ReactComponent';\n+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';\n if (didWarnStateUpdateForUnmountedComponent !== null) {\n if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {\n return;\n@@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {\n case ForwardRef:\n case SimpleMemoComponent: {\n const renderingComponentName =\n- (workInProgress && getComponentName(workInProgress.type)) ||\n+ (workInProgress && getComponentNameFromFiber(workInProgress)) ||\n 'Unknown';\n \/\/ Dedupe by the rendering component because it's the one that needs to be fixed.\n const dedupeKey = renderingComponentName;\n if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {\n didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);\n const setStateComponentName =\n- getComponentName(fiber.type) || 'Unknown';\n+ getComponentNameFromFiber(fiber) || 'Unknown';\n console.error(\n 'Cannot update a component (`%s`) while rendering a ' +\n 'different component (`%s`). To locate the bad setState() call inside `%s`, ' +\n@@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {\n \"This ensures that you're testing the behavior the user would see \" +\n 'in the browser.' +\n ' Learn more at https:\/\/reactjs.org\/link\/wrap-tests-with-act',\n- getComponentName(fiber.type),\n+ getComponentNameFromFiber(fiber),\n );\n }\n }\n@@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {\n \"This ensures that you're testing the behavior the user would see \" +\n 'in the browser.' +\n ' Learn more at https:\/\/reactjs.org\/link\/wrap-tests-with-act',\n- getComponentName(fiber.type),\n+ getComponentNameFromFiber(fiber),\n );\n } finally {\n if (previousFiber) {\ndiff --git a\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.new.js b\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.new.js\nindex 972c106c63..4de90a1586 100644\n--- a\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.new.js\n@@ -13,7 +13,7 @@ import {\n resetCurrentFiber as resetCurrentDebugFiberInDEV,\n setCurrentFiber as setCurrentDebugFiberInDEV,\n } from '.\/ReactCurrentFiber';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {StrictLegacyMode} from '.\/ReactTypeOfMode';\n \n type FiberArray = Array;\n@@ -119,7 +119,7 @@ if (__DEV__) {\n if (pendingComponentWillMountWarnings.length > 0) {\n pendingComponentWillMountWarnings.forEach(fiber => {\n componentWillMountUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -130,7 +130,7 @@ if (__DEV__) {\n if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {\n pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {\n UNSAFE_componentWillMountUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -141,7 +141,7 @@ if (__DEV__) {\n if (pendingComponentWillReceivePropsWarnings.length > 0) {\n pendingComponentWillReceivePropsWarnings.forEach(fiber => {\n componentWillReceivePropsUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -153,7 +153,7 @@ if (__DEV__) {\n if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {\n pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {\n UNSAFE_componentWillReceivePropsUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -165,7 +165,7 @@ if (__DEV__) {\n if (pendingComponentWillUpdateWarnings.length > 0) {\n pendingComponentWillUpdateWarnings.forEach(fiber => {\n componentWillUpdateUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -177,7 +177,7 @@ if (__DEV__) {\n if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {\n pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {\n UNSAFE_componentWillUpdateUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -333,7 +333,7 @@ if (__DEV__) {\n \n const uniqueNames = new Set();\n fiberArray.forEach(fiber => {\n- uniqueNames.add(getComponentName(fiber.type) || 'Component');\n+ uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');\n didWarnAboutLegacyContext.add(fiber.type);\n });\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.old.js b\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.old.js\nindex 972c106c63..4de90a1586 100644\n--- a\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactStrictModeWarnings.old.js\n@@ -13,7 +13,7 @@ import {\n resetCurrentFiber as resetCurrentDebugFiberInDEV,\n setCurrentFiber as setCurrentDebugFiberInDEV,\n } from '.\/ReactCurrentFiber';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n import {StrictLegacyMode} from '.\/ReactTypeOfMode';\n \n type FiberArray = Array;\n@@ -119,7 +119,7 @@ if (__DEV__) {\n if (pendingComponentWillMountWarnings.length > 0) {\n pendingComponentWillMountWarnings.forEach(fiber => {\n componentWillMountUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -130,7 +130,7 @@ if (__DEV__) {\n if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {\n pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {\n UNSAFE_componentWillMountUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -141,7 +141,7 @@ if (__DEV__) {\n if (pendingComponentWillReceivePropsWarnings.length > 0) {\n pendingComponentWillReceivePropsWarnings.forEach(fiber => {\n componentWillReceivePropsUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -153,7 +153,7 @@ if (__DEV__) {\n if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {\n pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {\n UNSAFE_componentWillReceivePropsUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -165,7 +165,7 @@ if (__DEV__) {\n if (pendingComponentWillUpdateWarnings.length > 0) {\n pendingComponentWillUpdateWarnings.forEach(fiber => {\n componentWillUpdateUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -177,7 +177,7 @@ if (__DEV__) {\n if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {\n pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {\n UNSAFE_componentWillUpdateUniqueNames.add(\n- getComponentName(fiber.type) || 'Component',\n+ getComponentNameFromFiber(fiber) || 'Component',\n );\n didWarnAboutUnsafeLifecycles.add(fiber.type);\n });\n@@ -333,7 +333,7 @@ if (__DEV__) {\n \n const uniqueNames = new Set();\n fiberArray.forEach(fiber => {\n- uniqueNames.add(getComponentName(fiber.type) || 'Component');\n+ uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');\n didWarnAboutLegacyContext.add(fiber.type);\n });\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactTestSelectors.js b\/packages\/react-reconciler\/src\/ReactTestSelectors.js\nindex ebe50a94ed..58e888c168 100644\n--- a\/packages\/react-reconciler\/src\/ReactTestSelectors.js\n+++ b\/packages\/react-reconciler\/src\/ReactTestSelectors.js\n@@ -12,7 +12,7 @@ import type {Instance} from '.\/ReactFiberHostConfig';\n \n import invariant from 'shared\/invariant';\n import {HostComponent, HostText} from 'react-reconciler\/src\/ReactWorkTags';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import {\n findFiberRoot,\n getBoundingRect,\n@@ -189,7 +189,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {\n function selectorToString(selector: Selector): string | null {\n switch (selector.$$typeof) {\n case COMPONENT_TYPE:\n- const displayName = getComponentName(selector.value) || 'Unknown';\n+ const displayName = getComponentNameFromType(selector.value) || 'Unknown';\n return `<${displayName}>`;\n case HAS_PSEUDO_CLASS_TYPE:\n return `:has(${selectorToString(selector) || ''})`;\ndiff --git a\/packages\/react-reconciler\/src\/SchedulingProfiler.js b\/packages\/react-reconciler\/src\/SchedulingProfiler.js\nindex ccc41f9854..67baa02ea2 100644\n--- a\/packages\/react-reconciler\/src\/SchedulingProfiler.js\n+++ b\/packages\/react-reconciler\/src\/SchedulingProfiler.js\n@@ -16,7 +16,7 @@ import {\n enableSchedulingProfiler,\n } from 'shared\/ReactFeatureFlags';\n import ReactVersion from 'shared\/ReactVersion';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromFiber from 'react-reconciler\/src\/getComponentNameFromFiber';\n \n import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler\/src\/ReactFiberLane.old';\n import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler\/src\/ReactFiberLane.new';\n@@ -113,7 +113,7 @@ export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {\n if (enableSchedulingProfiler) {\n if (supportsUserTimingV3) {\n const id = getWakeableID(wakeable);\n- const componentName = getComponentName(fiber.type) || 'Unknown';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n \/\/ TODO Add component stack id\n markAndClear(`--suspense-suspend-${id}-${componentName}`);\n wakeable.then(\n@@ -191,7 +191,7 @@ export function markRenderScheduled(lane: Lane): void {\n export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {\n if (enableSchedulingProfiler) {\n if (supportsUserTimingV3) {\n- const componentName = getComponentName(fiber.type) || 'Unknown';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n \/\/ TODO Add component stack id\n markAndClear(\n `--schedule-forced-update-${formatLanes(lane)}-${componentName}`,\n@@ -203,7 +203,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {\n export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {\n if (enableSchedulingProfiler) {\n if (supportsUserTimingV3) {\n- const componentName = getComponentName(fiber.type) || 'Unknown';\n+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';\n \/\/ TODO Add component stack id\n markAndClear(\n `--schedule-state-update-${formatLanes(lane)}-${componentName}`,\ndiff --git a\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js b\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js\nnew file mode 100644\nindex 0000000000..4ae33c2ed5\n--- \/dev\/null\n+++ b\/packages\/react-reconciler\/src\/getComponentNameFromFiber.js\n@@ -0,0 +1,124 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import type {ReactContext, ReactProviderType} from 'shared\/ReactTypes';\n+\n+import {\n+ FunctionComponent,\n+ ClassComponent,\n+ IndeterminateComponent,\n+ HostRoot,\n+ HostPortal,\n+ HostComponent,\n+ HostText,\n+ Fragment,\n+ Mode,\n+ ContextConsumer,\n+ ContextProvider,\n+ ForwardRef,\n+ Profiler,\n+ SuspenseComponent,\n+ MemoComponent,\n+ SimpleMemoComponent,\n+ LazyComponent,\n+ IncompleteClassComponent,\n+ DehydratedFragment,\n+ SuspenseListComponent,\n+ ScopeComponent,\n+ OffscreenComponent,\n+ LegacyHiddenComponent,\n+ CacheComponent,\n+} from 'react-reconciler\/src\/ReactWorkTags';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n+import {REACT_STRICT_MODE_TYPE} from 'shared\/ReactSymbols';\n+\n+\/\/ Keep in sync with shared\/getComponentNameFromType\n+function getWrappedName(\n+ outerType: mixed,\n+ innerType: any,\n+ wrapperName: string,\n+): string {\n+ const functionName = innerType.displayName || innerType.name || '';\n+ return (\n+ (outerType: any).displayName ||\n+ (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName)\n+ );\n+}\n+\n+\/\/ Keep in sync with shared\/getComponentNameFromType\n+function getContextName(type: ReactContext) {\n+ return type.displayName || 'Context';\n+}\n+\n+export default function getComponentNameFromFiber(fiber: Fiber): string | null {\n+ const {tag, type} = fiber;\n+ switch (tag) {\n+ case CacheComponent:\n+ return 'Cache';\n+ case ContextConsumer:\n+ const context: ReactContext = (type: any);\n+ return getContextName(context) + '.Consumer';\n+ case ContextProvider:\n+ const provider: ReactProviderType = (type: any);\n+ return getContextName(provider._context) + '.Provider';\n+ case DehydratedFragment:\n+ return 'DehydratedFragment';\n+ case ForwardRef:\n+ return getWrappedName(type, type.render, 'ForwardRef');\n+ case Fragment:\n+ return 'Fragment';\n+ case HostComponent:\n+ \/\/ Host component type is the display name (e.g. \"div\", \"View\")\n+ return type;\n+ case HostPortal:\n+ return 'Portal';\n+ case HostRoot:\n+ return 'Root';\n+ case HostText:\n+ return 'Text';\n+ case LazyComponent:\n+ \/\/ Name comes from the type in this case; we don't have a tag.\n+ return getComponentNameFromType(type);\n+ case LegacyHiddenComponent:\n+ return 'LegacyHidden';\n+ case Mode:\n+ if (type === REACT_STRICT_MODE_TYPE) {\n+ \/\/ Don't be less specific than shared\/getComponentNameFromType\n+ return 'StrictMode';\n+ }\n+ return 'Mode';\n+ case OffscreenComponent:\n+ return 'Offscreen';\n+ case Profiler:\n+ return 'Profiler';\n+ case ScopeComponent:\n+ return 'Scope';\n+ case SuspenseComponent:\n+ return 'Suspense';\n+ case SuspenseListComponent:\n+ return 'SuspenseList';\n+\n+ \/\/ The display name for this tags come from the user-provided type:\n+ case ClassComponent:\n+ case FunctionComponent:\n+ case IncompleteClassComponent:\n+ case IndeterminateComponent:\n+ case MemoComponent:\n+ case SimpleMemoComponent:\n+ if (typeof type === 'function') {\n+ return (type: any).displayName || type.name || null;\n+ }\n+ if (typeof type === 'string') {\n+ return type;\n+ }\n+ break;\n+ }\n+\n+ return null;\n+}\ndiff --git a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\nindex 65da95aad5..f058af3e87 100644\n--- a\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n+++ b\/packages\/react-test-renderer\/src\/ReactTestRenderer.js\n@@ -43,7 +43,7 @@ import {\n ScopeComponent,\n } from 'react-reconciler\/src\/ReactWorkTags';\n import invariant from 'shared\/invariant';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import ReactVersion from 'shared\/ReactVersion';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n import enqueueTask from 'shared\/enqueueTask';\n@@ -344,7 +344,7 @@ class ReactTestInstance {\n findByType(type: any): ReactTestInstance {\n return expectOne(\n this.findAllByType(type, {deep: false}),\n- `with node type: \"${getComponentName(type) || 'Unknown'}\"`,\n+ `with node type: \"${getComponentNameFromType(type) || 'Unknown'}\"`,\n );\n }\n \ndiff --git a\/packages\/react\/src\/ReactElement.js b\/packages\/react\/src\/ReactElement.js\nindex d157a428da..9747e0da1a 100644\n--- a\/packages\/react\/src\/ReactElement.js\n+++ b\/packages\/react\/src\/ReactElement.js\n@@ -5,7 +5,7 @@\n * LICENSE file in the root directory of this source tree.\n *\/\n \n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import invariant from 'shared\/invariant';\n import {REACT_ELEMENT_TYPE} from 'shared\/ReactSymbols';\n \n@@ -104,7 +104,9 @@ function warnIfStringRefCannotBeAutoConverted(config) {\n config.__self &&\n ReactCurrentOwner.current.stateNode !== config.__self\n ) {\n- const componentName = getComponentName(ReactCurrentOwner.current.type);\n+ const componentName = getComponentNameFromType(\n+ ReactCurrentOwner.current.type,\n+ );\n \n if (!didWarnAboutStringRefs[componentName]) {\n console.error(\ndiff --git a\/packages\/react\/src\/ReactElementValidator.js b\/packages\/react\/src\/ReactElementValidator.js\nindex eee8ca26fe..1ee89ef142 100644\n--- a\/packages\/react\/src\/ReactElementValidator.js\n+++ b\/packages\/react\/src\/ReactElementValidator.js\n@@ -13,7 +13,7 @@\n *\/\n \n import isValidElementType from 'shared\/isValidElementType';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import {\n getIteratorFn,\n REACT_FORWARD_REF_TYPE,\n@@ -60,7 +60,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;\n \n function getDeclarationErrorAddendum() {\n if (ReactCurrentOwner.current) {\n- const name = getComponentName(ReactCurrentOwner.current.type);\n+ const name = getComponentNameFromType(ReactCurrentOwner.current.type);\n if (name) {\n return '\\n\\nCheck the render method of `' + name + '`.';\n }\n@@ -139,7 +139,7 @@ function validateExplicitKey(element, parentType) {\n element._owner !== ReactCurrentOwner.current\n ) {\n \/\/ Give the component that originally created this child.\n- childOwner = ` It was passed a child from ${getComponentName(\n+ childOwner = ` It was passed a child from ${getComponentNameFromType(\n element._owner.type,\n )}.`;\n }\n@@ -227,12 +227,12 @@ function validatePropTypes(element) {\n }\n if (propTypes) {\n \/\/ Intentionally inside to avoid triggering lazy initializers:\n- const name = getComponentName(type);\n+ const name = getComponentNameFromType(type);\n checkPropTypes(propTypes, element.props, 'prop', name, element);\n } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {\n propTypesMisspellWarningShown = true;\n \/\/ Intentionally inside to avoid triggering lazy initializers:\n- const name = getComponentName(type);\n+ const name = getComponentNameFromType(type);\n console.error(\n 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',\n name || 'Unknown',\n@@ -317,7 +317,7 @@ export function jsxWithValidation(\n } else if (Array.isArray(type)) {\n typeString = 'array';\n } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {\n- typeString = `<${getComponentName(type.type) || 'Unknown'} \/>`;\n+ typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} \/>`;\n info =\n ' Did you accidentally export a JSX literal instead of a component?';\n } else {\n@@ -383,7 +383,7 @@ export function jsxWithValidation(\n 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +\n 'Explicitly pass a key after spreading props in your JSX call. ' +\n 'E.g. <%s {...props} key={key} \/>',\n- getComponentName(type) || 'ComponentName',\n+ getComponentNameFromType(type) || 'ComponentName',\n );\n }\n }\n@@ -441,7 +441,7 @@ export function createElementWithValidation(type, props, children) {\n } else if (Array.isArray(type)) {\n typeString = 'array';\n } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {\n- typeString = `<${getComponentName(type.type) || 'Unknown'} \/>`;\n+ typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} \/>`;\n info =\n ' Did you accidentally export a JSX literal instead of a component?';\n } else {\ndiff --git a\/packages\/react\/src\/jsx\/ReactJSXElement.js b\/packages\/react\/src\/jsx\/ReactJSXElement.js\nindex c4c02c7418..ccf2c6e2a4 100644\n--- a\/packages\/react\/src\/jsx\/ReactJSXElement.js\n+++ b\/packages\/react\/src\/jsx\/ReactJSXElement.js\n@@ -5,7 +5,7 @@\n * LICENSE file in the root directory of this source tree.\n *\/\n \n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import ReactSharedInternals from 'shared\/ReactSharedInternals';\n \n import {REACT_ELEMENT_TYPE} from 'shared\/ReactSymbols';\n@@ -61,7 +61,9 @@ function warnIfStringRefCannotBeAutoConverted(config, self) {\n self &&\n ReactCurrentOwner.current.stateNode !== self\n ) {\n- const componentName = getComponentName(ReactCurrentOwner.current.type);\n+ const componentName = getComponentNameFromType(\n+ ReactCurrentOwner.current.type,\n+ );\n \n if (!didWarnAboutStringRefs[componentName]) {\n console.error(\n@@ -71,7 +73,7 @@ function warnIfStringRefCannotBeAutoConverted(config, self) {\n 'We ask you to manually fix this case by using useRef() or createRef() instead. ' +\n 'Learn more about using refs safely here: ' +\n 'https:\/\/reactjs.org\/link\/strict-mode-string-ref',\n- getComponentName(ReactCurrentOwner.current.type),\n+ getComponentNameFromType(ReactCurrentOwner.current.type),\n config.ref,\n );\n didWarnAboutStringRefs[componentName] = true;\ndiff --git a\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js b\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js\nindex b76baa1e35..6ee1c7176f 100644\n--- a\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js\n+++ b\/packages\/react\/src\/jsx\/ReactJSXElementValidator.js\n@@ -12,7 +12,7 @@\n * that support it.\n *\/\n import isValidElementType from 'shared\/isValidElementType';\n-import getComponentName from 'shared\/getComponentName';\n+import getComponentNameFromType from 'shared\/getComponentNameFromType';\n import checkPropTypes from 'shared\/checkPropTypes';\n import {\n getIteratorFn,\n@@ -76,7 +76,7 @@ export function isValidElement(object) {\n function getDeclarationErrorAddendum() {\n if (__DEV__) {\n if (ReactCurrentOwner.current) {\n- const name = getComponentName(ReactCurrentOwner.current.type);\n+ const name = getComponentNameFromType(ReactCurrentOwner.current.type);\n if (name) {\n return '\\n\\nCheck the render method of `' + name + '`.';\n }\n@@ -154,7 +154,7 @@ function validateExplicitKey(element, parentType) {\n element._owner !== ReactCurrentOwner.current\n ) {\n \/\/ Give the component that originally created this child.\n- childOwner = ` It was passed a child from ${getComponentName(\n+ childOwner = ` It was passed a child from ${getComponentNameFromType(\n element._owner.type,\n )}.`;\n }\n@@ -243,12 +243,12 @@ function validatePropTypes(element) {\n }\n if (propTypes) {\n \/\/ Intentionally inside to avoid triggering lazy initializers:\n- const name = getComponentName(type);\n+ const name = getComponentNameFromType(type);\n checkPropTypes(propTypes, element.props, 'prop', name, element);\n } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {\n propTypesMisspellWarningShown = true;\n \/\/ Intentionally inside to avoid triggering lazy initializers:\n- const name = getComponentName(type);\n+ const name = getComponentNameFromType(type);\n console.error(\n 'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',\n name || 'Unknown',\n@@ -334,7 +334,7 @@ export function jsxWithValidation(\n } else if (Array.isArray(type)) {\n typeString = 'array';\n } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {\n- typeString = `<${getComponentName(type.type) || 'Unknown'} \/>`;\n+ typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} \/>`;\n info =\n ' Did you accidentally export a JSX literal instead of a component?';\n } else {\n@@ -395,7 +395,7 @@ export function jsxWithValidation(\n 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +\n 'Explicitly pass a key after spreading props in your JSX call. ' +\n 'E.g. <%s {...props} key={key} \/>',\n- getComponentName(type) || 'ComponentName',\n+ getComponentNameFromType(type) || 'ComponentName',\n );\n }\n }\ndiff --git a\/packages\/shared\/getComponentName.js b\/packages\/shared\/getComponentNameFromType.js\nsimilarity index 86%\nrename from packages\/shared\/getComponentName.js\nrename to packages\/shared\/getComponentNameFromType.js\nindex a5594f6f64..f0f51d852f 100644\n--- a\/packages\/shared\/getComponentName.js\n+++ b\/packages\/shared\/getComponentNameFromType.js\n@@ -8,6 +8,7 @@\n *\/\n \n import type {LazyComponent} from 'react\/src\/ReactLazy';\n+import type {ReactContext, ReactProviderType} from 'shared\/ReactTypes';\n \n import {\n REACT_CONTEXT_TYPE,\n@@ -23,8 +24,8 @@ import {\n REACT_LAZY_TYPE,\n REACT_CACHE_TYPE,\n } from 'shared\/ReactSymbols';\n-import type {ReactContext, ReactProviderType} from 'shared\/ReactTypes';\n \n+\/\/ Keep in sync with react-reconciler\/getComponentNameFromFiber\n function getWrappedName(\n outerType: mixed,\n innerType: any,\n@@ -37,11 +38,13 @@ function getWrappedName(\n );\n }\n \n+\/\/ Keep in sync with react-reconciler\/getComponentNameFromFiber\n function getContextName(type: ReactContext) {\n return type.displayName || 'Context';\n }\n \n-function getComponentName(type: mixed): string | null {\n+\/\/ Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.\n+export default function getComponentNameFromType(type: mixed): string | null {\n if (type == null) {\n \/\/ Host root, text node or just invalid type.\n return null;\n@@ -87,13 +90,13 @@ function getComponentName(type: mixed): string | null {\n case REACT_FORWARD_REF_TYPE:\n return getWrappedName(type, type.render, 'ForwardRef');\n case REACT_MEMO_TYPE:\n- return getComponentName(type.type);\n+ return getComponentNameFromType(type.type);\n case REACT_LAZY_TYPE: {\n const lazyComponent: LazyComponent = (type: any);\n const payload = lazyComponent._payload;\n const init = lazyComponent._init;\n try {\n- return getComponentName(init(payload));\n+ return getComponentNameFromType(init(payload));\n } catch (x) {\n return null;\n }\n@@ -102,5 +105,3 @@ function getComponentName(type: mixed): string | null {\n }\n return null;\n }\n-\n-export default getComponentName;\n","parents":["ee432635724d5a50301448016caa137ac3c0a7a2"]}

dillon1000/react

Files changed