diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js index f08629dd05df..5879032bada1 100644 --- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js +++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js @@ -191,4 +191,73 @@ describe('commit tree', () => { expect(commitTrees[1].nodes.size).toBe(2); // + }); }); + + describe('Suspense', () => { + it('should handle transitioning from fallback back to content during profiling', async () => { + let resolvePromise; + let promise = null; + let childTreeBaseDuration = 10; + + function Wrapper({children}) { + Scheduler.unstable_advanceTime(2); + return children; + } + + function Child() { + Scheduler.unstable_advanceTime(childTreeBaseDuration); + if (promise !== null) { + React.use(promise); + } + return ; + } + + function GrandChild() { + Scheduler.unstable_advanceTime(5); + return null; + } + + function Fallback() { + Scheduler.unstable_advanceTime(2); + return null; + } + + function App() { + Scheduler.unstable_advanceTime(1); + return ( + }> + + + + + ); + } + + utils.act(() => store.profilerStore.startProfiling()); + + // Commit 1: Mount with primary + utils.act(() => render()); + + // Commit 2: Suspend, show fallback + promise = new Promise(resolve => (resolvePromise = resolve)); + await utils.actAsync(() => render()); + + // Commit 3: Resolve suspended promise, show primary content with a different duration. + childTreeBaseDuration = 20; + promise = null; + await utils.actAsync(resolvePromise); + utils.act(() => render()); + + utils.act(() => store.profilerStore.stopProfiling()); + + const rootID = store.roots[0]; + const dataForRoot = store.profilerStore.getDataForRoot(rootID); + const numCommits = dataForRoot.commitData.length; + for (let commitIndex = 0; commitIndex < numCommits; commitIndex++) { + store.profilerStore.profilingCache.getCommitTree({ + commitIndex, + rootID, + }); + } + }); + }); }); diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index bc1b2a590d59..f88bc7611f93 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -5559,10 +5559,12 @@ export function attach( } recordConsoleLogs(fiberInstance, componentLogsEntry); - const isProfilingSupported = - nextFiber.hasOwnProperty('treeBaseDuration'); - if (isProfilingSupported) { - recordProfilingDurations(fiberInstance, prevFiber); + if (!isInDisconnectedSubtree) { + const isProfilingSupported = + nextFiber.hasOwnProperty('treeBaseDuration'); + if (isProfilingSupported) { + recordProfilingDurations(fiberInstance, prevFiber); + } } } }