Skip to content

Commit 34ce3ac

Browse files
authored
[DevTools] Pick up suspended by info from React.lazy in type position (#34144)
Normally, we pick up debug info from instrumented Promise or React.Lazy while we're reconciling in ReactChildFiber when they appear in the child position. We add those to the `_debugInfo` of the Fiber. However, we don't do that for for Lazy in the Component type position. Instead, we have to pick up the debug info from it explicitly in DevTools. Likely this is the info added by #34137. Older versions wouldn't be covered by this particular mechanism but more generally from throwing a Promise. <img width="592" height="449" alt="Screenshot 2025-08-08 at 11 32 33 PM" src="https://github.com/user-attachments/assets/87211c64-a7df-47b7-a784-5cdc7c5fae16" />
1 parent 6445b31 commit 34ce3ac

File tree

1 file changed

+24
-0
lines changed
  • packages/react-devtools-shared/src/backend/fiber

1 file changed

+24
-0
lines changed

packages/react-devtools-shared/src/backend/fiber/renderer.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ import {
104104
MEMO_NUMBER,
105105
MEMO_SYMBOL_STRING,
106106
SERVER_CONTEXT_SYMBOL_STRING,
107+
LAZY_SYMBOL_STRING,
107108
} from '../shared/ReactSymbols';
108109
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
109110

@@ -3161,6 +3162,25 @@ export function attach(
31613162
return null;
31623163
}
31633164
3165+
function trackDebugInfoFromLazyType(fiber: Fiber): void {
3166+
// The debugInfo from a Lazy isn't propagated onto _debugInfo of the parent Fiber the way
3167+
// it is when used in child position. So we need to pick it up explicitly.
3168+
const type = fiber.elementType;
3169+
const typeSymbol = getTypeSymbol(type); // The elementType might be have been a LazyComponent.
3170+
if (typeSymbol === LAZY_SYMBOL_STRING) {
3171+
const debugInfo: ?ReactDebugInfo = type._debugInfo;
3172+
if (debugInfo) {
3173+
for (let i = 0; i < debugInfo.length; i++) {
3174+
const debugEntry = debugInfo[i];
3175+
if (debugEntry.awaited) {
3176+
const asyncInfo: ReactAsyncInfo = (debugEntry: any);
3177+
insertSuspendedBy(asyncInfo);
3178+
}
3179+
}
3180+
}
3181+
}
3182+
}
3183+
31643184
function mountVirtualChildrenRecursively(
31653185
firstChild: Fiber,
31663186
lastChild: null | Fiber, // non-inclusive
@@ -3379,6 +3399,8 @@ export function attach(
33793399
// because we don't want to highlight every host node inside of a newly mounted subtree.
33803400
}
33813401
3402+
trackDebugInfoFromLazyType(fiber);
3403+
33823404
if (fiber.tag === HostHoistable) {
33833405
const nearestInstance = reconcilingParent;
33843406
if (nearestInstance === null) {
@@ -4208,6 +4230,8 @@ export function attach(
42084230
}
42094231
}
42104232
try {
4233+
trackDebugInfoFromLazyType(nextFiber);
4234+
42114235
if (
42124236
nextFiber.tag === HostHoistable &&
42134237
prevFiber.memoizedState !== nextFiber.memoizedState

0 commit comments

Comments
 (0)