@samitouri / QOS-React / commits / e6076ecf48

Remove ad-hoc forks of getComponentName() and fix it (#13197)

* Fix getComponentName() for types with nested $$typeof * Temporarily remove Profiler ID from messages * Change getComponentName() signature to take just type It doesn't actually need the whole Fiber. * Remove getComponentName() forks in isomorphic and SSR * Remove unnecessary .type access where we already have a type * Remove unused type

Dan Abramov committed Jul 12, 2018 at 15:32 UTC e6076ecf48f5e492e894a5bc3f609b0478388b80
22 files changed +80 -96
packages/react-dom/src/client/ReactDOM.js
+1 -1
@@ -595,7 +595,7 @@ const ReactDOM: Object = {
595 'never access something that requires stale data from the previous ' +
596 'render, such as refs. Move this logic to componentDidMount and ' +
597 'componentDidUpdate instead.',
598 - getComponentName(owner) || 'A component',
598 + getComponentName(owner.type) || 'A component',
599 );
600 owner.stateNode._warnedAboutRefsInRender = true;
601 }
packages/react-dom/src/server/ReactPartialRenderer.js
+1 -6
@@ -16,6 +16,7 @@ import type {
16
17 import React from 'react';
18 import invariant from 'shared/invariant';
19 +import getComponentName from 'shared/getComponentName';
20 import lowPriorityWarning from 'shared/lowPriorityWarning';
21 import warning from 'shared/warning';
22 import checkPropTypes from 'prop-types/checkPropTypes';
@@ -166,12 +167,6 @@ const newlineEatingTags = {
167 textarea: true,
168 };
169
169 -function getComponentName(type) {
170 - return typeof type === 'string'
171 - ? type
172 - : typeof type === 'function' ? type.displayName || type.name : null;
173 -}
174 -
170 // We accept any tag to be rendered but since this gets injected into arbitrary
171 // HTML, we want to make sure that it's a safe tag.
172 // http://www.w3.org/TR/REC-xml/#NT-Name
packages/react-native-renderer/src/ReactFabric.js
+1 -1
@@ -40,7 +40,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
40 'never access something that requires stale data from the previous ' +
41 'render, such as refs. Move this logic to componentDidMount and ' +
42 'componentDidUpdate instead.',
43 - getComponentName(owner) || 'A component',
43 + getComponentName(owner.type) || 'A component',
44 );
45
46 owner.stateNode._warnedAboutRefsInRender = true;
packages/react-native-renderer/src/ReactNativeFiberInspector.js
+1 -1
@@ -79,7 +79,7 @@ if (__DEV__) {
79
80 const createHierarchy = function(fiberHierarchy) {
81 return fiberHierarchy.map(fiber => ({
82 - name: getComponentName(fiber),
82 + name: getComponentName(fiber.type),
83 getInspectorData: findNodeHandle => ({
84 measure: callback =>
85 UIManager.measure(getHostNode(fiber, findNodeHandle), callback),
packages/react-native-renderer/src/ReactNativeRenderer.js
+1 -1
@@ -43,7 +43,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
43 'never access something that requires stale data from the previous ' +
44 'render, such as refs. Move this logic to componentDidMount and ' +
45 'componentDidUpdate instead.',
46 - getComponentName(owner) || 'A component',
46 + getComponentName(owner.type) || 'A component',
47 );
48
49 owner.stateNode._warnedAboutRefsInRender = true;
packages/react-reconciler/src/ReactChildFiber.js
+1 -1
@@ -111,7 +111,7 @@ function coerceRef(
111 ) {
112 if (__DEV__) {
113 if (returnFiber.mode & StrictMode) {
114 - const componentName = getComponentName(returnFiber) || 'Component';
114 + const componentName = getComponentName(returnFiber.type) || 'Component';
115 if (!didWarnAboutStringRefInStrictMode[componentName]) {
116 warning(
117 false,
packages/react-reconciler/src/ReactCurrentFiber.js
+3 -3
@@ -29,10 +29,10 @@ function describeFiber(fiber: Fiber): string {
29 case HostComponent:
30 const owner = fiber._debugOwner;
31 const source = fiber._debugSource;
32 - const name = getComponentName(fiber);
32 + const name = getComponentName(fiber.type);
33 let ownerName = null;
34 if (owner) {
35 - ownerName = getComponentName(owner);
35 + ownerName = getComponentName(owner.type);
36 }
37 return describeComponentFrame(name, source, ownerName);
38 default:
@@ -60,7 +60,7 @@ export function getCurrentFiberOwnerNameInDevOrNull(): string | null {
60 }
61 const owner = current._debugOwner;
62 if (owner !== null && typeof owner !== 'undefined') {
63 - return getComponentName(owner);
63 + return getComponentName(owner.type);
64 }
65 }
66 return null;
packages/react-reconciler/src/ReactDebugFiberPerf.js
+4 -4
@@ -121,7 +121,7 @@ const beginFiberMark = (
121 fiber: Fiber,
122 phase: MeasurementPhase | null,
123 ): boolean => {
124 - const componentName = getComponentName(fiber) || 'Unknown';
124 + const componentName = getComponentName(fiber.type) || 'Unknown';
125 const debugID = ((fiber._debugID: any): number);
126 const isMounted = fiber.alternate !== null;
127 const label = getFiberLabel(componentName, isMounted, phase);
@@ -140,7 +140,7 @@ const beginFiberMark = (
140 };
141
142 const clearFiberMark = (fiber: Fiber, phase: MeasurementPhase | null) => {
143 - const componentName = getComponentName(fiber) || 'Unknown';
143 + const componentName = getComponentName(fiber.type) || 'Unknown';
144 const debugID = ((fiber._debugID: any): number);
145 const isMounted = fiber.alternate !== null;
146 const label = getFiberLabel(componentName, isMounted, phase);
@@ -153,7 +153,7 @@ const endFiberMark = (
153 phase: MeasurementPhase | null,
154 warning: string | null,
155 ) => {
156 - const componentName = getComponentName(fiber) || 'Unknown';
156 + const componentName = getComponentName(fiber.type) || 'Unknown';
157 const debugID = ((fiber._debugID: any): number);
158 const isMounted = fiber.alternate !== null;
159 const label = getFiberLabel(componentName, isMounted, phase);
@@ -378,7 +378,7 @@ export function stopWorkLoopTimer(
378 if (interruptedBy.tag === HostRoot) {
379 warning = 'A top-level update interrupted the previous render';
380 } else {
381 - const componentName = getComponentName(interruptedBy) || 'Unknown';
381 + const componentName = getComponentName(interruptedBy.type) || 'Unknown';
382 warning = `An update to ${componentName} interrupted the previous render`;
383 }
384 } else if (commitCountInCurrentWorkLoop > 1) {
packages/react-reconciler/src/ReactFiber.js
+1 -1
@@ -444,7 +444,7 @@ function getFiberTagFromObjectType(type, owner): TypeOfWork {
444 "it's defined in, or you might have mixed up default and " +
445 'named imports.';
446 }
447 - const ownerName = owner ? getComponentName(owner) : null;
447 + const ownerName = owner ? getComponentName(owner.type) : null;
448 if (ownerName) {
449 info += '\n\nCheck the render method of `' + ownerName + '`.';
450 }
packages/react-reconciler/src/ReactFiberBeginWork.js
+2 -2
@@ -581,7 +581,7 @@ function mountIndeterminateComponent(
581
582 if (__DEV__) {
583 if (fn.prototype && typeof fn.prototype.render === 'function') {
584 - const componentName = getComponentName(workInProgress) || 'Unknown';
584 + const componentName = getComponentName(fn) || 'Unknown';
585
586 if (!didWarnAboutBadClass[componentName]) {
587 warning(
@@ -681,7 +681,7 @@ function mountIndeterminateComponent(
681 }
682
683 if (typeof fn.getDerivedStateFromProps === 'function') {
684 - const componentName = getComponentName(workInProgress) || 'Unknown';
684 + const componentName = getComponentName(fn) || 'Unknown';
685
686 if (!didWarnAboutGetDerivedStateOnFunctionalComponent[componentName]) {
687 warning(
packages/react-reconciler/src/ReactFiberClassComponent.js
+13 -12
@@ -92,9 +92,9 @@ if (__DEV__) {
92 }
93 };
94
95 - warnOnUndefinedDerivedState = function(workInProgress, partialState) {
95 + warnOnUndefinedDerivedState = function(type, partialState) {
96 if (partialState === undefined) {
97 - const componentName = getComponentName(workInProgress) || 'Component';
97 + const componentName = getComponentName(type) || 'Component';
98 if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
99 didWarnAboutUndefinedDerivedState.add(componentName);
100 warning(
@@ -150,7 +150,7 @@ export function applyDerivedStateFromProps(
150 const partialState = getDerivedStateFromProps(nextProps, prevState);
151
152 if (__DEV__) {
153 - warnOnUndefinedDerivedState(workInProgress, partialState);
153 + warnOnUndefinedDerivedState(workInProgress.type, partialState);
154 }
155 // Merge the partial state and the previous state.
156 const memoizedState =
@@ -249,7 +249,7 @@ function checkShouldComponentUpdate(
249 shouldUpdate !== undefined,
250 '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
251 'boolean value. Make sure to return true or false.',
252 - getComponentName(workInProgress) || 'Component',
252 + getComponentName(ctor) || 'Component',
253 );
254 }
255
@@ -269,7 +269,7 @@ function checkClassInstance(workInProgress: Fiber) {
269 const instance = workInProgress.stateNode;
270 const type = workInProgress.type;
271 if (__DEV__) {
272 - const name = getComponentName(workInProgress) || 'Component';
272 + const name = getComponentName(type) || 'Component';
273 const renderPresent = instance.render;
274
275 if (!renderPresent) {
@@ -345,7 +345,7 @@ function checkClassInstance(workInProgress: Fiber) {
345 '%s has a method called shouldComponentUpdate(). ' +
346 'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
347 'Please extend React.Component if shouldComponentUpdate is used.',
348 - getComponentName(workInProgress) || 'A pure component',
348 + getComponentName(type) || 'A pure component',
349 );
350 }
351 const noComponentDidUnmount =
@@ -411,7 +411,7 @@ function checkClassInstance(workInProgress: Fiber) {
411 false,
412 '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
413 'This component defines getSnapshotBeforeUpdate() only.',
414 - getComponentName(workInProgress),
414 + getComponentName(type),
415 );
416 }
417
@@ -496,7 +496,7 @@ function constructClassInstance(
496
497 if (__DEV__) {
498 if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
499 - const componentName = getComponentName(workInProgress) || 'Component';
499 + const componentName = getComponentName(ctor) || 'Component';
500 if (!didWarnAboutUninitializedState.has(componentName)) {
501 didWarnAboutUninitializedState.add(componentName);
502 warning(
@@ -550,7 +550,7 @@ function constructClassInstance(
550 foundWillReceivePropsName !== null ||
551 foundWillUpdateName !== null
552 ) {
553 - const componentName = getComponentName(workInProgress) || 'Component';
553 + const componentName = getComponentName(ctor) || 'Component';
554 const newApiName =
555 typeof ctor.getDerivedStateFromProps === 'function'
556 ? 'getDerivedStateFromProps()'
@@ -605,7 +605,7 @@ function callComponentWillMount(workInProgress, instance) {
605 '%s.componentWillMount(): Assigning directly to this.state is ' +
606 "deprecated (except inside a component's " +
607 'constructor). Use setState instead.',
608 - getComponentName(workInProgress) || 'Component',
608 + getComponentName(workInProgress.type) || 'Component',
609 );
610 }
611 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
@@ -630,7 +630,8 @@ function callComponentWillReceiveProps(
630
631 if (instance.state !== oldState) {
632 if (__DEV__) {
633 - const componentName = getComponentName(workInProgress) || 'Component';
633 + const componentName =
634 + getComponentName(workInProgress.type) || 'Component';
635 if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
636 didWarnAboutStateAssignmentForComponent.add(componentName);
637 warning(
@@ -699,7 +700,7 @@ function mountClassInstance(
700 instance.state = workInProgress.memoizedState;
701 }
702
702 - const getDerivedStateFromProps = workInProgress.type.getDerivedStateFromProps;
703 + const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
704 if (typeof getDerivedStateFromProps === 'function') {
705 applyDerivedStateFromProps(workInProgress, getDerivedStateFromProps, props);
706 instance.state = workInProgress.memoizedState;
packages/react-reconciler/src/ReactFiberCommitWork.js
+4 -4
@@ -93,7 +93,7 @@ export function logError(boundary: Fiber, errorInfo: CapturedValue<mixed>) {
93 }
94
95 const capturedError: CapturedError = {
96 - componentName: source !== null ? getComponentName(source) : null,
96 + componentName: source !== null ? getComponentName(source.type) : null,
97 componentStack: stack !== null ? stack : '',
98 error: errorInfo.value,
99 errorBoundary: null,
@@ -104,7 +104,7 @@ export function logError(boundary: Fiber, errorInfo: CapturedValue<mixed>) {
104
105 if (boundary !== null && boundary.tag === ClassComponent) {
106 capturedError.errorBoundary = boundary.stateNode;
107 - capturedError.errorBoundaryName = getComponentName(boundary);
107 + capturedError.errorBoundaryName = getComponentName(boundary.type);
108 capturedError.errorBoundaryFound = true;
109 capturedError.willRetry = true;
110 }
@@ -203,7 +203,7 @@ function commitBeforeMutationLifeCycles(
203 false,
204 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
205 'must be returned. You have returned undefined.',
206 - getComponentName(finishedWork),
206 + getComponentName(finishedWork.type),
207 );
208 }
209 }
@@ -372,7 +372,7 @@ function commitAttachRef(finishedWork: Fiber) {
372 false,
373 'Unexpected ref object provided for %s. ' +
374 'Use either a ref-setter function or React.createRef().%s',
375 - getComponentName(finishedWork),
375 + getComponentName(finishedWork.type),
376 getStackByFiberInDevAndProd(finishedWork),
377 );
378 }
packages/react-reconciler/src/ReactFiberContext.js
+6 -5
@@ -90,7 +90,7 @@ function getMaskedContext(
90 }
91
92 if (__DEV__) {
93 - const name = getComponentName(workInProgress) || 'Unknown';
93 + const name = getComponentName(type) || 'Unknown';
94 checkPropTypes(
95 contextTypes,
96 context,
@@ -152,13 +152,14 @@ function pushTopLevelContextObject(
152
153 function processChildContext(fiber: Fiber, parentContext: Object): Object {
154 const instance = fiber.stateNode;
155 - const childContextTypes = fiber.type.childContextTypes;
155 + const type = fiber.type;
156 + const childContextTypes = type.childContextTypes;
157
158 // TODO (bvaughn) Replace this behavior with an invariant() in the future.
159 // It has only been added in Fiber to match the (unintentional) behavior in Stack.
160 if (typeof instance.getChildContext !== 'function') {
161 if (__DEV__) {
161 - const componentName = getComponentName(fiber) || 'Unknown';
162 + const componentName = getComponentName(type) || 'Unknown';
163
164 if (!warnedAboutMissingGetChildContext[componentName]) {
165 warnedAboutMissingGetChildContext[componentName] = true;
@@ -189,12 +190,12 @@ function processChildContext(fiber: Fiber, parentContext: Object): Object {
190 invariant(
191 contextKey in childContextTypes,
192 '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
192 - getComponentName(fiber) || 'Unknown',
193 + getComponentName(type) || 'Unknown',
194 contextKey,
195 );
196 }
197 if (__DEV__) {
197 - const name = getComponentName(fiber) || 'Unknown';
198 + const name = getComponentName(type) || 'Unknown';
199 checkPropTypes(
200 childContextTypes,
201 childContext,
packages/react-reconciler/src/ReactFiberReconciler.js
+1 -1
@@ -115,7 +115,7 @@ function scheduleRootUpdate(
115 'triggering nested component updates from render is not allowed. ' +
116 'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
117 'Check the render method of %s.',
118 - getComponentName(ReactCurrentFiber.current) || 'Unknown',
118 + getComponentName(ReactCurrentFiber.current.type) || 'Unknown',
119 );
120 }
121 }
packages/react-reconciler/src/ReactFiberScheduler.js
+1 -1
@@ -174,7 +174,7 @@ if (__DEV__) {
174 warnAboutUpdateOnUnmounted = function(fiber: Fiber) {
175 // We show the whole stack but dedupe on the top component's name because
176 // the problematic code almost always lies inside that component.
177 - const componentName = getComponentName(fiber) || 'ReactClass';
177 + const componentName = getComponentName(fiber.type) || 'ReactClass';
178 if (didWarnStateUpdateForUnmountedComponent[componentName]) {
179 return;
180 }
packages/react-reconciler/src/ReactFiberTreeReflection.js
+1 -1
@@ -74,7 +74,7 @@ export function isMounted(component: React$Component<any, any>): boolean {
74 'never access something that requires stale data from the previous ' +
75 'render, such as refs. Move this logic to componentDidMount and ' +
76 'componentDidUpdate instead.',
77 - getComponentName(ownerFiber) || 'A component',
77 + getComponentName(ownerFiber.type) || 'A component',
78 );
79 instance._warnedAboutRefsInRender = true;
80 }
packages/react-reconciler/src/ReactProfilerTimer.js
+1 -1
@@ -109,7 +109,7 @@ function recordElapsedActualRenderTime(fiber: Fiber): void {
109 warning(
110 fiber === fiberStack.pop(),
111 'Unexpected Fiber (%s) popped.',
112 - getComponentName(fiber),
112 + getComponentName(fiber.type),
113 );
114 }
115
packages/react-reconciler/src/ReactStrictModeWarnings.js
+5 -5
@@ -79,7 +79,7 @@ if (__DEV__) {
79 if (lifecycleWarnings.length > 0) {
80 const componentNames = new Set();
81 lifecycleWarnings.forEach(fiber => {
82 - componentNames.add(getComponentName(fiber) || 'Component');
82 + componentNames.add(getComponentName(fiber.type) || 'Component');
83 didWarnAboutUnsafeLifecycles.add(fiber.type);
84 });
85
@@ -133,7 +133,7 @@ if (__DEV__) {
133 if (pendingComponentWillMountWarnings.length > 0) {
134 const uniqueNames = new Set();
135 pendingComponentWillMountWarnings.forEach(fiber => {
136 - uniqueNames.add(getComponentName(fiber) || 'Component');
136 + uniqueNames.add(getComponentName(fiber.type) || 'Component');
137 didWarnAboutDeprecatedLifecycles.add(fiber.type);
138 });
139
@@ -156,7 +156,7 @@ if (__DEV__) {
156 if (pendingComponentWillReceivePropsWarnings.length > 0) {
157 const uniqueNames = new Set();
158 pendingComponentWillReceivePropsWarnings.forEach(fiber => {
159 - uniqueNames.add(getComponentName(fiber) || 'Component');
159 + uniqueNames.add(getComponentName(fiber.type) || 'Component');
160 didWarnAboutDeprecatedLifecycles.add(fiber.type);
161 });
162
@@ -178,7 +178,7 @@ if (__DEV__) {
178 if (pendingComponentWillUpdateWarnings.length > 0) {
179 const uniqueNames = new Set();
180 pendingComponentWillUpdateWarnings.forEach(fiber => {
181 - uniqueNames.add(getComponentName(fiber) || 'Component');
181 + uniqueNames.add(getComponentName(fiber.type) || 'Component');
182 didWarnAboutDeprecatedLifecycles.add(fiber.type);
183 });
184
@@ -337,7 +337,7 @@ if (__DEV__) {
337 (fiberArray: FiberArray, strictRoot) => {
338 const uniqueNames = new Set();
339 fiberArray.forEach(fiber => {
340 - uniqueNames.add(getComponentName(fiber) || 'Component');
340 + uniqueNames.add(getComponentName(fiber.type) || 'Component');
341 didWarnAboutLegacyContext.add(fiber.type);
342 });
343
packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
+1 -1
@@ -96,7 +96,7 @@ exports[`ReactDebugFiberPerf does not include AsyncMode, StrictMode, or Profiler
96
97 // Mount
98 ⚛ (React Tree Reconciliation: Completed Root)
99 - ⚛ Profiler(test) [mount]
99 + ⚛ Profiler [mount]
100 ⚛ Parent [mount]
101 ⚛ Child [mount]
102
packages/react-test-renderer/src/ReactShallowRenderer.js
+1 -1
@@ -349,7 +349,7 @@ function getStackAddendum() {
349 stack += describeComponentFrame(
350 name,
351 currentlyValidatingElement._source,
352 - owner && getComponentName(owner),
352 + owner && getComponentName(owner.type),
353 );
354 }
355 return stack;
packages/react/src/ReactElementValidator.js
+4 -29
@@ -31,7 +31,6 @@ import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
31 let currentlyValidatingElement;
32 let propTypesMisspellWarningShown;
33
34 -let getDisplayName = () => {};
34 let getStackAddendum = () => {};
35
36 if (__DEV__) {
@@ -39,39 +38,15 @@ if (__DEV__) {
38
39 propTypesMisspellWarningShown = false;
40
42 - getDisplayName = function(element): string {
43 - if (element == null) {
44 - return '#empty';
45 - } else if (typeof element === 'string' || typeof element === 'number') {
46 - return '#text';
47 - } else if (typeof element.type === 'string') {
48 - return element.type;
49 - }
50 -
51 - const type = element.type;
52 - if (type === REACT_FRAGMENT_TYPE) {
53 - return 'React.Fragment';
54 - } else if (
55 - typeof type === 'object' &&
56 - type !== null &&
57 - type.$$typeof === REACT_FORWARD_REF_TYPE
58 - ) {
59 - const functionName = type.render.displayName || type.render.name || '';
60 - return functionName !== '' ? `ForwardRef(${functionName})` : 'ForwardRef';
61 - } else {
62 - return type.displayName || type.name || 'Unknown';
63 - }
64 - };
65 -
41 getStackAddendum = function(): string {
42 let stack = '';
43 if (currentlyValidatingElement) {
69 - const name = getDisplayName(currentlyValidatingElement);
44 + const name = getComponentName(currentlyValidatingElement.type);
45 const owner = currentlyValidatingElement._owner;
46 stack += describeComponentFrame(
47 name,
48 currentlyValidatingElement._source,
74 - owner && getComponentName(owner),
49 + owner && getComponentName(owner.type),
50 );
51 }
52 stack += ReactDebugCurrentFrame.getStackAddendum();
@@ -81,7 +56,7 @@ if (__DEV__) {
56
57 function getDeclarationErrorAddendum() {
58 if (ReactCurrentOwner.current) {
84 - const name = getComponentName(ReactCurrentOwner.current);
59 + const name = getComponentName(ReactCurrentOwner.current.type);
60 if (name) {
61 return '\n\nCheck the render method of `' + name + '`.';
62 }
@@ -159,7 +134,7 @@ function validateExplicitKey(element, parentType) {
134 ) {
135 // Give the component that originally created this child.
136 childOwner = ` It was passed a child from ${getComponentName(
162 - element._owner,
137 + element._owner.type,
138 )}.`;
139 }
140
packages/shared/getComponentName.js
+26 -14
@@ -7,8 +7,7 @@
7 * @flow
8 */
9
10 -import type {Fiber} from 'react-reconciler/src/ReactFiber';
11 -
10 +import warning from 'shared/warning';
11 import {
12 REACT_ASYNC_MODE_TYPE,
13 REACT_CONTEXT_TYPE,
@@ -21,10 +20,22 @@ import {
20 REACT_PLACEHOLDER_TYPE,
21 } from 'shared/ReactSymbols';
22
24 -function getComponentName(fiber: Fiber): string | null {
25 - const {type} = fiber;
23 +function getComponentName(type: mixed): string | null {
24 + if (type == null) {
25 + // Host root, text node or just invalid type.
26 + return null;
27 + }
28 + if (__DEV__) {
29 + if (typeof (type: any).tag === 'number') {
30 + warning(
31 + false,
32 + 'Received an unexpected object in getComponentName(). ' +
33 + 'This is likely a bug in React. Please file an issue.',
34 + );
35 + }
36 + }
37 if (typeof type === 'function') {
27 - return type.displayName || type.name;
38 + return type.displayName || type.name || null;
39 }
40 if (typeof type === 'string') {
41 return type;
@@ -32,25 +43,26 @@ function getComponentName(fiber: Fiber): string | null {
43 switch (type) {
44 case REACT_ASYNC_MODE_TYPE:
45 return 'AsyncMode';
35 - case REACT_CONTEXT_TYPE:
36 - return 'Context.Consumer';
46 case REACT_FRAGMENT_TYPE:
38 - return 'ReactFragment';
47 + return 'Fragment';
48 case REACT_PORTAL_TYPE:
40 - return 'ReactPortal';
49 + return 'Portal';
50 case REACT_PROFILER_TYPE:
42 - return `Profiler(${fiber.pendingProps.id})`;
43 - case REACT_PROVIDER_TYPE:
44 - return 'Context.Provider';
51 + return `Profiler`;
52 case REACT_STRICT_MODE_TYPE:
53 return 'StrictMode';
54 case REACT_PLACEHOLDER_TYPE:
55 return 'Placeholder';
56 }
50 - if (typeof type === 'object' && type !== null) {
57 + if (typeof type === 'object') {
58 switch (type.$$typeof) {
59 + case REACT_CONTEXT_TYPE:
60 + return 'Context.Consumer';
61 + case REACT_PROVIDER_TYPE:
62 + return 'Context.Provider';
63 case REACT_FORWARD_REF_TYPE:
53 - const functionName = type.render.displayName || type.render.name || '';
64 + const renderFn = (type.render: any);
65 + const functionName = renderFn.displayName || renderFn.name || '';
66 return functionName !== ''
67 ? `ForwardRef(${functionName})`
68 : 'ForwardRef';