[DevTools] Avoid getFiberIDUnsafe in debug() Helper (#30878)
Avoids looking up id from fiber and instead pass the instance to the debug() helper.
Sebastian Markbåge committed
Sep 4, 2024 at 20:25 UTC
4c58fce7777f2760f4a93091ca4fca0e3fc2f48c
1 file changed
+45
-41
packages/react-devtools-shared/src/backend/fiber/renderer.js
+45
-41
@@ -1098,7 +1098,10 @@ export function attach(
1098
// even if objects are different
1099
const message = formatConsoleArgumentsToSingleString(...args);
1100
if (__DEBUG__) {
1101
- debug('onErrorOrWarning', fiber, null, `${type}: "${message}"`);
1101
+ const fiberInstance = fiberToFiberInstanceMap.get(fiber);
1102
+ if (fiberInstance !== undefined) {
1103
+ debug('onErrorOrWarning', fiberInstance, null, `${type}: "${message}"`);
1104
+ }
1105
}
1106
1107
// Mark this Fiber as needed its warning/error count updated during the next flush.
@@ -1134,32 +1137,37 @@ export function attach(
1137
// It relies on the extension to pass the preference through via the global.
1138
patchConsoleUsingWindowValues();
1139
1137
- const debug = (
1140
+ function debug(
1141
name: string,
1139
- fiber: Fiber,
1142
+ instance: DevToolsInstance,
1143
parentInstance: null | DevToolsInstance,
1144
extraString: string = '',
1142
- ): void => {
1145
+ ): void {
1146
if (__DEBUG__) {
1147
const displayName =
1145
- fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
1146
-
1147
- const maybeID = getFiberIDUnsafe(fiber) || '<no id>';
1148
-
1149
- let parentDisplayName;
1150
- let maybeParentID;
1151
- if (parentInstance !== null && parentInstance.kind === FIBER_INSTANCE) {
1152
- const parentFiber = parentInstance.data;
1153
- parentDisplayName =
1154
- parentFiber.tag +
1155
- ':' +
1156
- (getDisplayNameForFiber(parentFiber) || 'null');
1157
- maybeParentID = String(parentInstance.id);
1158
- } else {
1159
- // TODO: Handle VirtualInstance
1160
- parentDisplayName = '';
1161
- maybeParentID = '<no-id>';
1162
- }
1148
+ instance.kind === VIRTUAL_INSTANCE
1149
+ ? instance.data.name || 'null'
1150
+ : instance.data.tag +
1151
+ ':' +
1152
+ (getDisplayNameForFiber(instance.data) || 'null');
1153
+
1154
+ const maybeID =
1155
+ instance.kind === FILTERED_FIBER_INSTANCE ? '<no id>' : instance.id;
1156
+
1157
+ const parentDisplayName =
1158
+ parentInstance === null
1159
+ ? ''
1160
+ : parentInstance.kind === VIRTUAL_INSTANCE
1161
+ ? parentInstance.data.name || 'null'
1162
+ : parentInstance.data.tag +
1163
+ ':' +
1164
+ (getDisplayNameForFiber(parentInstance.data) || 'null');
1165
+
1166
+ const maybeParentID =
1167
+ parentInstance === null ||
1168
+ parentInstance.kind === FILTERED_FIBER_INSTANCE
1169
+ ? '<no id>'
1170
+ : parentInstance.id;
1171
1172
console.groupCollapsed(
1173
`[renderer] %c${name} %c${displayName} (${maybeID}) %c${
@@ -1173,7 +1181,7 @@ export function attach(
1181
console.log(new Error().stack.split('\n').slice(1).join('\n'));
1182
console.groupEnd();
1183
}
1176
- };
1184
+ }
1185
1186
// eslint-disable-next-line no-unused-vars
1187
function debugTree(instance: DevToolsInstance, indent: number = 0) {
@@ -1569,9 +1577,6 @@ export function attach(
1577
// Removes a Fiber (and its alternate) from the Maps used to track their id.
1578
// This method should always be called when a Fiber is unmounting.
1579
function untrackFiber(nearestInstance: DevToolsInstance, fiber: Fiber) {
1572
- if (__DEBUG__) {
1573
- debug('untrackFiber()', fiber, null);
1574
- }
1580
// TODO: Consider using a WeakMap instead. The only thing where that doesn't work
1581
// is React Native Paper which tracks tags but that support is eventually going away
1582
// and can use the old findFiberByHostInstance strategy.
@@ -2245,7 +2250,7 @@ export function attach(
2250
const id = fiberInstance.id;
2251
2252
if (__DEBUG__) {
2248
- debug('recordMount()', fiber, parentInstance);
2253
+ debug('recordMount()', fiberInstance, parentInstance);
2254
}
2255
2256
const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
@@ -2422,7 +2427,7 @@ export function attach(
2427
function recordUnmount(fiberInstance: FiberInstance): void {
2428
const fiber = fiberInstance.data;
2429
if (__DEBUG__) {
2425
- debug('recordUnmount()', fiber, null);
2430
+ debug('recordUnmount()', fiberInstance, reconcilingParent);
2431
}
2432
2433
if (trackedPathMatchInstance === fiberInstance) {
@@ -2757,15 +2762,14 @@ export function attach(
2762
fiber: Fiber,
2763
traceNearestHostComponentUpdate: boolean,
2764
): void {
2760
- if (__DEBUG__) {
2761
- debug('mountFiberRecursively()', fiber, reconcilingParent);
2762
- }
2763
-
2765
const shouldIncludeInTree = !shouldFilterFiber(fiber);
2766
let newInstance = null;
2767
if (shouldIncludeInTree) {
2768
newInstance = recordMount(fiber, reconcilingParent);
2769
insertChild(newInstance);
2770
+ if (__DEBUG__) {
2771
+ debug('mountFiberRecursively()', newInstance, reconcilingParent);
2772
+ }
2773
} else if (
2774
reconcilingParent !== null &&
2775
reconcilingParent.kind === VIRTUAL_INSTANCE
@@ -2785,6 +2789,9 @@ export function attach(
2789
2790
newInstance = createFilteredFiberInstance(fiber);
2791
insertChild(newInstance);
2792
+ if (__DEBUG__) {
2793
+ debug('mountFiberRecursively()', newInstance, reconcilingParent);
2794
+ }
2795
}
2796
2797
// If we have the tree selection from previous reload, try to match this Fiber.
@@ -2898,9 +2905,7 @@ export function attach(
2905
// when we switch from primary to fallback, or deleting a subtree.
2906
function unmountInstanceRecursively(instance: DevToolsInstance) {
2907
if (__DEBUG__) {
2901
- if (instance.kind === FIBER_INSTANCE) {
2902
- debug('unmountInstanceRecursively()', instance.data, null);
2903
- }
2908
+ debug('unmountInstanceRecursively()', instance, reconcilingParent);
2909
}
2910
2911
const stashedParent = reconcilingParent;
@@ -3034,13 +3039,10 @@ export function attach(
3039
parentInstance: FiberInstance | VirtualInstance,
3040
) {
3041
if (__DEBUG__) {
3037
- if (
3038
- parentInstance.firstChild !== null &&
3039
- parentInstance.firstChild.kind === FIBER_INSTANCE
3040
- ) {
3042
+ if (parentInstance.firstChild !== null) {
3043
debug(
3044
'recordResetChildren()',
3043
- parentInstance.firstChild.data,
3045
+ parentInstance.firstChild,
3046
parentInstance,
3047
);
3048
}
@@ -3417,7 +3419,9 @@ export function attach(
3419
traceNearestHostComponentUpdate: boolean,
3420
): boolean {
3421
if (__DEBUG__) {
3420
- debug('updateFiberRecursively()', nextFiber, reconcilingParent);
3422
+ if (fiberInstance !== null) {
3423
+ debug('updateFiberRecursively()', fiberInstance, reconcilingParent);
3424
+ }
3425
}
3426
3427
if (traceUpdatesEnabled) {