{"body":"","patch":"diff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\nindex 8256e3f783..b820a69081 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.new.js\n@@ -58,7 +58,7 @@ import {\n OffscreenComponent,\n LegacyHiddenComponent,\n } from '.\/ReactWorkTags';\n-import {NoMode, BlockingMode} from '.\/ReactTypeOfMode';\n+import {NoMode, BlockingMode, ProfileMode} from '.\/ReactTypeOfMode';\n import {\n Ref,\n Update,\n@@ -128,6 +128,7 @@ import {\n enableFundamentalAPI,\n enableScopeAPI,\n enableBlocksAPI,\n+ enableProfilerTimer,\n } from 'shared\/ReactFeatureFlags';\n import {\n markSpawnedWork,\n@@ -141,6 +142,7 @@ import {OffscreenLane} from '.\/ReactFiberLane';\n import {resetChildFibers} from '.\/ReactChildFiber.new';\n import {updateDeprecatedEventListeners} from '.\/ReactFiberDeprecatedEvents.new';\n import {createScopeInstance} from '.\/ReactFiberScope.new';\n+import {transferActualDuration} from '.\/ReactProfilerTimer.new';\n \n function markUpdate(workInProgress: Fiber) {\n \/\/ Tag the fiber with an update effect. This turns a Placement into\n@@ -890,6 +892,12 @@ function completeWork(\n \/\/ Something suspended. Re-render with the fallback children.\n workInProgress.lanes = renderLanes;\n \/\/ Do not reset the effect list.\n+ if (\n+ enableProfilerTimer &&\n+ (workInProgress.mode & ProfileMode) !== NoMode\n+ ) {\n+ transferActualDuration(workInProgress);\n+ }\n return workInProgress;\n }\n \ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\nindex ebdc40ed0e..53145506e6 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberCompleteWork.old.js\n@@ -54,7 +54,7 @@ import {\n ScopeComponent,\n Block,\n } from '.\/ReactWorkTags';\n-import {NoMode, BlockingMode} from '.\/ReactTypeOfMode';\n+import {NoMode, BlockingMode, ProfileMode} from '.\/ReactTypeOfMode';\n import {\n Ref,\n Update,\n@@ -125,6 +125,7 @@ import {\n enableFundamentalAPI,\n enableScopeAPI,\n enableBlocksAPI,\n+ enableProfilerTimer,\n } from 'shared\/ReactFeatureFlags';\n import {\n markSpawnedWork,\n@@ -137,6 +138,7 @@ import {Never} from '.\/ReactFiberExpirationTime.old';\n import {resetChildFibers} from '.\/ReactChildFiber.old';\n import {updateDeprecatedEventListeners} from '.\/ReactFiberDeprecatedEvents.old';\n import {createScopeInstance} from '.\/ReactFiberScope.old';\n+import {transferActualDuration} from '.\/ReactProfilerTimer.old';\n \n function markUpdate(workInProgress: Fiber) {\n \/\/ Tag the fiber with an update effect. This turns a Placement into\n@@ -885,6 +887,12 @@ function completeWork(\n if ((workInProgress.effectTag & DidCapture) !== NoEffect) {\n \/\/ Something suspended. Re-render with the fallback children.\n workInProgress.expirationTime = renderExpirationTime;\n+ if (\n+ enableProfilerTimer &&\n+ (workInProgress.mode & ProfileMode) !== NoMode\n+ ) {\n+ transferActualDuration(workInProgress);\n+ }\n \/\/ Do not reset the effect list.\n return workInProgress;\n }\n@@ -1084,6 +1092,7 @@ function completeWork(\n ForceSuspenseFallback,\n ),\n );\n+\n return workInProgress.child;\n }\n row = row.sibling;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\nindex 735888f321..540ba6ef2a 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.new.js\n@@ -24,7 +24,11 @@ import {\n LegacyHiddenComponent,\n } from '.\/ReactWorkTags';\n import {DidCapture, NoEffect, ShouldCapture} from '.\/ReactSideEffectTags';\n-import {enableSuspenseServerRenderer} from 'shared\/ReactFeatureFlags';\n+import {NoMode, ProfileMode} from '.\/ReactTypeOfMode';\n+import {\n+ enableSuspenseServerRenderer,\n+ enableProfilerTimer,\n+} from 'shared\/ReactFeatureFlags';\n \n import {popHostContainer, popHostContext} from '.\/ReactFiberHostContext.new';\n import {popSuspenseContext} from '.\/ReactFiberSuspenseContext.new';\n@@ -36,6 +40,7 @@ import {\n } from '.\/ReactFiberContext.new';\n import {popProvider} from '.\/ReactFiberNewContext.new';\n import {popRenderLanes} from '.\/ReactFiberWorkLoop.new';\n+import {transferActualDuration} from '.\/ReactProfilerTimer.new';\n \n import invariant from 'shared\/invariant';\n \n@@ -49,6 +54,12 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {\n const effectTag = workInProgress.effectTag;\n if (effectTag & ShouldCapture) {\n workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;\n+ if (\n+ enableProfilerTimer &&\n+ (workInProgress.mode & ProfileMode) !== NoMode\n+ ) {\n+ transferActualDuration(workInProgress);\n+ }\n return workInProgress;\n }\n return null;\n@@ -89,6 +100,12 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {\n if (effectTag & ShouldCapture) {\n workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;\n \/\/ Captured a suspense effect. Re-render the boundary.\n+ if (\n+ enableProfilerTimer &&\n+ (workInProgress.mode & ProfileMode) !== NoMode\n+ ) {\n+ transferActualDuration(workInProgress);\n+ }\n return workInProgress;\n }\n return null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\nindex 5a1c42707d..26db42fc7e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberUnwindWork.old.js\n@@ -22,7 +22,11 @@ import {\n SuspenseListComponent,\n } from '.\/ReactWorkTags';\n import {DidCapture, NoEffect, ShouldCapture} from '.\/ReactSideEffectTags';\n-import {enableSuspenseServerRenderer} from 'shared\/ReactFeatureFlags';\n+import {NoMode, ProfileMode} from '.\/ReactTypeOfMode';\n+import {\n+ enableSuspenseServerRenderer,\n+ enableProfilerTimer,\n+} from 'shared\/ReactFeatureFlags';\n \n import {popHostContainer, popHostContext} from '.\/ReactFiberHostContext.old';\n import {popSuspenseContext} from '.\/ReactFiberSuspenseContext.old';\n@@ -33,6 +37,7 @@ import {\n popTopLevelContextObject as popTopLevelLegacyContextObject,\n } from '.\/ReactFiberContext.old';\n import {popProvider} from '.\/ReactFiberNewContext.old';\n+import {transferActualDuration} from '.\/ReactProfilerTimer.old';\n \n import invariant from 'shared\/invariant';\n \n@@ -49,6 +54,12 @@ function unwindWork(\n const effectTag = workInProgress.effectTag;\n if (effectTag & ShouldCapture) {\n workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;\n+ if (\n+ enableProfilerTimer &&\n+ (workInProgress.mode & ProfileMode) !== NoMode\n+ ) {\n+ transferActualDuration(workInProgress);\n+ }\n return workInProgress;\n }\n return null;\n@@ -89,6 +100,12 @@ function unwindWork(\n if (effectTag & ShouldCapture) {\n workInProgress.effectTag = (effectTag & ~ShouldCapture) | DidCapture;\n \/\/ Captured a suspense effect. Re-render the boundary.\n+ if (\n+ enableProfilerTimer &&\n+ (workInProgress.mode & ProfileMode) !== NoMode\n+ ) {\n+ transferActualDuration(workInProgress);\n+ }\n return workInProgress;\n }\n return null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\nindex d634fc5c70..fc9a5c828e 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.new.js\n@@ -1571,7 +1571,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);\n }\n resetCurrentDebugFiberInDEV();\n- resetChildLanes(completedWork);\n \n if (next !== null) {\n \/\/ Completing this fiber spawned new work. Work on that next.\n@@ -1579,6 +1578,8 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n return;\n }\n \n+ resetChildLanes(completedWork);\n+\n if (\n returnFiber !== null &&\n \/\/ Do not append effects to parents if a sibling failed to complete\n@@ -1625,6 +1626,16 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n \n \/\/ Because this fiber did not complete, don't reset its expiration time.\n \n+ if (next !== null) {\n+ \/\/ If completing this work spawned new work, do that next. We'll come\n+ \/\/ back here again.\n+ \/\/ Since we're restarting, remove anything that is not a host effect\n+ \/\/ from the effect tag.\n+ next.effectTag &= HostEffectMask;\n+ workInProgress = next;\n+ return;\n+ }\n+\n if (\n enableProfilerTimer &&\n (completedWork.mode & ProfileMode) !== NoMode\n@@ -1642,16 +1653,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n completedWork.actualDuration = actualDuration;\n }\n \n- if (next !== null) {\n- \/\/ If completing this work spawned new work, do that next. We'll come\n- \/\/ back here again.\n- \/\/ Since we're restarting, remove anything that is not a host effect\n- \/\/ from the effect tag.\n- next.effectTag &= HostEffectMask;\n- workInProgress = next;\n- return;\n- }\n-\n if (returnFiber !== null) {\n \/\/ Mark the parent fiber as incomplete and clear its effect list.\n returnFiber.firstEffect = returnFiber.lastEffect = null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\nindex b984a3fa66..46bb4df2ef 100644\n--- a\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactFiberWorkLoop.old.js\n@@ -1643,7 +1643,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);\n }\n resetCurrentDebugFiberInDEV();\n- resetChildExpirationTime(completedWork);\n \n if (next !== null) {\n \/\/ Completing this fiber spawned new work. Work on that next.\n@@ -1651,6 +1650,8 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n return;\n }\n \n+ resetChildExpirationTime(completedWork);\n+\n if (\n returnFiber !== null &&\n \/\/ Do not append effects to parents if a sibling failed to complete\n@@ -1697,6 +1698,16 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n \n \/\/ Because this fiber did not complete, don't reset its expiration time.\n \n+ if (next !== null) {\n+ \/\/ If completing this work spawned new work, do that next. We'll come\n+ \/\/ back here again.\n+ \/\/ Since we're restarting, remove anything that is not a host effect\n+ \/\/ from the effect tag.\n+ next.effectTag &= HostEffectMask;\n+ workInProgress = next;\n+ return;\n+ }\n+\n if (\n enableProfilerTimer &&\n (completedWork.mode & ProfileMode) !== NoMode\n@@ -1714,16 +1725,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {\n completedWork.actualDuration = actualDuration;\n }\n \n- if (next !== null) {\n- \/\/ If completing this work spawned new work, do that next. We'll come\n- \/\/ back here again.\n- \/\/ Since we're restarting, remove anything that is not a host effect\n- \/\/ from the effect tag.\n- next.effectTag &= HostEffectMask;\n- workInProgress = next;\n- return;\n- }\n-\n if (returnFiber !== null) {\n \/\/ Mark the parent fiber as incomplete and clear its effect list.\n returnFiber.firstEffect = returnFiber.lastEffect = null;\ndiff --git a\/packages\/react-reconciler\/src\/ReactProfilerTimer.new.js b\/packages\/react-reconciler\/src\/ReactProfilerTimer.new.js\nindex 69183f70e6..e7f58e1b1b 100644\n--- a\/packages\/react-reconciler\/src\/ReactProfilerTimer.new.js\n+++ b\/packages\/react-reconciler\/src\/ReactProfilerTimer.new.js\n@@ -148,6 +148,17 @@ function startPassiveEffectTimer(): void {\n passiveEffectStartTime = now();\n }\n \n+function transferActualDuration(fiber: Fiber): void {\n+ \/\/ Transfer time spent rendering these children so we don't lose it\n+ \/\/ after we rerender. This is used as a helper in special cases\n+ \/\/ where we should count the work of multiple passes.\n+ let child = fiber.child;\n+ while (child) {\n+ fiber.actualDuration += child.actualDuration;\n+ child = child.sibling;\n+ }\n+}\n+\n export {\n getCommitTime,\n recordCommitTime,\n@@ -158,4 +169,5 @@ export {\n startProfilerTimer,\n stopProfilerTimerIfRunning,\n stopProfilerTimerIfRunningAndRecordDelta,\n+ transferActualDuration,\n };\ndiff --git a\/packages\/react-reconciler\/src\/ReactProfilerTimer.old.js b\/packages\/react-reconciler\/src\/ReactProfilerTimer.old.js\nindex 69183f70e6..e7f58e1b1b 100644\n--- a\/packages\/react-reconciler\/src\/ReactProfilerTimer.old.js\n+++ b\/packages\/react-reconciler\/src\/ReactProfilerTimer.old.js\n@@ -148,6 +148,17 @@ function startPassiveEffectTimer(): void {\n passiveEffectStartTime = now();\n }\n \n+function transferActualDuration(fiber: Fiber): void {\n+ \/\/ Transfer time spent rendering these children so we don't lose it\n+ \/\/ after we rerender. This is used as a helper in special cases\n+ \/\/ where we should count the work of multiple passes.\n+ let child = fiber.child;\n+ while (child) {\n+ fiber.actualDuration += child.actualDuration;\n+ child = child.sibling;\n+ }\n+}\n+\n export {\n getCommitTime,\n recordCommitTime,\n@@ -158,4 +169,5 @@ export {\n startProfilerTimer,\n stopProfilerTimerIfRunning,\n stopProfilerTimerIfRunningAndRecordDelta,\n+ transferActualDuration,\n };\ndiff --git a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.js b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.js\nindex 4df09b5370..0388352d1f 100644\n--- a\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.js\n+++ b\/packages\/react-reconciler\/src\/__tests__\/ReactSuspenseList-test.js\n@@ -1,6 +1,7 @@\n let React;\n let ReactNoop;\n let Scheduler;\n+let Profiler;\n let Suspense;\n let SuspenseList;\n \n@@ -11,6 +12,7 @@ describe('ReactSuspenseList', () => {\n React = require('react');\n ReactNoop = require('react-noop-renderer');\n Scheduler = require('scheduler');\n+ Profiler = React.Profiler;\n Suspense = React.Suspense;\n SuspenseList = React.unstable_SuspenseList;\n });\n@@ -2567,4 +2569,170 @@ describe('ReactSuspenseList', () => {\n <\/>,\n );\n });\n+\n+ \/\/ @gate experimental && enableProfilerTimer\n+ it('counts the actual duration when profiling a SuspenseList', async () => {\n+ \/\/ Order of parameters: id, phase, actualDuration, treeBaseDuration\n+ const onRender = jest.fn();\n+\n+ const Fallback = () => {\n+ Scheduler.unstable_yieldValue('Fallback');\n+ Scheduler.unstable_advanceTime(3);\n+ return Loading...<\/span>;\n+ };\n+\n+ const A = createAsyncText('A');\n+ const B = createAsyncText('B');\n+ const C = createAsyncText('C');\n+ const D = createAsyncText('D');\n+ await A.resolve();\n+ await B.resolve();\n+\n+ function Sleep({time, children}) {\n+ Scheduler.unstable_advanceTime(time);\n+ return children;\n+ }\n+\n+ function App({addRow, suspendTail}) {\n+ Scheduler.unstable_yieldValue('App');\n+ return (\n+ \n+ \n+ }>\n+ \n+ \n+ <\/Sleep>\n+ <\/Suspense>\n+ }>\n+ \n+ \n+ <\/Sleep>\n+ <\/Suspense>\n+ }>\n+ {suspendTail ? : }<\/Sleep>\n+ <\/Suspense>\n+ {addRow ? (\n+ }>\n+ \n+ \n+ <\/Sleep>\n+ <\/Suspense>\n+ ) : null}\n+ <\/SuspenseList>\n+ <\/Profiler>\n+ );\n+ }\n+\n+ ReactNoop.render();\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'App',\n+ 'A',\n+ 'B',\n+ 'Suspend! [C]',\n+ 'Fallback',\n+ ]);\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+ A<\/span>\n+ B<\/span>\n+ Loading...<\/span>\n+ <\/>,\n+ );\n+ expect(onRender).toHaveBeenCalledTimes(1);\n+\n+ \/\/ The treeBaseDuration should be the time to render each child. The last\n+ \/\/ one counts the fallback time.\n+ \/\/ The actualDuration should also include the 5ms spent rendering the\n+ \/\/ last suspended row.\n+\n+ \/\/ actualDuration\n+ expect(onRender.mock.calls[0][2]).toBe(1 + 4 + 5 + 3);\n+ \/\/ treeBaseDuration\n+ expect(onRender.mock.calls[0][3]).toBe(1 + 4 + 3);\n+\n+ ReactNoop.render();\n+\n+ expect(Scheduler).toFlushAndYield(['App', 'A', 'B', 'C']);\n+\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+ A<\/span>\n+ B<\/span>\n+ C<\/span>\n+ <\/>,\n+ );\n+ expect(onRender).toHaveBeenCalledTimes(2);\n+\n+ \/\/ actualDuration\n+ expect(onRender.mock.calls[1][2]).toBe(1 + 4 + 5);\n+ \/\/ treeBaseDuration\n+ expect(onRender.mock.calls[1][3]).toBe(1 + 4 + 5);\n+\n+ ReactNoop.render();\n+\n+ expect(Scheduler).toFlushAndYield([\n+ 'App',\n+ 'A',\n+ 'B',\n+ 'Suspend! [C]',\n+ 'Fallback',\n+ \/\/ We rendered in together mode for the head, now we re-render with forced suspense.\n+ 'A',\n+ 'B',\n+ 'Suspend! [C]',\n+ 'Fallback',\n+ \/\/ Lastly we render the tail.\n+ 'Fallback',\n+ ]);\n+\n+ \/\/ Flush suspended time.\n+ jest.advanceTimersByTime(1000);\n+\n+ expect(ReactNoop).toMatchRenderedOutput(\n+ <>\n+ A<\/span>\n+ B<\/span>\n+

dillon1000/react

Files changed