mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
[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" />
This commit is contained in:
committed by
GitHub
parent
6445b3154e
commit
34ce3acafd
@@ -104,6 +104,7 @@ import {
|
||||
MEMO_NUMBER,
|
||||
MEMO_SYMBOL_STRING,
|
||||
SERVER_CONTEXT_SYMBOL_STRING,
|
||||
LAZY_SYMBOL_STRING,
|
||||
} from '../shared/ReactSymbols';
|
||||
import {enableStyleXFeatures} from 'react-devtools-feature-flags';
|
||||
|
||||
@@ -3161,6 +3162,25 @@ export function attach(
|
||||
return null;
|
||||
}
|
||||
|
||||
function trackDebugInfoFromLazyType(fiber: Fiber): void {
|
||||
// The debugInfo from a Lazy isn't propagated onto _debugInfo of the parent Fiber the way
|
||||
// it is when used in child position. So we need to pick it up explicitly.
|
||||
const type = fiber.elementType;
|
||||
const typeSymbol = getTypeSymbol(type); // The elementType might be have been a LazyComponent.
|
||||
if (typeSymbol === LAZY_SYMBOL_STRING) {
|
||||
const debugInfo: ?ReactDebugInfo = type._debugInfo;
|
||||
if (debugInfo) {
|
||||
for (let i = 0; i < debugInfo.length; i++) {
|
||||
const debugEntry = debugInfo[i];
|
||||
if (debugEntry.awaited) {
|
||||
const asyncInfo: ReactAsyncInfo = (debugEntry: any);
|
||||
insertSuspendedBy(asyncInfo);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function mountVirtualChildrenRecursively(
|
||||
firstChild: Fiber,
|
||||
lastChild: null | Fiber, // non-inclusive
|
||||
@@ -3379,6 +3399,8 @@ export function attach(
|
||||
// because we don't want to highlight every host node inside of a newly mounted subtree.
|
||||
}
|
||||
|
||||
trackDebugInfoFromLazyType(fiber);
|
||||
|
||||
if (fiber.tag === HostHoistable) {
|
||||
const nearestInstance = reconcilingParent;
|
||||
if (nearestInstance === null) {
|
||||
@@ -4208,6 +4230,8 @@ export function attach(
|
||||
}
|
||||
}
|
||||
try {
|
||||
trackDebugInfoFromLazyType(nextFiber);
|
||||
|
||||
if (
|
||||
nextFiber.tag === HostHoistable &&
|
||||
prevFiber.memoizedState !== nextFiber.memoizedState
|
||||
|
||||
Reference in New Issue
Block a user