Split getComponentName into getComponentNameFromFiber and getComponentNameFromType (#20940)
Split getComponentName into getComponentNameFromFiber and getComponentNameFromType
Brian Vaughn committed
Mar 5, 2021 at 16:02 UTC
7df65725ba7826508e0f3c0f1c6f088efdbecfca
40 files changed
+386
-308
packages/react-dom/src/client/ReactDOMLegacy.js
+2
-2
@@ -32,7 +32,7 @@ import {
32
findHostInstance,
33
findHostInstanceWithWarning,
34
} from 'react-reconciler/src/ReactFiberReconciler';
35
-import getComponentName from 'shared/getComponentName';
35
+import getComponentNameFromType from 'shared/getComponentNameFromType';
36
import invariant from 'shared/invariant';
37
import ReactSharedInternals from 'shared/ReactSharedInternals';
38
import {has as hasInstance} from 'shared/ReactInstanceMap';
@@ -235,7 +235,7 @@ export function findDOMNode(
235
'never access something that requires stale data from the previous ' +
236
'render, such as refs. Move this logic to componentDidMount and ' +
237
'componentDidUpdate instead.',
238
- getComponentName(owner.type) || 'A component',
238
+ getComponentNameFromType(owner.type) || 'A component',
239
);
240
}
241
owner.stateNode._warnedAboutRefsInRender = true;
packages/react-dom/src/server/ReactPartialRenderer.js
+17
-12
@@ -14,7 +14,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
14
15
import * as React from 'react';
16
import invariant from 'shared/invariant';
17
-import getComponentName from 'shared/getComponentName';
17
+import getComponentNameFromType from 'shared/getComponentNameFromType';
18
import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
19
import ReactSharedInternals from 'shared/ReactSharedInternals';
20
import {
@@ -259,7 +259,7 @@ function warnNoop(
259
if (__DEV__) {
260
const constructor = publicInstance.constructor;
261
const componentName =
262
- (constructor && getComponentName(constructor)) || 'ReactClass';
262
+ (constructor && getComponentNameFromType(constructor)) || 'ReactClass';
263
const warningKey = componentName + '.' + callerName;
264
if (didWarnAboutNoopUpdateForComponent[warningKey]) {
265
return;
@@ -404,7 +404,7 @@ function validateRenderResult(child, type) {
404
'%s(...): Nothing was returned from render. This usually means a ' +
405
'return statement is missing. Or, to render nothing, ' +
406
'return null.',
407
- getComponentName(type) || 'Component',
407
+ getComponentNameFromType(type) || 'Component',
408
);
409
}
410
}
@@ -467,7 +467,8 @@ function resolve(
467
if (typeof Component.getDerivedStateFromProps === 'function') {
468
if (__DEV__) {
469
if (inst.state === null || inst.state === undefined) {
470
- const componentName = getComponentName(Component) || 'Unknown';
470
+ const componentName =
471
+ getComponentNameFromType(Component) || 'Unknown';
472
if (!didWarnAboutUninitializedState[componentName]) {
473
console.error(
474
'`%s` uses `getDerivedStateFromProps` but its initial state is ' +
@@ -491,7 +492,8 @@ function resolve(
492
493
if (__DEV__) {
494
if (partialState === undefined) {
494
- const componentName = getComponentName(Component) || 'Unknown';
495
+ const componentName =
496
+ getComponentNameFromType(Component) || 'Unknown';
497
if (!didWarnAboutUndefinedDerivedState[componentName]) {
498
console.error(
499
'%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
@@ -513,7 +515,8 @@ function resolve(
515
Component.prototype &&
516
typeof Component.prototype.render === 'function'
517
) {
516
- const componentName = getComponentName(Component) || 'Unknown';
518
+ const componentName =
519
+ getComponentNameFromType(Component) || 'Unknown';
520
521
if (!didWarnAboutBadClass[componentName]) {
522
console.error(
@@ -535,7 +538,8 @@ function resolve(
538
// Support for module components is deprecated and is removed behind a flag.
539
// Whether or not it would crash later, we want to show a good message in DEV first.
540
if (inst != null && inst.render != null) {
538
- const componentName = getComponentName(Component) || 'Unknown';
541
+ const componentName =
542
+ getComponentNameFromType(Component) || 'Unknown';
543
if (!didWarnAboutModulePatternComponent[componentName]) {
544
console.error(
545
'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -583,7 +587,8 @@ function resolve(
587
warnAboutDeprecatedLifecycles &&
588
inst.componentWillMount.__suppressDeprecationWarning !== true
589
) {
586
- const componentName = getComponentName(Component) || 'Unknown';
590
+ const componentName =
591
+ getComponentNameFromType(Component) || 'Unknown';
592
593
if (!didWarnAboutDeprecatedWillMount[componentName]) {
594
console.warn(
@@ -665,7 +670,7 @@ function resolve(
670
console.error(
671
'%s uses the legacy childContextTypes API which is no longer supported. ' +
672
'Use React.createContext() instead.',
668
- getComponentName(Component) || 'Unknown',
673
+ getComponentNameFromType(Component) || 'Unknown',
674
);
675
}
676
}
@@ -678,7 +683,7 @@ function resolve(
683
invariant(
684
contextKey in childContextTypes,
685
'%s.getChildContext(): key "%s" is not defined in childContextTypes.',
681
- getComponentName(Component) || 'Unknown',
686
+ getComponentNameFromType(Component) || 'Unknown',
687
contextKey,
688
);
689
}
@@ -687,7 +692,7 @@ function resolve(
692
console.error(
693
'%s.getChildContext(): childContextTypes must be defined in order to ' +
694
'use getChildContext().',
690
- getComponentName(Component) || 'Unknown',
695
+ getComponentNameFromType(Component) || 'Unknown',
696
);
697
}
698
}
@@ -1298,7 +1303,7 @@ class ReactDOMServerRenderer {
1303
"it's defined in, or you might have mixed up default and " +
1304
'named imports.';
1305
}
1301
- const ownerName = owner ? getComponentName(owner) : null;
1306
+ const ownerName = owner ? getComponentNameFromType(owner) : null;
1307
if (ownerName) {
1308
info += '\n\nCheck the render method of `' + ownerName + '`.';
1309
}
packages/react-dom/src/server/ReactPartialRendererContext.js
+4
-4
@@ -12,7 +12,7 @@ import type {ReactContext} from 'shared/ReactTypes';
12
13
import {disableLegacyContext} from 'shared/ReactFeatureFlags';
14
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
15
-import getComponentName from 'shared/getComponentName';
15
+import getComponentNameFromType from 'shared/getComponentNameFromType';
16
import checkPropTypes from 'shared/checkPropTypes';
17
18
let didWarnAboutInvalidateContextType;
@@ -105,7 +105,7 @@ export function processContext(
105
console.error(
106
'%s defines an invalid contextType. ' +
107
'contextType should point to the Context object returned by React.createContext().%s',
108
- getComponentName(type) || 'Component',
108
+ getComponentNameFromType(type) || 'Component',
109
addendum,
110
);
111
}
@@ -121,7 +121,7 @@ export function processContext(
121
console.error(
122
'%s uses the legacy contextTypes API which is no longer supported. ' +
123
'Use React.createContext() with static contextType instead.',
124
- getComponentName(type) || 'Unknown',
124
+ getComponentNameFromType(type) || 'Unknown',
125
);
126
}
127
}
@@ -142,7 +142,7 @@ export function processContext(
142
console.error(
143
'%s uses the legacy contextTypes API which is no longer supported. ' +
144
'Use React.createContext() with React.useContext() instead.',
145
- getComponentName(type) || 'Unknown',
145
+ getComponentNameFromType(type) || 'Unknown',
146
);
147
}
148
}
packages/react-native-renderer/src/ReactFabric.js
+3
-3
@@ -43,7 +43,7 @@ import {
43
} from './ReactNativeFiberInspector';
44
import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
45
import ReactSharedInternals from 'shared/ReactSharedInternals';
46
-import getComponentName from 'shared/getComponentName';
46
+import getComponentNameFromType from 'shared/getComponentNameFromType';
47
48
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
49
@@ -60,7 +60,7 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
60
'never access something that requires stale data from the previous ' +
61
'render, such as refs. Move this logic to componentDidMount and ' +
62
'componentDidUpdate instead.',
63
- getComponentName(owner.type) || 'A component',
63
+ getComponentNameFromType(owner.type) || 'A component',
64
);
65
}
66
@@ -111,7 +111,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
111
'never access something that requires stale data from the previous ' +
112
'render, such as refs. Move this logic to componentDidMount and ' +
113
'componentDidUpdate instead.',
114
- getComponentName(owner.type) || 'A component',
114
+ getComponentNameFromType(owner.type) || 'A component',
115
);
116
}
117
packages/react-native-renderer/src/ReactNativeFiberInspector.js
+2
-2
@@ -14,7 +14,7 @@ import {
14
findCurrentHostFiber,
15
findCurrentFiberUsingSlowPath,
16
} from 'react-reconciler/src/ReactFiberTreeReflection';
17
-import getComponentName from 'shared/getComponentName';
17
+import getComponentNameFromType from 'shared/getComponentNameFromType';
18
import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
19
import invariant from 'shared/invariant';
20
// Module provided by RN:
@@ -81,7 +81,7 @@ if (__DEV__) {
81
82
const createHierarchy = function(fiberHierarchy) {
83
return fiberHierarchy.map(fiber => ({
84
- name: getComponentName(fiber.type),
84
+ name: getComponentNameFromType(fiber.type),
85
getInspectorData: findNodeHandle => {
86
return {
87
props: getHostProps(fiber),
packages/react-native-renderer/src/ReactNativeRenderer.js
+3
-3
@@ -46,7 +46,7 @@ import {
46
} from './ReactNativeFiberInspector';
47
import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
48
import ReactSharedInternals from 'shared/ReactSharedInternals';
49
-import getComponentName from 'shared/getComponentName';
49
+import getComponentNameFromType from 'shared/getComponentNameFromType';
50
51
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
52
@@ -63,7 +63,7 @@ function findHostInstance_DEPRECATED(
63
'never access something that requires stale data from the previous ' +
64
'render, such as refs. Move this logic to componentDidMount and ' +
65
'componentDidUpdate instead.',
66
- getComponentName(owner.type) || 'A component',
66
+ getComponentNameFromType(owner.type) || 'A component',
67
);
68
}
69
@@ -110,7 +110,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
110
'never access something that requires stale data from the previous ' +
111
'render, such as refs. Move this logic to componentDidMount and ' +
112
'componentDidUpdate instead.',
113
- getComponentName(owner.type) || 'A component',
113
+ getComponentNameFromType(owner.type) || 'A component',
114
);
115
}
116
packages/react-reconciler/src/ReactChildFiber.new.js
+6
-5
@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes';
12
import type {Fiber} from './ReactInternalTypes';
13
import type {Lanes} from './ReactFiberLane.new';
14
15
-import getComponentName from 'shared/getComponentName';
15
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
16
import {Placement, ChildDeletion} from './ReactFiberFlags';
17
import {
18
getIteratorFn,
@@ -82,7 +82,7 @@ if (__DEV__) {
82
);
83
child._store.validated = true;
84
85
- const componentName = getComponentName(returnFiber.type) || 'Component';
85
+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
86
87
if (ownerHasKeyUseWarning[componentName]) {
88
return;
@@ -124,7 +124,8 @@ function coerceRef(
124
element._owner.stateNode !== element._self
125
)
126
) {
127
- const componentName = getComponentName(returnFiber.type) || 'Component';
127
+ const componentName =
128
+ getComponentNameFromFiber(returnFiber) || 'Component';
129
if (!didWarnAboutStringRefs[componentName]) {
130
if (warnAboutStringRefs) {
131
console.error(
@@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
233
234
function warnOnFunctionType(returnFiber: Fiber) {
235
if (__DEV__) {
235
- const componentName = getComponentName(returnFiber.type) || 'Component';
236
+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
237
238
if (ownerHasFunctionTypeWarning[componentName]) {
239
return;
@@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) {
1334
'%s(...): Nothing was returned from render. This usually means a ' +
1335
'return statement is missing. Or, to render nothing, ' +
1336
'return null.',
1336
- getComponentName(returnFiber.type) || 'Component',
1337
+ getComponentNameFromFiber(returnFiber) || 'Component',
1338
);
1339
}
1340
}
packages/react-reconciler/src/ReactChildFiber.old.js
+6
-5
@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes';
12
import type {Fiber} from './ReactInternalTypes';
13
import type {Lanes} from './ReactFiberLane.old';
14
15
-import getComponentName from 'shared/getComponentName';
15
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
16
import {Placement, ChildDeletion} from './ReactFiberFlags';
17
import {
18
getIteratorFn,
@@ -82,7 +82,7 @@ if (__DEV__) {
82
);
83
child._store.validated = true;
84
85
- const componentName = getComponentName(returnFiber.type) || 'Component';
85
+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
86
87
if (ownerHasKeyUseWarning[componentName]) {
88
return;
@@ -124,7 +124,8 @@ function coerceRef(
124
element._owner.stateNode !== element._self
125
)
126
) {
127
- const componentName = getComponentName(returnFiber.type) || 'Component';
127
+ const componentName =
128
+ getComponentNameFromFiber(returnFiber) || 'Component';
129
if (!didWarnAboutStringRefs[componentName]) {
130
if (warnAboutStringRefs) {
131
console.error(
@@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
233
234
function warnOnFunctionType(returnFiber: Fiber) {
235
if (__DEV__) {
235
- const componentName = getComponentName(returnFiber.type) || 'Component';
236
+ const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
237
238
if (ownerHasFunctionTypeWarning[componentName]) {
239
return;
@@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) {
1334
'%s(...): Nothing was returned from render. This usually means a ' +
1335
'return statement is missing. Or, to render nothing, ' +
1336
'return null.',
1336
- getComponentName(returnFiber.type) || 'Component',
1337
+ getComponentNameFromFiber(returnFiber) || 'Component',
1338
);
1339
}
1340
}
packages/react-reconciler/src/ReactCurrentFiber.js
+2
-2
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes';
11
12
import ReactSharedInternals from 'shared/ReactSharedInternals';
13
import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
14
-import getComponentName from 'shared/getComponentName';
14
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
15
16
const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
17
@@ -25,7 +25,7 @@ export function getCurrentFiberOwnerNameInDevOrNull(): string | null {
25
}
26
const owner = current._debugOwner;
27
if (owner !== null && typeof owner !== 'undefined') {
28
- return getComponentName(owner.type);
28
+ return getComponentNameFromFiber(owner);
29
}
30
}
31
return null;
packages/react-reconciler/src/ReactFiber.new.js
+2
-36
@@ -52,7 +52,7 @@ import {
52
LegacyHiddenComponent,
53
CacheComponent,
54
} from './ReactWorkTags';
55
-import getComponentName from 'shared/getComponentName';
55
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
56
57
import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
58
import {
@@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps(
584
"it's defined in, or you might have mixed up default and " +
585
'named imports.';
586
}
587
- const ownerName = owner ? getComponentName(owner.type) : null;
587
+ const ownerName = owner ? getComponentNameFromFiber(owner) : null;
588
if (ownerName) {
589
info += '\n\nCheck the render method of `' + ownerName + '`.';
590
}
@@ -678,9 +678,7 @@ function createFiberFromProfiler(
678
}
679
680
const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
681
- // TODO: The Profiler fiber shouldn't have a type. It has a tag.
681
fiber.elementType = REACT_PROFILER_TYPE;
683
- fiber.type = REACT_PROFILER_TYPE;
682
fiber.lanes = lanes;
683
684
if (enableProfilerTimer) {
@@ -700,13 +698,7 @@ export function createFiberFromSuspense(
698
key: null | string,
699
) {
700
const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
703
-
704
- // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
705
- // This needs to be fixed in getComponentName so that it relies on the tag
706
- // instead.
707
- fiber.type = REACT_SUSPENSE_TYPE;
701
fiber.elementType = REACT_SUSPENSE_TYPE;
709
-
702
fiber.lanes = lanes;
703
return fiber;
704
}
@@ -718,12 +710,6 @@ export function createFiberFromSuspenseList(
710
key: null | string,
711
) {
712
const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
721
- if (__DEV__) {
722
- // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.
723
- // This needs to be fixed in getComponentName so that it relies on the tag
724
- // instead.
725
- fiber.type = REACT_SUSPENSE_LIST_TYPE;
726
- }
713
fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
714
fiber.lanes = lanes;
715
return fiber;
@@ -736,12 +722,6 @@ export function createFiberFromOffscreen(
722
key: null | string,
723
) {
724
const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
739
- // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.
740
- // This needs to be fixed in getComponentName so that it relies on the tag
741
- // instead.
742
- if (__DEV__) {
743
- fiber.type = REACT_OFFSCREEN_TYPE;
744
- }
725
fiber.elementType = REACT_OFFSCREEN_TYPE;
726
fiber.lanes = lanes;
727
return fiber;
@@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden(
734
key: null | string,
735
) {
736
const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
757
- // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.
758
- // This needs to be fixed in getComponentName so that it relies on the tag
759
- // instead.
760
- if (__DEV__) {
761
- fiber.type = REACT_LEGACY_HIDDEN_TYPE;
762
- }
737
fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
738
fiber.lanes = lanes;
739
return fiber;
@@ -772,12 +746,6 @@ export function createFiberFromCache(
746
key: null | string,
747
) {
748
const fiber = createFiber(CacheComponent, pendingProps, key, mode);
775
- // TODO: The Cache fiber shouldn't have a type. It has a tag.
776
- // This needs to be fixed in getComponentName so that it relies on the tag
777
- // instead.
778
- if (__DEV__) {
779
- fiber.type = REACT_CACHE_TYPE;
780
- }
749
fiber.elementType = REACT_CACHE_TYPE;
750
fiber.lanes = lanes;
751
return fiber;
@@ -795,9 +763,7 @@ export function createFiberFromText(
763
764
export function createFiberFromHostInstanceForDeletion(): Fiber {
765
const fiber = createFiber(HostComponent, null, null, NoMode);
798
- // TODO: These should not need a type.
766
fiber.elementType = 'DELETED';
800
- fiber.type = 'DELETED';
767
return fiber;
768
}
769
packages/react-reconciler/src/ReactFiber.old.js
+2
-36
@@ -52,7 +52,7 @@ import {
52
LegacyHiddenComponent,
53
CacheComponent,
54
} from './ReactWorkTags';
55
-import getComponentName from 'shared/getComponentName';
55
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
56
57
import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
58
import {
@@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps(
584
"it's defined in, or you might have mixed up default and " +
585
'named imports.';
586
}
587
- const ownerName = owner ? getComponentName(owner.type) : null;
587
+ const ownerName = owner ? getComponentNameFromFiber(owner) : null;
588
if (ownerName) {
589
info += '\n\nCheck the render method of `' + ownerName + '`.';
590
}
@@ -678,9 +678,7 @@ function createFiberFromProfiler(
678
}
679
680
const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
681
- // TODO: The Profiler fiber shouldn't have a type. It has a tag.
681
fiber.elementType = REACT_PROFILER_TYPE;
683
- fiber.type = REACT_PROFILER_TYPE;
682
fiber.lanes = lanes;
683
684
if (enableProfilerTimer) {
@@ -700,13 +698,7 @@ export function createFiberFromSuspense(
698
key: null | string,
699
) {
700
const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
703
-
704
- // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
705
- // This needs to be fixed in getComponentName so that it relies on the tag
706
- // instead.
707
- fiber.type = REACT_SUSPENSE_TYPE;
701
fiber.elementType = REACT_SUSPENSE_TYPE;
709
-
702
fiber.lanes = lanes;
703
return fiber;
704
}
@@ -718,12 +710,6 @@ export function createFiberFromSuspenseList(
710
key: null | string,
711
) {
712
const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
721
- if (__DEV__) {
722
- // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.
723
- // This needs to be fixed in getComponentName so that it relies on the tag
724
- // instead.
725
- fiber.type = REACT_SUSPENSE_LIST_TYPE;
726
- }
713
fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
714
fiber.lanes = lanes;
715
return fiber;
@@ -736,12 +722,6 @@ export function createFiberFromOffscreen(
722
key: null | string,
723
) {
724
const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
739
- // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.
740
- // This needs to be fixed in getComponentName so that it relies on the tag
741
- // instead.
742
- if (__DEV__) {
743
- fiber.type = REACT_OFFSCREEN_TYPE;
744
- }
725
fiber.elementType = REACT_OFFSCREEN_TYPE;
726
fiber.lanes = lanes;
727
return fiber;
@@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden(
734
key: null | string,
735
) {
736
const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
757
- // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.
758
- // This needs to be fixed in getComponentName so that it relies on the tag
759
- // instead.
760
- if (__DEV__) {
761
- fiber.type = REACT_LEGACY_HIDDEN_TYPE;
762
- }
737
fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
738
fiber.lanes = lanes;
739
return fiber;
@@ -772,12 +746,6 @@ export function createFiberFromCache(
746
key: null | string,
747
) {
748
const fiber = createFiber(CacheComponent, pendingProps, key, mode);
775
- // TODO: The Cache fiber shouldn't have a type. It has a tag.
776
- // This needs to be fixed in getComponentName so that it relies on the tag
777
- // instead.
778
- if (__DEV__) {
779
- fiber.type = REACT_CACHE_TYPE;
780
- }
749
fiber.elementType = REACT_CACHE_TYPE;
750
fiber.lanes = lanes;
751
return fiber;
@@ -795,9 +763,7 @@ export function createFiberFromText(
763
764
export function createFiberFromHostInstanceForDeletion(): Fiber {
765
const fiber = createFiber(HostComponent, null, null, NoMode);
798
- // TODO: These should not need a type.
766
fiber.elementType = 'DELETED';
800
- fiber.type = 'DELETED';
767
return fiber;
768
}
769
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+18
-17
@@ -84,7 +84,8 @@ import {
84
} from 'shared/ReactFeatureFlags';
85
import invariant from 'shared/invariant';
86
import shallowEqual from 'shared/shallowEqual';
87
-import getComponentName from 'shared/getComponentName';
87
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
88
+import getComponentNameFromType from 'shared/getComponentNameFromType';
89
import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
90
import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
91
import {
@@ -332,7 +333,7 @@ function updateForwardRef(
333
innerPropTypes,
334
nextProps, // Resolved props
335
'prop',
335
- getComponentName(Component),
336
+ getComponentNameFromType(Component),
337
);
338
}
339
}
@@ -442,7 +443,7 @@ function updateMemoComponent(
443
innerPropTypes,
444
nextProps, // Resolved props
445
'prop',
445
- getComponentName(type),
446
+ getComponentNameFromType(type),
447
);
448
}
449
}
@@ -469,7 +470,7 @@ function updateMemoComponent(
470
innerPropTypes,
471
nextProps, // Resolved props
472
'prop',
472
- getComponentName(type),
473
+ getComponentNameFromType(type),
474
);
475
}
476
}
@@ -530,7 +531,7 @@ function updateSimpleMemoComponent(
531
outerPropTypes,
532
nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
533
'prop',
533
- getComponentName(outerMemoType),
534
+ getComponentNameFromType(outerMemoType),
535
);
536
}
537
}
@@ -862,7 +863,7 @@ function updateFunctionComponent(
863
innerPropTypes,
864
nextProps, // Resolved props
865
'prop',
865
- getComponentName(Component),
866
+ getComponentNameFromType(Component),
867
);
868
}
869
}
@@ -945,7 +946,7 @@ function updateClassComponent(
946
innerPropTypes,
947
nextProps, // Resolved props
948
'prop',
948
- getComponentName(Component),
949
+ getComponentNameFromType(Component),
950
);
951
}
952
}
@@ -1012,7 +1013,7 @@ function updateClassComponent(
1013
console.error(
1014
'It looks like %s is reassigning its own `this.props` while rendering. ' +
1015
'This is not supported and can lead to confusing bugs.',
1015
- getComponentName(workInProgress.type) || 'a component',
1016
+ getComponentNameFromFiber(workInProgress) || 'a component',
1017
);
1018
}
1019
didWarnAboutReassigningProps = true;
@@ -1343,7 +1344,7 @@ function mountLazyComponent(
1344
outerPropTypes,
1345
resolvedProps, // Resolved for outer only
1346
'prop',
1346
- getComponentName(Component),
1347
+ getComponentNameFromType(Component),
1348
);
1349
}
1350
}
@@ -1465,7 +1466,7 @@ function mountIndeterminateComponent(
1466
Component.prototype &&
1467
typeof Component.prototype.render === 'function'
1468
) {
1468
- const componentName = getComponentName(Component) || 'Unknown';
1469
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1470
1471
if (!didWarnAboutBadClass[componentName]) {
1472
console.error(
@@ -1515,7 +1516,7 @@ function mountIndeterminateComponent(
1516
typeof value.render === 'function' &&
1517
value.$$typeof === undefined
1518
) {
1518
- const componentName = getComponentName(Component) || 'Unknown';
1519
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1520
if (!didWarnAboutModulePatternComponent[componentName]) {
1521
console.error(
1522
'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1542,7 +1543,7 @@ function mountIndeterminateComponent(
1543
value.$$typeof === undefined
1544
) {
1545
if (__DEV__) {
1545
- const componentName = getComponentName(Component) || 'Unknown';
1546
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1547
if (!didWarnAboutModulePatternComponent[componentName]) {
1548
console.error(
1549
'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1609,7 +1610,7 @@ function mountIndeterminateComponent(
1610
console.error(
1611
'%s uses the legacy contextTypes API which is no longer supported. ' +
1612
'Use React.createContext() with React.useContext() instead.',
1612
- getComponentName(Component) || 'Unknown',
1613
+ getComponentNameFromType(Component) || 'Unknown',
1614
);
1615
}
1616
@@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1678
warnAboutDefaultPropsOnFunctionComponents &&
1679
Component.defaultProps !== undefined
1680
) {
1680
- const componentName = getComponentName(Component) || 'Unknown';
1681
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1682
1683
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
1684
console.error(
@@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1691
}
1692
1693
if (typeof Component.getDerivedStateFromProps === 'function') {
1693
- const componentName = getComponentName(Component) || 'Unknown';
1694
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1695
1696
if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
1697
console.error(
@@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1706
typeof Component.contextType === 'object' &&
1707
Component.contextType !== null
1708
) {
1708
- const componentName = getComponentName(Component) || 'Unknown';
1709
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1710
1711
if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
1712
console.error(
@@ -3514,7 +3515,7 @@ function beginWork(
3515
outerPropTypes,
3516
resolvedProps, // Resolved for outer only
3517
'prop',
3517
- getComponentName(type),
3518
+ getComponentNameFromType(type),
3519
);
3520
}
3521
}
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+18
-17
@@ -84,7 +84,8 @@ import {
84
} from 'shared/ReactFeatureFlags';
85
import invariant from 'shared/invariant';
86
import shallowEqual from 'shared/shallowEqual';
87
-import getComponentName from 'shared/getComponentName';
87
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
88
+import getComponentNameFromType from 'shared/getComponentNameFromType';
89
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
90
import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
91
import {
@@ -332,7 +333,7 @@ function updateForwardRef(
333
innerPropTypes,
334
nextProps, // Resolved props
335
'prop',
335
- getComponentName(Component),
336
+ getComponentNameFromType(Component),
337
);
338
}
339
}
@@ -442,7 +443,7 @@ function updateMemoComponent(
443
innerPropTypes,
444
nextProps, // Resolved props
445
'prop',
445
- getComponentName(type),
446
+ getComponentNameFromType(type),
447
);
448
}
449
}
@@ -469,7 +470,7 @@ function updateMemoComponent(
470
innerPropTypes,
471
nextProps, // Resolved props
472
'prop',
472
- getComponentName(type),
473
+ getComponentNameFromType(type),
474
);
475
}
476
}
@@ -530,7 +531,7 @@ function updateSimpleMemoComponent(
531
outerPropTypes,
532
nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
533
'prop',
533
- getComponentName(outerMemoType),
534
+ getComponentNameFromType(outerMemoType),
535
);
536
}
537
}
@@ -862,7 +863,7 @@ function updateFunctionComponent(
863
innerPropTypes,
864
nextProps, // Resolved props
865
'prop',
865
- getComponentName(Component),
866
+ getComponentNameFromType(Component),
867
);
868
}
869
}
@@ -945,7 +946,7 @@ function updateClassComponent(
946
innerPropTypes,
947
nextProps, // Resolved props
948
'prop',
948
- getComponentName(Component),
949
+ getComponentNameFromType(Component),
950
);
951
}
952
}
@@ -1012,7 +1013,7 @@ function updateClassComponent(
1013
console.error(
1014
'It looks like %s is reassigning its own `this.props` while rendering. ' +
1015
'This is not supported and can lead to confusing bugs.',
1015
- getComponentName(workInProgress.type) || 'a component',
1016
+ getComponentNameFromFiber(workInProgress) || 'a component',
1017
);
1018
}
1019
didWarnAboutReassigningProps = true;
@@ -1343,7 +1344,7 @@ function mountLazyComponent(
1344
outerPropTypes,
1345
resolvedProps, // Resolved for outer only
1346
'prop',
1346
- getComponentName(Component),
1347
+ getComponentNameFromType(Component),
1348
);
1349
}
1350
}
@@ -1465,7 +1466,7 @@ function mountIndeterminateComponent(
1466
Component.prototype &&
1467
typeof Component.prototype.render === 'function'
1468
) {
1468
- const componentName = getComponentName(Component) || 'Unknown';
1469
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1470
1471
if (!didWarnAboutBadClass[componentName]) {
1472
console.error(
@@ -1515,7 +1516,7 @@ function mountIndeterminateComponent(
1516
typeof value.render === 'function' &&
1517
value.$$typeof === undefined
1518
) {
1518
- const componentName = getComponentName(Component) || 'Unknown';
1519
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1520
if (!didWarnAboutModulePatternComponent[componentName]) {
1521
console.error(
1522
'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1542,7 +1543,7 @@ function mountIndeterminateComponent(
1543
value.$$typeof === undefined
1544
) {
1545
if (__DEV__) {
1545
- const componentName = getComponentName(Component) || 'Unknown';
1546
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1547
if (!didWarnAboutModulePatternComponent[componentName]) {
1548
console.error(
1549
'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1609,7 +1610,7 @@ function mountIndeterminateComponent(
1610
console.error(
1611
'%s uses the legacy contextTypes API which is no longer supported. ' +
1612
'Use React.createContext() with React.useContext() instead.',
1612
- getComponentName(Component) || 'Unknown',
1613
+ getComponentNameFromType(Component) || 'Unknown',
1614
);
1615
}
1616
@@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1678
warnAboutDefaultPropsOnFunctionComponents &&
1679
Component.defaultProps !== undefined
1680
) {
1680
- const componentName = getComponentName(Component) || 'Unknown';
1681
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1682
1683
if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
1684
console.error(
@@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1691
}
1692
1693
if (typeof Component.getDerivedStateFromProps === 'function') {
1693
- const componentName = getComponentName(Component) || 'Unknown';
1694
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1695
1696
if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
1697
console.error(
@@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
1706
typeof Component.contextType === 'object' &&
1707
Component.contextType !== null
1708
) {
1708
- const componentName = getComponentName(Component) || 'Unknown';
1709
+ const componentName = getComponentNameFromType(Component) || 'Unknown';
1710
1711
if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
1712
console.error(
@@ -3514,7 +3515,7 @@ function beginWork(
3515
outerPropTypes,
3516
resolvedProps, // Resolved for outer only
3517
'prop',
3517
- getComponentName(type),
3518
+ getComponentNameFromType(type),
3519
);
3520
}
3521
}
packages/react-reconciler/src/ReactFiberClassComponent.new.js
+16
-15
@@ -25,7 +25,8 @@ import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
25
import {isMounted} from './ReactFiberTreeReflection';
26
import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
27
import shallowEqual from 'shared/shallowEqual';
28
-import getComponentName from 'shared/getComponentName';
28
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
29
+import getComponentNameFromType from 'shared/getComponentNameFromType';
30
import invariant from 'shared/invariant';
31
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
32
@@ -119,7 +120,7 @@ if (__DEV__) {
120
121
warnOnUndefinedDerivedState = function(type, partialState) {
122
if (partialState === undefined) {
122
- const componentName = getComponentName(type) || 'Component';
123
+ const componentName = getComponentNameFromType(type) || 'Component';
124
if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
125
didWarnAboutUndefinedDerivedState.add(componentName);
126
console.error(
@@ -222,7 +223,7 @@ const classComponentUpdater = {
223
if (__DEV__) {
224
if (enableDebugTracing) {
225
if (fiber.mode & DebugTracingMode) {
225
- const name = getComponentName(fiber.type) || 'Unknown';
226
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
227
logStateUpdateScheduled(name, lane, payload);
228
}
229
}
@@ -257,7 +258,7 @@ const classComponentUpdater = {
258
if (__DEV__) {
259
if (enableDebugTracing) {
260
if (fiber.mode & DebugTracingMode) {
260
- const name = getComponentName(fiber.type) || 'Unknown';
261
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
262
logStateUpdateScheduled(name, lane, payload);
263
}
264
}
@@ -291,7 +292,7 @@ const classComponentUpdater = {
292
if (__DEV__) {
293
if (enableDebugTracing) {
294
if (fiber.mode & DebugTracingMode) {
294
- const name = getComponentName(fiber.type) || 'Unknown';
295
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
296
logForceUpdateScheduled(name, lane);
297
}
298
}
@@ -339,7 +340,7 @@ function checkShouldComponentUpdate(
340
console.error(
341
'%s.shouldComponentUpdate(): Returned undefined instead of a ' +
342
'boolean value. Make sure to return true or false.',
342
- getComponentName(ctor) || 'Component',
343
+ getComponentNameFromType(ctor) || 'Component',
344
);
345
}
346
}
@@ -359,7 +360,7 @@ function checkShouldComponentUpdate(
360
function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
361
const instance = workInProgress.stateNode;
362
if (__DEV__) {
362
- const name = getComponentName(ctor) || 'Component';
363
+ const name = getComponentNameFromType(ctor) || 'Component';
364
const renderPresent = instance.render;
365
366
if (!renderPresent) {
@@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
473
'%s has a method called shouldComponentUpdate(). ' +
474
'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
475
'Please extend React.Component if shouldComponentUpdate is used.',
475
- getComponentName(ctor) || 'A pure component',
476
+ getComponentNameFromType(ctor) || 'A pure component',
477
);
478
}
479
if (typeof instance.componentDidUnmount === 'function') {
@@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
535
console.error(
536
'%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
537
'This component defines getSnapshotBeforeUpdate() only.',
537
- getComponentName(ctor),
538
+ getComponentNameFromType(ctor),
539
);
540
}
541
@@ -631,7 +632,7 @@ function constructClassInstance(
632
console.error(
633
'%s defines an invalid contextType. ' +
634
'contextType should point to the Context object returned by React.createContext().%s',
634
- getComponentName(ctor) || 'Component',
635
+ getComponentNameFromType(ctor) || 'Component',
636
addendum,
637
);
638
}
@@ -674,7 +675,7 @@ function constructClassInstance(
675
676
if (__DEV__) {
677
if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
677
- const componentName = getComponentName(ctor) || 'Component';
678
+ const componentName = getComponentNameFromType(ctor) || 'Component';
679
if (!didWarnAboutUninitializedState.has(componentName)) {
680
didWarnAboutUninitializedState.add(componentName);
681
console.error(
@@ -730,7 +731,7 @@ function constructClassInstance(
731
foundWillReceivePropsName !== null ||
732
foundWillUpdateName !== null
733
) {
733
- const componentName = getComponentName(ctor) || 'Component';
734
+ const componentName = getComponentNameFromType(ctor) || 'Component';
735
const newApiName =
736
typeof ctor.getDerivedStateFromProps === 'function'
737
? 'getDerivedStateFromProps()'
@@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) {
781
'%s.componentWillMount(): Assigning directly to this.state is ' +
782
"deprecated (except inside a component's " +
783
'constructor). Use setState instead.',
783
- getComponentName(workInProgress.type) || 'Component',
784
+ getComponentNameFromFiber(workInProgress) || 'Component',
785
);
786
}
787
classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
@@ -804,7 +805,7 @@ function callComponentWillReceiveProps(
805
if (instance.state !== oldState) {
806
if (__DEV__) {
807
const componentName =
807
- getComponentName(workInProgress.type) || 'Component';
808
+ getComponentNameFromFiber(workInProgress) || 'Component';
809
if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
810
didWarnAboutStateAssignmentForComponent.add(componentName);
811
console.error(
@@ -849,7 +850,7 @@ function mountClassInstance(
850
851
if (__DEV__) {
852
if (instance.state === newProps) {
852
- const componentName = getComponentName(ctor) || 'Component';
853
+ const componentName = getComponentNameFromType(ctor) || 'Component';
854
if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
855
didWarnAboutDirectlyAssigningPropsToState.add(componentName);
856
console.error(
packages/react-reconciler/src/ReactFiberClassComponent.old.js
+16
-15
@@ -25,7 +25,8 @@ import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
25
import {isMounted} from './ReactFiberTreeReflection';
26
import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
27
import shallowEqual from 'shared/shallowEqual';
28
-import getComponentName from 'shared/getComponentName';
28
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
29
+import getComponentNameFromType from 'shared/getComponentNameFromType';
30
import invariant from 'shared/invariant';
31
import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
32
@@ -119,7 +120,7 @@ if (__DEV__) {
120
121
warnOnUndefinedDerivedState = function(type, partialState) {
122
if (partialState === undefined) {
122
- const componentName = getComponentName(type) || 'Component';
123
+ const componentName = getComponentNameFromType(type) || 'Component';
124
if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
125
didWarnAboutUndefinedDerivedState.add(componentName);
126
console.error(
@@ -222,7 +223,7 @@ const classComponentUpdater = {
223
if (__DEV__) {
224
if (enableDebugTracing) {
225
if (fiber.mode & DebugTracingMode) {
225
- const name = getComponentName(fiber.type) || 'Unknown';
226
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
227
logStateUpdateScheduled(name, lane, payload);
228
}
229
}
@@ -257,7 +258,7 @@ const classComponentUpdater = {
258
if (__DEV__) {
259
if (enableDebugTracing) {
260
if (fiber.mode & DebugTracingMode) {
260
- const name = getComponentName(fiber.type) || 'Unknown';
261
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
262
logStateUpdateScheduled(name, lane, payload);
263
}
264
}
@@ -291,7 +292,7 @@ const classComponentUpdater = {
292
if (__DEV__) {
293
if (enableDebugTracing) {
294
if (fiber.mode & DebugTracingMode) {
294
- const name = getComponentName(fiber.type) || 'Unknown';
295
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
296
logForceUpdateScheduled(name, lane);
297
}
298
}
@@ -339,7 +340,7 @@ function checkShouldComponentUpdate(
340
console.error(
341
'%s.shouldComponentUpdate(): Returned undefined instead of a ' +
342
'boolean value. Make sure to return true or false.',
342
- getComponentName(ctor) || 'Component',
343
+ getComponentNameFromType(ctor) || 'Component',
344
);
345
}
346
}
@@ -359,7 +360,7 @@ function checkShouldComponentUpdate(
360
function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
361
const instance = workInProgress.stateNode;
362
if (__DEV__) {
362
- const name = getComponentName(ctor) || 'Component';
363
+ const name = getComponentNameFromType(ctor) || 'Component';
364
const renderPresent = instance.render;
365
366
if (!renderPresent) {
@@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
473
'%s has a method called shouldComponentUpdate(). ' +
474
'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
475
'Please extend React.Component if shouldComponentUpdate is used.',
475
- getComponentName(ctor) || 'A pure component',
476
+ getComponentNameFromType(ctor) || 'A pure component',
477
);
478
}
479
if (typeof instance.componentDidUnmount === 'function') {
@@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
535
console.error(
536
'%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
537
'This component defines getSnapshotBeforeUpdate() only.',
537
- getComponentName(ctor),
538
+ getComponentNameFromType(ctor),
539
);
540
}
541
@@ -631,7 +632,7 @@ function constructClassInstance(
632
console.error(
633
'%s defines an invalid contextType. ' +
634
'contextType should point to the Context object returned by React.createContext().%s',
634
- getComponentName(ctor) || 'Component',
635
+ getComponentNameFromType(ctor) || 'Component',
636
addendum,
637
);
638
}
@@ -674,7 +675,7 @@ function constructClassInstance(
675
676
if (__DEV__) {
677
if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
677
- const componentName = getComponentName(ctor) || 'Component';
678
+ const componentName = getComponentNameFromType(ctor) || 'Component';
679
if (!didWarnAboutUninitializedState.has(componentName)) {
680
didWarnAboutUninitializedState.add(componentName);
681
console.error(
@@ -730,7 +731,7 @@ function constructClassInstance(
731
foundWillReceivePropsName !== null ||
732
foundWillUpdateName !== null
733
) {
733
- const componentName = getComponentName(ctor) || 'Component';
734
+ const componentName = getComponentNameFromType(ctor) || 'Component';
735
const newApiName =
736
typeof ctor.getDerivedStateFromProps === 'function'
737
? 'getDerivedStateFromProps()'
@@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) {
781
'%s.componentWillMount(): Assigning directly to this.state is ' +
782
"deprecated (except inside a component's " +
783
'constructor). Use setState instead.',
783
- getComponentName(workInProgress.type) || 'Component',
784
+ getComponentNameFromFiber(workInProgress) || 'Component',
785
);
786
}
787
classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
@@ -804,7 +805,7 @@ function callComponentWillReceiveProps(
805
if (instance.state !== oldState) {
806
if (__DEV__) {
807
const componentName =
807
- getComponentName(workInProgress.type) || 'Component';
808
+ getComponentNameFromFiber(workInProgress) || 'Component';
809
if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
810
didWarnAboutStateAssignmentForComponent.add(componentName);
811
console.error(
@@ -849,7 +850,7 @@ function mountClassInstance(
850
851
if (__DEV__) {
852
if (instance.state === newProps) {
852
- const componentName = getComponentName(ctor) || 'Component';
853
+ const componentName = getComponentNameFromType(ctor) || 'Component';
854
if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
855
didWarnAboutDirectlyAssigningPropsToState.add(componentName);
856
console.error(
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+11
-11
@@ -80,7 +80,7 @@ import {
80
PassiveMask,
81
PassiveUnmountPendingDev,
82
} from './ReactFiberFlags';
83
-import getComponentName from 'shared/getComponentName';
83
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
84
import invariant from 'shared/invariant';
85
import {
86
resetCurrentFiber as resetCurrentDebugFiberInDEV,
@@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
393
'This might either be because of a bug in React, or because ' +
394
'a component reassigns its own `this.props`. ' +
395
'Please file an issue.',
396
- getComponentName(finishedWork.type) || 'instance',
396
+ getComponentNameFromFiber(finishedWork) || 'instance',
397
);
398
}
399
if (instance.state !== finishedWork.memoizedState) {
@@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
403
'This might either be because of a bug in React, or because ' +
404
'a component reassigns its own `this.state`. ' +
405
'Please file an issue.',
406
- getComponentName(finishedWork.type) || 'instance',
406
+ getComponentNameFromFiber(finishedWork) || 'instance',
407
);
408
}
409
}
@@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
421
console.error(
422
'%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
423
'must be returned. You have returned undefined.',
424
- getComponentName(finishedWork.type),
424
+ getComponentNameFromFiber(finishedWork),
425
);
426
}
427
}
@@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber(
647
'This might either be because of a bug in React, or because ' +
648
'a component reassigns its own `this.props`. ' +
649
'Please file an issue.',
650
- getComponentName(finishedWork.type) || 'instance',
650
+ getComponentNameFromFiber(finishedWork) || 'instance',
651
);
652
}
653
if (instance.state !== finishedWork.memoizedState) {
@@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber(
657
'This might either be because of a bug in React, or because ' +
658
'a component reassigns its own `this.state`. ' +
659
'Please file an issue.',
660
- getComponentName(finishedWork.type) || 'instance',
660
+ getComponentNameFromFiber(finishedWork) || 'instance',
661
);
662
}
663
}
@@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber(
697
'This might either be because of a bug in React, or because ' +
698
'a component reassigns its own `this.props`. ' +
699
'Please file an issue.',
700
- getComponentName(finishedWork.type) || 'instance',
700
+ getComponentNameFromFiber(finishedWork) || 'instance',
701
);
702
}
703
if (instance.state !== finishedWork.memoizedState) {
@@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber(
707
'This might either be because of a bug in React, or because ' +
708
'a component reassigns its own `this.state`. ' +
709
'Please file an issue.',
710
- getComponentName(finishedWork.type) || 'instance',
710
+ getComponentNameFromFiber(finishedWork) || 'instance',
711
);
712
}
713
}
@@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber(
755
'This might either be because of a bug in React, or because ' +
756
'a component reassigns its own `this.props`. ' +
757
'Please file an issue.',
758
- getComponentName(finishedWork.type) || 'instance',
758
+ getComponentNameFromFiber(finishedWork) || 'instance',
759
);
760
}
761
if (instance.state !== finishedWork.memoizedState) {
@@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber(
765
'This might either be because of a bug in React, or because ' +
766
'a component reassigns its own `this.state`. ' +
767
'Please file an issue.',
768
- getComponentName(finishedWork.type) || 'instance',
768
+ getComponentNameFromFiber(finishedWork) || 'instance',
769
);
770
}
771
}
@@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) {
1016
console.error(
1017
'Unexpected ref object provided for %s. ' +
1018
'Use either a ref-setter function or React.createRef().',
1019
- getComponentName(finishedWork.type),
1019
+ getComponentNameFromFiber(finishedWork),
1020
);
1021
}
1022
}
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+11
-11
@@ -80,7 +80,7 @@ import {
80
PassiveMask,
81
PassiveUnmountPendingDev,
82
} from './ReactFiberFlags';
83
-import getComponentName from 'shared/getComponentName';
83
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
84
import invariant from 'shared/invariant';
85
import {
86
resetCurrentFiber as resetCurrentDebugFiberInDEV,
@@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
393
'This might either be because of a bug in React, or because ' +
394
'a component reassigns its own `this.props`. ' +
395
'Please file an issue.',
396
- getComponentName(finishedWork.type) || 'instance',
396
+ getComponentNameFromFiber(finishedWork) || 'instance',
397
);
398
}
399
if (instance.state !== finishedWork.memoizedState) {
@@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
403
'This might either be because of a bug in React, or because ' +
404
'a component reassigns its own `this.state`. ' +
405
'Please file an issue.',
406
- getComponentName(finishedWork.type) || 'instance',
406
+ getComponentNameFromFiber(finishedWork) || 'instance',
407
);
408
}
409
}
@@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
421
console.error(
422
'%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
423
'must be returned. You have returned undefined.',
424
- getComponentName(finishedWork.type),
424
+ getComponentNameFromFiber(finishedWork),
425
);
426
}
427
}
@@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber(
647
'This might either be because of a bug in React, or because ' +
648
'a component reassigns its own `this.props`. ' +
649
'Please file an issue.',
650
- getComponentName(finishedWork.type) || 'instance',
650
+ getComponentNameFromFiber(finishedWork) || 'instance',
651
);
652
}
653
if (instance.state !== finishedWork.memoizedState) {
@@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber(
657
'This might either be because of a bug in React, or because ' +
658
'a component reassigns its own `this.state`. ' +
659
'Please file an issue.',
660
- getComponentName(finishedWork.type) || 'instance',
660
+ getComponentNameFromFiber(finishedWork) || 'instance',
661
);
662
}
663
}
@@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber(
697
'This might either be because of a bug in React, or because ' +
698
'a component reassigns its own `this.props`. ' +
699
'Please file an issue.',
700
- getComponentName(finishedWork.type) || 'instance',
700
+ getComponentNameFromFiber(finishedWork) || 'instance',
701
);
702
}
703
if (instance.state !== finishedWork.memoizedState) {
@@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber(
707
'This might either be because of a bug in React, or because ' +
708
'a component reassigns its own `this.state`. ' +
709
'Please file an issue.',
710
- getComponentName(finishedWork.type) || 'instance',
710
+ getComponentNameFromFiber(finishedWork) || 'instance',
711
);
712
}
713
}
@@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber(
755
'This might either be because of a bug in React, or because ' +
756
'a component reassigns its own `this.props`. ' +
757
'Please file an issue.',
758
- getComponentName(finishedWork.type) || 'instance',
758
+ getComponentNameFromFiber(finishedWork) || 'instance',
759
);
760
}
761
if (instance.state !== finishedWork.memoizedState) {
@@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber(
765
'This might either be because of a bug in React, or because ' +
766
'a component reassigns its own `this.state`. ' +
767
'Please file an issue.',
768
- getComponentName(finishedWork.type) || 'instance',
768
+ getComponentNameFromFiber(finishedWork) || 'instance',
769
);
770
}
771
}
@@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) {
1016
console.error(
1017
'Unexpected ref object provided for %s. ' +
1018
'Use either a ref-setter function or React.createRef().',
1019
- getComponentName(finishedWork.type),
1019
+ getComponentNameFromFiber(finishedWork),
1020
);
1021
}
1022
}
packages/react-reconciler/src/ReactFiberContext.new.js
+5
-5
@@ -13,7 +13,7 @@ import type {StackCursor} from './ReactFiberStack.new';
13
import {isFiberMounted} from './ReactFiberTreeReflection';
14
import {disableLegacyContext} from 'shared/ReactFeatureFlags';
15
import {ClassComponent, HostRoot} from './ReactWorkTags';
16
-import getComponentName from 'shared/getComponentName';
16
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
17
import invariant from 'shared/invariant';
18
import checkPropTypes from 'shared/checkPropTypes';
19
@@ -104,7 +104,7 @@ function getMaskedContext(
104
}
105
106
if (__DEV__) {
107
- const name = getComponentName(type) || 'Unknown';
107
+ const name = getComponentNameFromFiber(workInProgress) || 'Unknown';
108
checkPropTypes(contextTypes, context, 'context', name);
109
}
110
@@ -187,7 +187,7 @@ function processChildContext(
187
// It has only been added in Fiber to match the (unintentional) behavior in Stack.
188
if (typeof instance.getChildContext !== 'function') {
189
if (__DEV__) {
190
- const componentName = getComponentName(type) || 'Unknown';
190
+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
191
192
if (!warnedAboutMissingGetChildContext[componentName]) {
193
warnedAboutMissingGetChildContext[componentName] = true;
@@ -208,12 +208,12 @@ function processChildContext(
208
invariant(
209
contextKey in childContextTypes,
210
'%s.getChildContext(): key "%s" is not defined in childContextTypes.',
211
- getComponentName(type) || 'Unknown',
211
+ getComponentNameFromFiber(fiber) || 'Unknown',
212
contextKey,
213
);
214
}
215
if (__DEV__) {
216
- const name = getComponentName(type) || 'Unknown';
216
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
217
checkPropTypes(childContextTypes, childContext, 'child context', name);
218
}
219
packages/react-reconciler/src/ReactFiberContext.old.js
+5
-5
@@ -13,7 +13,7 @@ import type {StackCursor} from './ReactFiberStack.old';
13
import {isFiberMounted} from './ReactFiberTreeReflection';
14
import {disableLegacyContext} from 'shared/ReactFeatureFlags';
15
import {ClassComponent, HostRoot} from './ReactWorkTags';
16
-import getComponentName from 'shared/getComponentName';
16
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
17
import invariant from 'shared/invariant';
18
import checkPropTypes from 'shared/checkPropTypes';
19
@@ -104,7 +104,7 @@ function getMaskedContext(
104
}
105
106
if (__DEV__) {
107
- const name = getComponentName(type) || 'Unknown';
107
+ const name = getComponentNameFromFiber(workInProgress) || 'Unknown';
108
checkPropTypes(contextTypes, context, 'context', name);
109
}
110
@@ -187,7 +187,7 @@ function processChildContext(
187
// It has only been added in Fiber to match the (unintentional) behavior in Stack.
188
if (typeof instance.getChildContext !== 'function') {
189
if (__DEV__) {
190
- const componentName = getComponentName(type) || 'Unknown';
190
+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
191
192
if (!warnedAboutMissingGetChildContext[componentName]) {
193
warnedAboutMissingGetChildContext[componentName] = true;
@@ -208,12 +208,12 @@ function processChildContext(
208
invariant(
209
contextKey in childContextTypes,
210
'%s.getChildContext(): key "%s" is not defined in childContextTypes.',
211
- getComponentName(type) || 'Unknown',
211
+ getComponentNameFromFiber(fiber) || 'Unknown',
212
contextKey,
213
);
214
}
215
if (__DEV__) {
216
- const name = getComponentName(type) || 'Unknown';
216
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
217
checkPropTypes(childContextTypes, childContext, 'child context', name);
218
}
219
packages/react-reconciler/src/ReactFiberErrorLogger.js
+10
-8
@@ -12,7 +12,8 @@ import type {CapturedValue} from './ReactCapturedValue';
12
13
import {showErrorDialog} from './ReactFiberErrorDialog';
14
import {ClassComponent} from './ReactWorkTags';
15
-import getComponentName from 'shared/getComponentName';
15
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
16
+import {HostRoot} from 'react-reconciler/src/ReactWorkTags';
17
18
export function logCapturedError(
19
boundary: Fiber,
@@ -51,21 +52,22 @@ export function logCapturedError(
52
// https://github.com/facebook/react/pull/13384
53
}
54
54
- const componentName = source ? getComponentName(source.type) : null;
55
+ const componentName = source ? getComponentNameFromFiber(source) : null;
56
const componentNameMessage = componentName
57
? `The above error occurred in the <${componentName}> component:`
58
: 'The above error occurred in one of your React components:';
59
60
let errorBoundaryMessage;
60
- const errorBoundaryName = getComponentName(boundary.type);
61
- if (errorBoundaryName) {
62
- errorBoundaryMessage =
63
- `React will try to recreate this component tree from scratch ` +
64
- `using the error boundary you provided, ${errorBoundaryName}.`;
65
- } else {
61
+ if (boundary.tag === HostRoot) {
62
errorBoundaryMessage =
63
'Consider adding an error boundary to your tree to customize error handling behavior.\n' +
64
'Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.';
65
+ } else {
66
+ const errorBoundaryName =
67
+ getComponentNameFromFiber(boundary) || 'Anonymous';
68
+ errorBoundaryMessage =
69
+ `React will try to recreate this component tree from scratch ` +
70
+ `using the error boundary you provided, ${errorBoundaryName}.`;
71
}
72
const combinedMessage =
73
`${componentNameMessage}\n${componentStack}\n\n` +
packages/react-reconciler/src/ReactFiberHooks.new.js
+9
-7
@@ -81,7 +81,7 @@ import {
81
} from './ReactFiberWorkLoop.new';
82
83
import invariant from 'shared/invariant';
84
-import getComponentName from 'shared/getComponentName';
84
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
85
import is from 'shared/objectIs';
86
import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
87
import {
@@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) {
244
245
function warnOnHookMismatchInDev(currentHookName: HookType) {
246
if (__DEV__) {
247
- const componentName = getComponentName(currentlyRenderingFiber.type);
247
+ const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
248
if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
249
didWarnAboutMismatchedHooksForComponent.add(componentName);
250
@@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
1006
// begin phase without double rendering. We should consider suppressing
1007
// any error from a double render (with a warning) to more closely match
1008
// the production behavior.
1009
- const componentName = getComponentName(currentlyRenderingFiber.type);
1009
+ const componentName = getComponentNameFromFiber(
1010
+ currentlyRenderingFiber,
1011
+ );
1012
invariant(
1013
false,
1014
'A mutable source was mutated while the %s component was rendering. ' +
@@ -1326,7 +1328,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
1328
'Reading from a ref during render is only safe if:\n' +
1329
'1. The ref value has not been updated, or\n' +
1330
'2. The ref holds a lazily-initialized value that is only set once.\n',
1329
- getComponentName(currentlyRenderingFiber.type) || 'Unknown',
1331
+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
1332
);
1333
}
1334
}
@@ -1343,7 +1345,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
1345
'%s: Unsafe write of a mutable value during render.\n\n' +
1346
'Writing to a ref during render is only safe if the ref holds ' +
1347
'a lazily-initialized value that is only set once.\n',
1346
- getComponentName(currentlyRenderingFiber.type) || 'Unknown',
1348
+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
1349
);
1350
}
1351
}
@@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
1783
function warnOnOpaqueIdentifierAccessInDEV(fiber) {
1784
if (__DEV__) {
1785
// TODO: Should warn in effects and callbacks, too
1784
- const name = getComponentName(fiber.type) || 'Unknown';
1786
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
1787
if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
1788
console.error(
1789
'The object passed back from useOpaqueIdentifier is meant to be ' +
@@ -2059,7 +2061,7 @@ function dispatchAction<S, A>(
2061
if (__DEV__) {
2062
if (enableDebugTracing) {
2063
if (fiber.mode & DebugTracingMode) {
2062
- const name = getComponentName(fiber.type) || 'Unknown';
2064
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
2065
logStateUpdateScheduled(name, lane, action);
2066
}
2067
}
packages/react-reconciler/src/ReactFiberHooks.old.js
+9
-7
@@ -81,7 +81,7 @@ import {
81
} from './ReactFiberWorkLoop.old';
82
83
import invariant from 'shared/invariant';
84
-import getComponentName from 'shared/getComponentName';
84
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
85
import is from 'shared/objectIs';
86
import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
87
import {
@@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) {
244
245
function warnOnHookMismatchInDev(currentHookName: HookType) {
246
if (__DEV__) {
247
- const componentName = getComponentName(currentlyRenderingFiber.type);
247
+ const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
248
if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
249
didWarnAboutMismatchedHooksForComponent.add(componentName);
250
@@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
1006
// begin phase without double rendering. We should consider suppressing
1007
// any error from a double render (with a warning) to more closely match
1008
// the production behavior.
1009
- const componentName = getComponentName(currentlyRenderingFiber.type);
1009
+ const componentName = getComponentNameFromFiber(
1010
+ currentlyRenderingFiber,
1011
+ );
1012
invariant(
1013
false,
1014
'A mutable source was mutated while the %s component was rendering. ' +
@@ -1326,7 +1328,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
1328
'Reading from a ref during render is only safe if:\n' +
1329
'1. The ref value has not been updated, or\n' +
1330
'2. The ref holds a lazily-initialized value that is only set once.\n',
1329
- getComponentName(currentlyRenderingFiber.type) || 'Unknown',
1331
+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
1332
);
1333
}
1334
}
@@ -1343,7 +1345,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
1345
'%s: Unsafe write of a mutable value during render.\n\n' +
1346
'Writing to a ref during render is only safe if the ref holds ' +
1347
'a lazily-initialized value that is only set once.\n',
1346
- getComponentName(currentlyRenderingFiber.type) || 'Unknown',
1348
+ getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
1349
);
1350
}
1351
}
@@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
1783
function warnOnOpaqueIdentifierAccessInDEV(fiber) {
1784
if (__DEV__) {
1785
// TODO: Should warn in effects and callbacks, too
1784
- const name = getComponentName(fiber.type) || 'Unknown';
1786
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
1787
if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
1788
console.error(
1789
'The object passed back from useOpaqueIdentifier is meant to be ' +
@@ -2059,7 +2061,7 @@ function dispatchAction<S, A>(
2061
if (__DEV__) {
2062
if (enableDebugTracing) {
2063
if (fiber.mode & DebugTracingMode) {
2062
- const name = getComponentName(fiber.type) || 'Unknown';
2064
+ const name = getComponentNameFromFiber(fiber) || 'Unknown';
2065
logStateUpdateScheduled(name, lane, action);
2066
}
2067
}
packages/react-reconciler/src/ReactFiberReconciler.new.js
+3
-3
@@ -32,7 +32,7 @@ import {
32
HostRoot,
33
SuspenseComponent,
34
} from './ReactWorkTags';
35
-import getComponentName from 'shared/getComponentName';
35
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
36
import invariant from 'shared/invariant';
37
import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
38
import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -205,7 +205,7 @@ function findHostInstanceWithWarning(
205
return null;
206
}
207
if (hostFiber.mode & StrictLegacyMode) {
208
- const componentName = getComponentName(fiber.type) || 'Component';
208
+ const componentName = getComponentNameFromFiber(fiber) || 'Component';
209
if (!didWarnAboutFindNodeInStrictMode[componentName]) {
210
didWarnAboutFindNodeInStrictMode[componentName] = true;
211
@@ -310,7 +310,7 @@ export function updateContainer(
310
'triggering nested component updates from render is not allowed. ' +
311
'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
312
'Check the render method of %s.',
313
- getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',
313
+ getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',
314
);
315
}
316
}
packages/react-reconciler/src/ReactFiberReconciler.old.js
+3
-3
@@ -32,7 +32,7 @@ import {
32
HostRoot,
33
SuspenseComponent,
34
} from './ReactWorkTags';
35
-import getComponentName from 'shared/getComponentName';
35
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
36
import invariant from 'shared/invariant';
37
import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
38
import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -205,7 +205,7 @@ function findHostInstanceWithWarning(
205
return null;
206
}
207
if (hostFiber.mode & StrictLegacyMode) {
208
- const componentName = getComponentName(fiber.type) || 'Component';
208
+ const componentName = getComponentNameFromFiber(fiber) || 'Component';
209
if (!didWarnAboutFindNodeInStrictMode[componentName]) {
210
didWarnAboutFindNodeInStrictMode[componentName] = true;
211
@@ -310,7 +310,7 @@ export function updateContainer(
310
'triggering nested component updates from render is not allowed. ' +
311
'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
312
'Check the render method of %s.',
313
- getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',
313
+ getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',
314
);
315
}
316
}
packages/react-reconciler/src/ReactFiberThrow.new.js
+4
-4
@@ -15,7 +15,7 @@ import type {Update} from './ReactUpdateQueue.new';
15
import type {Wakeable} from 'shared/ReactTypes';
16
import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
17
18
-import getComponentName from 'shared/getComponentName';
18
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
19
import {
20
ClassComponent,
21
HostRoot,
@@ -140,7 +140,7 @@ function createClassErrorUpdate(
140
console.error(
141
'%s: Error boundaries should implement getDerivedStateFromError(). ' +
142
'In that method, return a state update to display an error message or fallback UI.',
143
- getComponentName(fiber.type) || 'Unknown',
143
+ getComponentNameFromFiber(fiber) || 'Unknown',
144
);
145
}
146
}
@@ -200,7 +200,7 @@ function throwException(
200
if (__DEV__) {
201
if (enableDebugTracing) {
202
if (sourceFiber.mode & DebugTracingMode) {
203
- const name = getComponentName(sourceFiber.type) || 'Unknown';
203
+ const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
204
logComponentSuspended(name, wakeable);
205
}
206
}
@@ -361,7 +361,7 @@ function throwException(
361
// No boundary was found. Fallthrough to error mode.
362
// TODO: Use invariant so the message is stripped in prod?
363
value = new Error(
364
- (getComponentName(sourceFiber.type) || 'A React component') +
364
+ (getComponentNameFromFiber(sourceFiber) || 'A React component') +
365
' suspended while rendering, but no fallback UI was specified.\n' +
366
'\n' +
367
'Add a <Suspense fallback=...> component higher in the tree to ' +
packages/react-reconciler/src/ReactFiberThrow.old.js
+4
-4
@@ -15,7 +15,7 @@ import type {Update} from './ReactUpdateQueue.old';
15
import type {Wakeable} from 'shared/ReactTypes';
16
import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
17
18
-import getComponentName from 'shared/getComponentName';
18
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
19
import {
20
ClassComponent,
21
HostRoot,
@@ -140,7 +140,7 @@ function createClassErrorUpdate(
140
console.error(
141
'%s: Error boundaries should implement getDerivedStateFromError(). ' +
142
'In that method, return a state update to display an error message or fallback UI.',
143
- getComponentName(fiber.type) || 'Unknown',
143
+ getComponentNameFromFiber(fiber) || 'Unknown',
144
);
145
}
146
}
@@ -200,7 +200,7 @@ function throwException(
200
if (__DEV__) {
201
if (enableDebugTracing) {
202
if (sourceFiber.mode & DebugTracingMode) {
203
- const name = getComponentName(sourceFiber.type) || 'Unknown';
203
+ const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
204
logComponentSuspended(name, wakeable);
205
}
206
}
@@ -361,7 +361,7 @@ function throwException(
361
// No boundary was found. Fallthrough to error mode.
362
// TODO: Use invariant so the message is stripped in prod?
363
value = new Error(
364
- (getComponentName(sourceFiber.type) || 'A React component') +
364
+ (getComponentNameFromFiber(sourceFiber) || 'A React component') +
365
' suspended while rendering, but no fallback UI was specified.\n' +
366
'\n' +
367
'Add a <Suspense fallback=...> component higher in the tree to ' +
packages/react-reconciler/src/ReactFiberTreeReflection.js
+2
-2
@@ -15,7 +15,7 @@ import invariant from 'shared/invariant';
15
16
import {get as getInstance} from 'shared/ReactInstanceMap';
17
import ReactSharedInternals from 'shared/ReactSharedInternals';
18
-import getComponentName from 'shared/getComponentName';
18
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
19
import {
20
ClassComponent,
21
HostComponent,
@@ -101,7 +101,7 @@ export function isMounted(component: React$Component<any, any>): boolean {
101
'never access something that requires stale data from the previous ' +
102
'render, such as refs. Move this logic to componentDidMount and ' +
103
'componentDidUpdate instead.',
104
- getComponentName(ownerFiber.type) || 'A component',
104
+ getComponentNameFromFiber(ownerFiber) || 'A component',
105
);
106
}
107
instance._warnedAboutRefsInRender = true;
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+7
-7
@@ -221,7 +221,7 @@ import {
221
} from './ReactProfilerTimer.new';
222
223
// DEV stuff
224
-import getComponentName from 'shared/getComponentName';
224
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
225
import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
226
import {
227
isRendering as ReactCurrentDebugFiberIsRenderingInDEV,
@@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
2645
2646
// We show the whole stack but dedupe on the top component's name because
2647
// the problematic code almost always lies inside that component.
2648
- const componentName = getComponentName(fiber.type) || 'ReactComponent';
2648
+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
2649
if (didWarnStateUpdateForNotYetMountedComponent !== null) {
2650
if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {
2651
return;
@@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
2711
}
2712
// We show the whole stack but dedupe on the top component's name because
2713
// the problematic code almost always lies inside that component.
2714
- const componentName = getComponentName(fiber.type) || 'ReactComponent';
2714
+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
2715
if (didWarnStateUpdateForUnmountedComponent !== null) {
2716
if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {
2717
return;
@@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
2853
case ForwardRef:
2854
case SimpleMemoComponent: {
2855
const renderingComponentName =
2856
- (workInProgress && getComponentName(workInProgress.type)) ||
2856
+ (workInProgress && getComponentNameFromFiber(workInProgress)) ||
2857
'Unknown';
2858
// Dedupe by the rendering component because it's the one that needs to be fixed.
2859
const dedupeKey = renderingComponentName;
2860
if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {
2861
didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);
2862
const setStateComponentName =
2863
- getComponentName(fiber.type) || 'Unknown';
2863
+ getComponentNameFromFiber(fiber) || 'Unknown';
2864
console.error(
2865
'Cannot update a component (`%s`) while rendering a ' +
2866
'different component (`%s`). To locate the bad setState() call inside `%s`, ' +
@@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
2948
"This ensures that you're testing the behavior the user would see " +
2949
'in the browser.' +
2950
' Learn more at https://reactjs.org/link/wrap-tests-with-act',
2951
- getComponentName(fiber.type),
2951
+ getComponentNameFromFiber(fiber),
2952
);
2953
}
2954
}
@@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
2976
"This ensures that you're testing the behavior the user would see " +
2977
'in the browser.' +
2978
' Learn more at https://reactjs.org/link/wrap-tests-with-act',
2979
- getComponentName(fiber.type),
2979
+ getComponentNameFromFiber(fiber),
2980
);
2981
} finally {
2982
if (previousFiber) {
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+7
-7
@@ -221,7 +221,7 @@ import {
221
} from './ReactProfilerTimer.old';
222
223
// DEV stuff
224
-import getComponentName from 'shared/getComponentName';
224
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
225
import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
226
import {
227
isRendering as ReactCurrentDebugFiberIsRenderingInDEV,
@@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
2645
2646
// We show the whole stack but dedupe on the top component's name because
2647
// the problematic code almost always lies inside that component.
2648
- const componentName = getComponentName(fiber.type) || 'ReactComponent';
2648
+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
2649
if (didWarnStateUpdateForNotYetMountedComponent !== null) {
2650
if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {
2651
return;
@@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
2711
}
2712
// We show the whole stack but dedupe on the top component's name because
2713
// the problematic code almost always lies inside that component.
2714
- const componentName = getComponentName(fiber.type) || 'ReactComponent';
2714
+ const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
2715
if (didWarnStateUpdateForUnmountedComponent !== null) {
2716
if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {
2717
return;
@@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
2853
case ForwardRef:
2854
case SimpleMemoComponent: {
2855
const renderingComponentName =
2856
- (workInProgress && getComponentName(workInProgress.type)) ||
2856
+ (workInProgress && getComponentNameFromFiber(workInProgress)) ||
2857
'Unknown';
2858
// Dedupe by the rendering component because it's the one that needs to be fixed.
2859
const dedupeKey = renderingComponentName;
2860
if (!didWarnAboutUpdateInRenderForAnotherComponent.has(dedupeKey)) {
2861
didWarnAboutUpdateInRenderForAnotherComponent.add(dedupeKey);
2862
const setStateComponentName =
2863
- getComponentName(fiber.type) || 'Unknown';
2863
+ getComponentNameFromFiber(fiber) || 'Unknown';
2864
console.error(
2865
'Cannot update a component (`%s`) while rendering a ' +
2866
'different component (`%s`). To locate the bad setState() call inside `%s`, ' +
@@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
2948
"This ensures that you're testing the behavior the user would see " +
2949
'in the browser.' +
2950
' Learn more at https://reactjs.org/link/wrap-tests-with-act',
2951
- getComponentName(fiber.type),
2951
+ getComponentNameFromFiber(fiber),
2952
);
2953
}
2954
}
@@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
2976
"This ensures that you're testing the behavior the user would see " +
2977
'in the browser.' +
2978
' Learn more at https://reactjs.org/link/wrap-tests-with-act',
2979
- getComponentName(fiber.type),
2979
+ getComponentNameFromFiber(fiber),
2980
);
2981
} finally {
2982
if (previousFiber) {
packages/react-reconciler/src/ReactStrictModeWarnings.new.js
+8
-8
@@ -13,7 +13,7 @@ import {
13
resetCurrentFiber as resetCurrentDebugFiberInDEV,
14
setCurrentFiber as setCurrentDebugFiberInDEV,
15
} from './ReactCurrentFiber';
16
-import getComponentName from 'shared/getComponentName';
16
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
17
import {StrictLegacyMode} from './ReactTypeOfMode';
18
19
type FiberArray = Array<Fiber>;
@@ -119,7 +119,7 @@ if (__DEV__) {
119
if (pendingComponentWillMountWarnings.length > 0) {
120
pendingComponentWillMountWarnings.forEach(fiber => {
121
componentWillMountUniqueNames.add(
122
- getComponentName(fiber.type) || 'Component',
122
+ getComponentNameFromFiber(fiber) || 'Component',
123
);
124
didWarnAboutUnsafeLifecycles.add(fiber.type);
125
});
@@ -130,7 +130,7 @@ if (__DEV__) {
130
if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
131
pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
132
UNSAFE_componentWillMountUniqueNames.add(
133
- getComponentName(fiber.type) || 'Component',
133
+ getComponentNameFromFiber(fiber) || 'Component',
134
);
135
didWarnAboutUnsafeLifecycles.add(fiber.type);
136
});
@@ -141,7 +141,7 @@ if (__DEV__) {
141
if (pendingComponentWillReceivePropsWarnings.length > 0) {
142
pendingComponentWillReceivePropsWarnings.forEach(fiber => {
143
componentWillReceivePropsUniqueNames.add(
144
- getComponentName(fiber.type) || 'Component',
144
+ getComponentNameFromFiber(fiber) || 'Component',
145
);
146
didWarnAboutUnsafeLifecycles.add(fiber.type);
147
});
@@ -153,7 +153,7 @@ if (__DEV__) {
153
if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
154
pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
155
UNSAFE_componentWillReceivePropsUniqueNames.add(
156
- getComponentName(fiber.type) || 'Component',
156
+ getComponentNameFromFiber(fiber) || 'Component',
157
);
158
didWarnAboutUnsafeLifecycles.add(fiber.type);
159
});
@@ -165,7 +165,7 @@ if (__DEV__) {
165
if (pendingComponentWillUpdateWarnings.length > 0) {
166
pendingComponentWillUpdateWarnings.forEach(fiber => {
167
componentWillUpdateUniqueNames.add(
168
- getComponentName(fiber.type) || 'Component',
168
+ getComponentNameFromFiber(fiber) || 'Component',
169
);
170
didWarnAboutUnsafeLifecycles.add(fiber.type);
171
});
@@ -177,7 +177,7 @@ if (__DEV__) {
177
if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
178
pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
179
UNSAFE_componentWillUpdateUniqueNames.add(
180
- getComponentName(fiber.type) || 'Component',
180
+ getComponentNameFromFiber(fiber) || 'Component',
181
);
182
didWarnAboutUnsafeLifecycles.add(fiber.type);
183
});
@@ -333,7 +333,7 @@ if (__DEV__) {
333
334
const uniqueNames = new Set();
335
fiberArray.forEach(fiber => {
336
- uniqueNames.add(getComponentName(fiber.type) || 'Component');
336
+ uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');
337
didWarnAboutLegacyContext.add(fiber.type);
338
});
339
packages/react-reconciler/src/ReactStrictModeWarnings.old.js
+8
-8
@@ -13,7 +13,7 @@ import {
13
resetCurrentFiber as resetCurrentDebugFiberInDEV,
14
setCurrentFiber as setCurrentDebugFiberInDEV,
15
} from './ReactCurrentFiber';
16
-import getComponentName from 'shared/getComponentName';
16
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
17
import {StrictLegacyMode} from './ReactTypeOfMode';
18
19
type FiberArray = Array<Fiber>;
@@ -119,7 +119,7 @@ if (__DEV__) {
119
if (pendingComponentWillMountWarnings.length > 0) {
120
pendingComponentWillMountWarnings.forEach(fiber => {
121
componentWillMountUniqueNames.add(
122
- getComponentName(fiber.type) || 'Component',
122
+ getComponentNameFromFiber(fiber) || 'Component',
123
);
124
didWarnAboutUnsafeLifecycles.add(fiber.type);
125
});
@@ -130,7 +130,7 @@ if (__DEV__) {
130
if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
131
pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
132
UNSAFE_componentWillMountUniqueNames.add(
133
- getComponentName(fiber.type) || 'Component',
133
+ getComponentNameFromFiber(fiber) || 'Component',
134
);
135
didWarnAboutUnsafeLifecycles.add(fiber.type);
136
});
@@ -141,7 +141,7 @@ if (__DEV__) {
141
if (pendingComponentWillReceivePropsWarnings.length > 0) {
142
pendingComponentWillReceivePropsWarnings.forEach(fiber => {
143
componentWillReceivePropsUniqueNames.add(
144
- getComponentName(fiber.type) || 'Component',
144
+ getComponentNameFromFiber(fiber) || 'Component',
145
);
146
didWarnAboutUnsafeLifecycles.add(fiber.type);
147
});
@@ -153,7 +153,7 @@ if (__DEV__) {
153
if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
154
pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
155
UNSAFE_componentWillReceivePropsUniqueNames.add(
156
- getComponentName(fiber.type) || 'Component',
156
+ getComponentNameFromFiber(fiber) || 'Component',
157
);
158
didWarnAboutUnsafeLifecycles.add(fiber.type);
159
});
@@ -165,7 +165,7 @@ if (__DEV__) {
165
if (pendingComponentWillUpdateWarnings.length > 0) {
166
pendingComponentWillUpdateWarnings.forEach(fiber => {
167
componentWillUpdateUniqueNames.add(
168
- getComponentName(fiber.type) || 'Component',
168
+ getComponentNameFromFiber(fiber) || 'Component',
169
);
170
didWarnAboutUnsafeLifecycles.add(fiber.type);
171
});
@@ -177,7 +177,7 @@ if (__DEV__) {
177
if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
178
pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
179
UNSAFE_componentWillUpdateUniqueNames.add(
180
- getComponentName(fiber.type) || 'Component',
180
+ getComponentNameFromFiber(fiber) || 'Component',
181
);
182
didWarnAboutUnsafeLifecycles.add(fiber.type);
183
});
@@ -333,7 +333,7 @@ if (__DEV__) {
333
334
const uniqueNames = new Set();
335
fiberArray.forEach(fiber => {
336
- uniqueNames.add(getComponentName(fiber.type) || 'Component');
336
+ uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');
337
didWarnAboutLegacyContext.add(fiber.type);
338
});
339
packages/react-reconciler/src/ReactTestSelectors.js
+2
-2
@@ -12,7 +12,7 @@ import type {Instance} from './ReactFiberHostConfig';
12
13
import invariant from 'shared/invariant';
14
import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
15
-import getComponentName from 'shared/getComponentName';
15
+import getComponentNameFromType from 'shared/getComponentNameFromType';
16
import {
17
findFiberRoot,
18
getBoundingRect,
@@ -189,7 +189,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
189
function selectorToString(selector: Selector): string | null {
190
switch (selector.$$typeof) {
191
case COMPONENT_TYPE:
192
- const displayName = getComponentName(selector.value) || 'Unknown';
192
+ const displayName = getComponentNameFromType(selector.value) || 'Unknown';
193
return `<${displayName}>`;
194
case HAS_PSEUDO_CLASS_TYPE:
195
return `:has(${selectorToString(selector) || ''})`;
packages/react-reconciler/src/SchedulingProfiler.js
+4
-4
@@ -16,7 +16,7 @@ import {
16
enableSchedulingProfiler,
17
} from 'shared/ReactFeatureFlags';
18
import ReactVersion from 'shared/ReactVersion';
19
-import getComponentName from 'shared/getComponentName';
19
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
20
21
import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old';
22
import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new';
@@ -113,7 +113,7 @@ export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
113
if (enableSchedulingProfiler) {
114
if (supportsUserTimingV3) {
115
const id = getWakeableID(wakeable);
116
- const componentName = getComponentName(fiber.type) || 'Unknown';
116
+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
117
// TODO Add component stack id
118
markAndClear(`--suspense-suspend-${id}-${componentName}`);
119
wakeable.then(
@@ -191,7 +191,7 @@ export function markRenderScheduled(lane: Lane): void {
191
export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
192
if (enableSchedulingProfiler) {
193
if (supportsUserTimingV3) {
194
- const componentName = getComponentName(fiber.type) || 'Unknown';
194
+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
195
// TODO Add component stack id
196
markAndClear(
197
`--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
@@ -203,7 +203,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
203
export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
204
if (enableSchedulingProfiler) {
205
if (supportsUserTimingV3) {
206
- const componentName = getComponentName(fiber.type) || 'Unknown';
206
+ const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
207
// TODO Add component stack id
208
markAndClear(
209
`--schedule-state-update-${formatLanes(lane)}-${componentName}`,
packages/react-reconciler/src/getComponentNameFromFiber.js
new
+124
@@ -0,0 +1,124 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
+ */
9
+
10
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
11
+
12
+import {
13
+ FunctionComponent,
14
+ ClassComponent,
15
+ IndeterminateComponent,
16
+ HostRoot,
17
+ HostPortal,
18
+ HostComponent,
19
+ HostText,
20
+ Fragment,
21
+ Mode,
22
+ ContextConsumer,
23
+ ContextProvider,
24
+ ForwardRef,
25
+ Profiler,
26
+ SuspenseComponent,
27
+ MemoComponent,
28
+ SimpleMemoComponent,
29
+ LazyComponent,
30
+ IncompleteClassComponent,
31
+ DehydratedFragment,
32
+ SuspenseListComponent,
33
+ ScopeComponent,
34
+ OffscreenComponent,
35
+ LegacyHiddenComponent,
36
+ CacheComponent,
37
+} from 'react-reconciler/src/ReactWorkTags';
38
+import getComponentNameFromType from 'shared/getComponentNameFromType';
39
+import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
40
+
41
+// Keep in sync with shared/getComponentNameFromType
42
+function getWrappedName(
43
+ outerType: mixed,
44
+ innerType: any,
45
+ wrapperName: string,
46
+): string {
47
+ const functionName = innerType.displayName || innerType.name || '';
48
+ return (
49
+ (outerType: any).displayName ||
50
+ (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName)
51
+ );
52
+}
53
+
54
+// Keep in sync with shared/getComponentNameFromType
55
+function getContextName(type: ReactContext<any>) {
56
+ return type.displayName || 'Context';
57
+}
58
+
59
+export default function getComponentNameFromFiber(fiber: Fiber): string | null {
60
+ const {tag, type} = fiber;
61
+ switch (tag) {
62
+ case CacheComponent:
63
+ return 'Cache';
64
+ case ContextConsumer:
65
+ const context: ReactContext<any> = (type: any);
66
+ return getContextName(context) + '.Consumer';
67
+ case ContextProvider:
68
+ const provider: ReactProviderType<any> = (type: any);
69
+ return getContextName(provider._context) + '.Provider';
70
+ case DehydratedFragment:
71
+ return 'DehydratedFragment';
72
+ case ForwardRef:
73
+ return getWrappedName(type, type.render, 'ForwardRef');
74
+ case Fragment:
75
+ return 'Fragment';
76
+ case HostComponent:
77
+ // Host component type is the display name (e.g. "div", "View")
78
+ return type;
79
+ case HostPortal:
80
+ return 'Portal';
81
+ case HostRoot:
82
+ return 'Root';
83
+ case HostText:
84
+ return 'Text';
85
+ case LazyComponent:
86
+ // Name comes from the type in this case; we don't have a tag.
87
+ return getComponentNameFromType(type);
88
+ case LegacyHiddenComponent:
89
+ return 'LegacyHidden';
90
+ case Mode:
91
+ if (type === REACT_STRICT_MODE_TYPE) {
92
+ // Don't be less specific than shared/getComponentNameFromType
93
+ return 'StrictMode';
94
+ }
95
+ return 'Mode';
96
+ case OffscreenComponent:
97
+ return 'Offscreen';
98
+ case Profiler:
99
+ return 'Profiler';
100
+ case ScopeComponent:
101
+ return 'Scope';
102
+ case SuspenseComponent:
103
+ return 'Suspense';
104
+ case SuspenseListComponent:
105
+ return 'SuspenseList';
106
+
107
+ // The display name for this tags come from the user-provided type:
108
+ case ClassComponent:
109
+ case FunctionComponent:
110
+ case IncompleteClassComponent:
111
+ case IndeterminateComponent:
112
+ case MemoComponent:
113
+ case SimpleMemoComponent:
114
+ if (typeof type === 'function') {
115
+ return (type: any).displayName || type.name || null;
116
+ }
117
+ if (typeof type === 'string') {
118
+ return type;
119
+ }
120
+ break;
121
+ }
122
+
123
+ return null;
124
+}
packages/react-test-renderer/src/ReactTestRenderer.js
+2
-2
@@ -43,7 +43,7 @@ import {
43
ScopeComponent,
44
} from 'react-reconciler/src/ReactWorkTags';
45
import invariant from 'shared/invariant';
46
-import getComponentName from 'shared/getComponentName';
46
+import getComponentNameFromType from 'shared/getComponentNameFromType';
47
import ReactVersion from 'shared/ReactVersion';
48
import ReactSharedInternals from 'shared/ReactSharedInternals';
49
import enqueueTask from 'shared/enqueueTask';
@@ -344,7 +344,7 @@ class ReactTestInstance {
344
findByType(type: any): ReactTestInstance {
345
return expectOne(
346
this.findAllByType(type, {deep: false}),
347
- `with node type: "${getComponentName(type) || 'Unknown'}"`,
347
+ `with node type: "${getComponentNameFromType(type) || 'Unknown'}"`,
348
);
349
}
350
packages/react/src/ReactElement.js
+4
-2
@@ -5,7 +5,7 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import getComponentName from 'shared/getComponentName';
8
+import getComponentNameFromType from 'shared/getComponentNameFromType';
9
import invariant from 'shared/invariant';
10
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
11
@@ -104,7 +104,9 @@ function warnIfStringRefCannotBeAutoConverted(config) {
104
config.__self &&
105
ReactCurrentOwner.current.stateNode !== config.__self
106
) {
107
- const componentName = getComponentName(ReactCurrentOwner.current.type);
107
+ const componentName = getComponentNameFromType(
108
+ ReactCurrentOwner.current.type,
109
+ );
110
111
if (!didWarnAboutStringRefs[componentName]) {
112
console.error(
packages/react/src/ReactElementValidator.js
+8
-8
@@ -13,7 +13,7 @@
13
*/
14
15
import isValidElementType from 'shared/isValidElementType';
16
-import getComponentName from 'shared/getComponentName';
16
+import getComponentNameFromType from 'shared/getComponentNameFromType';
17
import {
18
getIteratorFn,
19
REACT_FORWARD_REF_TYPE,
@@ -60,7 +60,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
60
61
function getDeclarationErrorAddendum() {
62
if (ReactCurrentOwner.current) {
63
- const name = getComponentName(ReactCurrentOwner.current.type);
63
+ const name = getComponentNameFromType(ReactCurrentOwner.current.type);
64
if (name) {
65
return '\n\nCheck the render method of `' + name + '`.';
66
}
@@ -139,7 +139,7 @@ function validateExplicitKey(element, parentType) {
139
element._owner !== ReactCurrentOwner.current
140
) {
141
// Give the component that originally created this child.
142
- childOwner = ` It was passed a child from ${getComponentName(
142
+ childOwner = ` It was passed a child from ${getComponentNameFromType(
143
element._owner.type,
144
)}.`;
145
}
@@ -227,12 +227,12 @@ function validatePropTypes(element) {
227
}
228
if (propTypes) {
229
// Intentionally inside to avoid triggering lazy initializers:
230
- const name = getComponentName(type);
230
+ const name = getComponentNameFromType(type);
231
checkPropTypes(propTypes, element.props, 'prop', name, element);
232
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
233
propTypesMisspellWarningShown = true;
234
// Intentionally inside to avoid triggering lazy initializers:
235
- const name = getComponentName(type);
235
+ const name = getComponentNameFromType(type);
236
console.error(
237
'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
238
name || 'Unknown',
@@ -317,7 +317,7 @@ export function jsxWithValidation(
317
} else if (Array.isArray(type)) {
318
typeString = 'array';
319
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
320
- typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
320
+ typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
321
info =
322
' Did you accidentally export a JSX literal instead of a component?';
323
} else {
@@ -383,7 +383,7 @@ export function jsxWithValidation(
383
'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
384
'Explicitly pass a key after spreading props in your JSX call. ' +
385
'E.g. <%s {...props} key={key} />',
386
- getComponentName(type) || 'ComponentName',
386
+ getComponentNameFromType(type) || 'ComponentName',
387
);
388
}
389
}
@@ -441,7 +441,7 @@ export function createElementWithValidation(type, props, children) {
441
} else if (Array.isArray(type)) {
442
typeString = 'array';
443
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
444
- typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
444
+ typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
445
info =
446
' Did you accidentally export a JSX literal instead of a component?';
447
} else {
packages/react/src/jsx/ReactJSXElement.js
+5
-3
@@ -5,7 +5,7 @@
5
* LICENSE file in the root directory of this source tree.
6
*/
7
8
-import getComponentName from 'shared/getComponentName';
8
+import getComponentNameFromType from 'shared/getComponentNameFromType';
9
import ReactSharedInternals from 'shared/ReactSharedInternals';
10
11
import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
@@ -61,7 +61,9 @@ function warnIfStringRefCannotBeAutoConverted(config, self) {
61
self &&
62
ReactCurrentOwner.current.stateNode !== self
63
) {
64
- const componentName = getComponentName(ReactCurrentOwner.current.type);
64
+ const componentName = getComponentNameFromType(
65
+ ReactCurrentOwner.current.type,
66
+ );
67
68
if (!didWarnAboutStringRefs[componentName]) {
69
console.error(
@@ -71,7 +73,7 @@ function warnIfStringRefCannotBeAutoConverted(config, self) {
73
'We ask you to manually fix this case by using useRef() or createRef() instead. ' +
74
'Learn more about using refs safely here: ' +
75
'https://reactjs.org/link/strict-mode-string-ref',
74
- getComponentName(ReactCurrentOwner.current.type),
76
+ getComponentNameFromType(ReactCurrentOwner.current.type),
77
config.ref,
78
);
79
didWarnAboutStringRefs[componentName] = true;
packages/react/src/jsx/ReactJSXElementValidator.js
+7
-7
@@ -12,7 +12,7 @@
12
* that support it.
13
*/
14
import isValidElementType from 'shared/isValidElementType';
15
-import getComponentName from 'shared/getComponentName';
15
+import getComponentNameFromType from 'shared/getComponentNameFromType';
16
import checkPropTypes from 'shared/checkPropTypes';
17
import {
18
getIteratorFn,
@@ -76,7 +76,7 @@ export function isValidElement(object) {
76
function getDeclarationErrorAddendum() {
77
if (__DEV__) {
78
if (ReactCurrentOwner.current) {
79
- const name = getComponentName(ReactCurrentOwner.current.type);
79
+ const name = getComponentNameFromType(ReactCurrentOwner.current.type);
80
if (name) {
81
return '\n\nCheck the render method of `' + name + '`.';
82
}
@@ -154,7 +154,7 @@ function validateExplicitKey(element, parentType) {
154
element._owner !== ReactCurrentOwner.current
155
) {
156
// Give the component that originally created this child.
157
- childOwner = ` It was passed a child from ${getComponentName(
157
+ childOwner = ` It was passed a child from ${getComponentNameFromType(
158
element._owner.type,
159
)}.`;
160
}
@@ -243,12 +243,12 @@ function validatePropTypes(element) {
243
}
244
if (propTypes) {
245
// Intentionally inside to avoid triggering lazy initializers:
246
- const name = getComponentName(type);
246
+ const name = getComponentNameFromType(type);
247
checkPropTypes(propTypes, element.props, 'prop', name, element);
248
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
249
propTypesMisspellWarningShown = true;
250
// Intentionally inside to avoid triggering lazy initializers:
251
- const name = getComponentName(type);
251
+ const name = getComponentNameFromType(type);
252
console.error(
253
'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
254
name || 'Unknown',
@@ -334,7 +334,7 @@ export function jsxWithValidation(
334
} else if (Array.isArray(type)) {
335
typeString = 'array';
336
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
337
- typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
337
+ typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
338
info =
339
' Did you accidentally export a JSX literal instead of a component?';
340
} else {
@@ -395,7 +395,7 @@ export function jsxWithValidation(
395
'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
396
'Explicitly pass a key after spreading props in your JSX call. ' +
397
'E.g. <%s {...props} key={key} />',
398
- getComponentName(type) || 'ComponentName',
398
+ getComponentNameFromType(type) || 'ComponentName',
399
);
400
}
401
}
packages/shared/getComponentNameFromType.js
renamed
+7
-6
@@ -8,6 +8,7 @@
8
*/
9
10
import type {LazyComponent} from 'react/src/ReactLazy';
11
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
12
13
import {
14
REACT_CONTEXT_TYPE,
@@ -23,8 +24,8 @@ import {
24
REACT_LAZY_TYPE,
25
REACT_CACHE_TYPE,
26
} from 'shared/ReactSymbols';
26
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
27
28
+// Keep in sync with react-reconciler/getComponentNameFromFiber
29
function getWrappedName(
30
outerType: mixed,
31
innerType: any,
@@ -37,11 +38,13 @@ function getWrappedName(
38
);
39
}
40
41
+// Keep in sync with react-reconciler/getComponentNameFromFiber
42
function getContextName(type: ReactContext<any>) {
43
return type.displayName || 'Context';
44
}
45
44
-function getComponentName(type: mixed): string | null {
46
+// Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
47
+export default function getComponentNameFromType(type: mixed): string | null {
48
if (type == null) {
49
// Host root, text node or just invalid type.
50
return null;
@@ -87,13 +90,13 @@ function getComponentName(type: mixed): string | null {
90
case REACT_FORWARD_REF_TYPE:
91
return getWrappedName(type, type.render, 'ForwardRef');
92
case REACT_MEMO_TYPE:
90
- return getComponentName(type.type);
93
+ return getComponentNameFromType(type.type);
94
case REACT_LAZY_TYPE: {
95
const lazyComponent: LazyComponent<any, any> = (type: any);
96
const payload = lazyComponent._payload;
97
const init = lazyComponent._init;
98
try {
96
- return getComponentName(init(payload));
99
+ return getComponentNameFromType(init(payload));
100
} catch (x) {
101
return null;
102
}
@@ -102,5 +105,3 @@ function getComponentName(type: mixed): string | null {
105
}
106
return null;
107
}
105
-
106
-export default getComponentName;