From 8a23def32f9eb7495d6ece67af25fdfbebe42fcd Mon Sep 17 00:00:00 2001 From: Tianyu Yao Date: Mon, 28 Nov 2022 09:13:06 -0800 Subject: [PATCH] Resubmit Add HydrationSyncLane (#25711) ## Summary Submit https://github.com/facebook/react/pull/25698 again after fixing the devtools regression tests in CI. The PR changed lanes representation and some snapshot tests of devtools captures lanes. In devtools tests for older versions, the updated lanes representation no longer matched. The fix is to disable regression tests for those tests. ## How did you test this change? ``` ./scripts/circleci/download_devtools_regression_build.js 18.0 --replaceBuild node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 18.0 ``` Unrelated to this PR. There was some issue with jest caching when I locally ran that command. it didn't seem to include the @reactVersion transform, but if I manually modified `scripts/jest/preprocessor.js` or ran ` yarn test --clearCache`, the jest test runs correctly. --- .../src/__tests__/TimelineProfiler-test.js | 474 ++++++++---------- .../src/__tests__/preprocessData-test.js | 176 ++++--- ...MServerSelectiveHydration-test.internal.js | 115 +++++ .../src/ReactFiberLane.new.js | 82 +-- .../src/ReactFiberLane.old.js | 82 +-- .../src/ReactFiberWorkLoop.new.js | 15 +- .../src/ReactFiberWorkLoop.old.js | 15 +- .../__tests__/DebugTracing-test.internal.js | 17 +- 8 files changed, 532 insertions(+), 444 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index bc69af0ead1fe..180c1a5726687 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -126,37 +126,35 @@ describe('Timeline profiler', () => { setPerformanceMock(null); }); - // @reactVersion >=18.0 it('should mark sync render without suspends or state updates', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-2", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -164,22 +162,21 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark render yields', async () => { function Bar() { Scheduler.unstable_yieldValue('Bar'); @@ -199,17 +196,16 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYieldThrough(['Foo']); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-64", - "--render-start-64", - "--component-render-start-Foo", - "--component-render-stop", - "--render-yield", - ] - `); + Array [ + "--schedule-render-128", + "--render-start-128", + "--component-render-start-Foo", + "--component-render-stop", + "--render-yield", + ] + `); }); - // @reactVersion >=18.0 it('should mark sync render with suspense that resolves', async () => { const fakeSuspensePromise = Promise.resolve(true); function Example() { @@ -224,19 +220,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-1-", + "--suspense-suspend-0-Example-mount-2-", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-2", "--layout-effects-stop", "--commit-stop", ] @@ -252,7 +248,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark sync render with suspense that rejects', async () => { const fakeSuspensePromise = Promise.reject(new Error('error')); function Example() { @@ -267,19 +262,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-1-", + "--suspense-suspend-0-Example-mount-2-", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-2", "--layout-effects-stop", "--commit-stop", ] @@ -291,7 +286,6 @@ describe('Timeline profiler', () => { expect(clearedMarks).toContain(`--suspense-rejected-0-Example`); }); - // @reactVersion >=18.0 it('should mark concurrent render with suspense that resolves', async () => { const fakeSuspensePromise = Promise.resolve(true); function Example() { @@ -305,10 +299,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -316,18 +310,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-16-", + "--suspense-suspend-0-Example-mount-32-", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", ] @@ -343,7 +337,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark concurrent render with suspense that rejects', async () => { const fakeSuspensePromise = Promise.reject(new Error('error')); function Example() { @@ -357,10 +350,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -368,18 +361,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-16-", + "--suspense-suspend-0-Example-mount-32-", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", ] @@ -395,7 +388,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark cascading class component state updates', () => { class Example extends React.Component { state = {didMount: false}; @@ -410,10 +402,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -421,36 +413,35 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", - "--schedule-state-update-1-Example", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", + "--schedule-state-update-2-Example", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark cascading class component force updates', () => { class Example extends React.Component { componentDidMount() { @@ -464,10 +455,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -475,36 +466,35 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", - "--schedule-forced-update-1-Example", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", + "--schedule-forced-update-2-Example", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark render phase state updates for class component', () => { class Example extends React.Component { state = {didRender: false}; @@ -519,10 +509,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -540,25 +530,24 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", - "--schedule-state-update-16-Example", + "--schedule-state-update-32-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark render phase force updates for class component', () => { let forced = false; class Example extends React.Component { @@ -574,10 +563,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -595,25 +584,24 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", - "--schedule-forced-update-16-Example", + "--schedule-forced-update-32-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark cascading layout updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -626,10 +614,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -637,38 +625,37 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--component-layout-effect-mount-start-Example", - "--schedule-state-update-1-Example", + "--schedule-state-update-2-Example", "--component-layout-effect-mount-stop", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark cascading passive updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -684,41 +671,40 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-16", - "--render-start-16", + "--schedule-render-32", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", - "--passive-effects-start-16", + "--passive-effects-start-32", "--component-passive-effect-mount-start-Example", - "--schedule-state-update-16-Example", + "--schedule-state-update-32-Example", "--component-passive-effect-mount-stop", "--passive-effects-stop", - "--render-start-16", + "--render-start-32", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark render phase updates', () => { function Example() { const [didRender, setDidRender] = React.useState(false); @@ -734,26 +720,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-16", - "--render-start-16", + "--schedule-render-32", + "--render-start-32", "--component-render-start-Example", - "--schedule-state-update-16-Example", + "--schedule-state-update-32-Example", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark sync render that throws', async () => { spyOn(console, 'error'); @@ -782,8 +767,8 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -791,32 +776,31 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", - "--schedule-state-update-1-ErrorBoundary", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-2", + "--schedule-state-update-2-ErrorBoundary", "--layout-effects-stop", "--commit-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark concurrent render that throws', async () => { spyOn(console, 'error'); @@ -845,10 +829,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); clearPendingMarks(); @@ -856,7 +840,7 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-16", + "--render-start-32", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -864,7 +848,7 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--render-start-16", + "--render-start-32", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -872,32 +856,31 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", - "--schedule-state-update-1-ErrorBoundary", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", + "--schedule-state-update-2-ErrorBoundary", "--layout-effects-stop", - "--render-start-1", + "--render-start-2", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--commit-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('should mark passive and layout effects', async () => { function ComponentWithEffects() { React.useLayoutEffect(() => { @@ -947,18 +930,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-16", - "--render-start-16", + "--schedule-render-32", + "--render-start-32", "--component-render-start-ComponentWithEffects", "--component-render-stop", "--render-stop", - "--commit-start-16", + "--commit-start-32", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-16", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-32", "--component-layout-effect-mount-start-ComponentWithEffects", "--component-layout-effect-mount-stop", "--component-layout-effect-mount-start-ComponentWithEffects", @@ -977,17 +960,17 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--passive-effects-start-16", - "--component-passive-effect-mount-start-ComponentWithEffects", - "--component-passive-effect-mount-stop", - "--component-passive-effect-mount-start-ComponentWithEffects", - "--component-passive-effect-mount-stop", - "--component-passive-effect-mount-start-ComponentWithEffects", - "--component-passive-effect-mount-stop", - "--passive-effects-stop", - ] - `); + Array [ + "--passive-effects-start-32", + "--component-passive-effect-mount-start-ComponentWithEffects", + "--component-passive-effect-mount-stop", + "--component-passive-effect-mount-start-ComponentWithEffects", + "--component-passive-effect-mount-stop", + "--component-passive-effect-mount-start-ComponentWithEffects", + "--component-passive-effect-mount-stop", + "--passive-effects-stop", + ] + `); clearPendingMarks(); @@ -1005,22 +988,22 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", "--component-layout-effect-unmount-start-ComponentWithEffects", "--component-layout-effect-unmount-stop", "--component-layout-effect-unmount-start-ComponentWithEffects", "--component-layout-effect-unmount-stop", - "--layout-effects-start-1", + "--layout-effects-start-2", "--layout-effects-stop", - "--passive-effects-start-1", + "--passive-effects-start-2", "--component-passive-effect-unmount-start-ComponentWithEffects", "--component-passive-effect-unmount-stop", "--component-passive-effect-unmount-start-ComponentWithEffects", @@ -1034,39 +1017,36 @@ describe('Timeline profiler', () => { }); describe('lane labels', () => { - // @reactVersion >=18.0 it('regression test SyncLane', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-1", - "--render-start-1", + "--schedule-render-2", + "--render-start-2", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-2", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('regression test DefaultLane', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-16", - ] - `); + Array [ + "--schedule-render-32", + ] + `); }); - // @reactVersion >=18.0 it('regression test InputDiscreteLane', async () => { const targetRef = React.createRef(null); @@ -1090,25 +1070,24 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-1-App", - "--render-start-1", + "--schedule-state-update-2-App", + "--render-start-2", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-1", + "--commit-start-2", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-1", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-2", "--layout-effects-stop", "--commit-stop", ] `); }); - // @reactVersion >=18.0 it('regression test InputContinuousLane', async () => { const targetRef = React.createRef(null); @@ -1131,18 +1110,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-4-App", - "--render-start-4", + "--schedule-state-update-8-App", + "--render-start-8", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-4", + "--commit-start-8", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1:1)", - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", - "--layout-effects-start-4", + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen", + "--layout-effects-start-8", "--layout-effects-stop", "--commit-stop", ] @@ -1205,7 +1184,6 @@ describe('Timeline profiler', () => { utils.act(() => store.profilerStore.startProfiling()); }); - // @reactVersion >=18.0 it('should mark sync render without suspends or state updates', () => { renderHelper(
); @@ -1213,7 +1191,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1222,7 +1200,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { utils.act(() => renderRootHelper(
)); @@ -1230,7 +1207,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1239,7 +1216,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { let updaterFn; @@ -1272,7 +1248,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000001000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1281,7 +1257,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000001000000", + "lanes": "0b0000000000000000000000010000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1290,7 +1266,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000001000000", + "lanes": "0b0000000000000000000000010000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1299,7 +1275,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1586,7 +1562,6 @@ describe('Timeline profiler', () => { expect(timelineData.componentMeasures).toHaveLength(2); }); - // @reactVersion >=18.0 it('should mark cascading class component state updates', () => { class Example extends React.Component { state = {didMount: false}; @@ -1629,7 +1604,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1638,7 +1613,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -1647,7 +1622,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark cascading class component force updates', () => { let forced = false; class Example extends React.Component { @@ -1689,14 +1663,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1705,7 +1679,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark render phase state updates for class component', () => { class Example extends React.Component { state = {didRender: false}; @@ -1758,7 +1731,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1767,7 +1740,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1776,7 +1749,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark render phase force updates for class component', () => { let forced = false; class Example extends React.Component { @@ -1828,14 +1800,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1844,7 +1816,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark cascading layout updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -1891,7 +1862,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1900,7 +1871,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1909,7 +1880,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark cascading passive updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -1955,7 +1925,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1964,7 +1934,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1973,7 +1943,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark render phase updates', () => { function Example() { const [didRender, setDidRender] = React.useState(false); @@ -2005,7 +1974,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2014,7 +1983,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -2023,7 +1992,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark sync render that throws', async () => { spyOn(console, 'error'); @@ -2090,7 +2058,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2099,7 +2067,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -2119,7 +2087,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark concurrent render that throws', async () => { spyOn(console, 'error'); @@ -2204,7 +2171,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2213,7 +2180,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 30, "type": "schedule-state-update", "warning": null, @@ -2240,7 +2207,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >=18.0 it('should mark passive and layout effects', async () => { function ComponentWithEffects() { React.useLayoutEffect(() => { @@ -2395,7 +2361,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2403,7 +2369,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2411,7 +2377,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2419,7 +2385,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2427,7 +2393,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2437,7 +2403,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render-idle", }, @@ -2445,7 +2411,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render", }, @@ -2453,7 +2419,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "commit", }, @@ -2461,7 +2427,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "layout-effects", }, @@ -2469,7 +2435,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "passive-effects", }, @@ -2505,7 +2471,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2515,7 +2481,7 @@ describe('Timeline profiler', () => { "componentStack": " in Child (at **) in CommponentWithChildren (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js index 6c38ce6c9953a..218783657bc81 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -613,7 +613,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >= 18.0 it('should process a sample legacy render sequence', async () => { utils.legacyRender(
, document.createElement('div')); @@ -629,7 +628,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render-idle", }, @@ -637,7 +636,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render", }, @@ -645,7 +644,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.008, "type": "commit", }, @@ -653,7 +652,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.014, "type": "layout-effects", }, @@ -714,12 +713,13 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [ + 0 => Array [], + 1 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render-idle", }, @@ -727,7 +727,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.006, "type": "render", }, @@ -735,7 +735,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.008, "type": "commit", }, @@ -743,12 +743,11 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.014, "type": "layout-effects", }, ], - 1 => Array [], 2 => Array [], 3 => Array [], 4 => Array [], @@ -785,7 +784,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000000", + "lanes": "0b0000000000000000000000000000001", "timestamp": 0.005, "type": "schedule-render", "warning": null, @@ -800,7 +799,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >= 18.0 it('should process a sample createRoot render sequence', async () => { function App() { const [didMount, setDidMount] = React.useState(false); @@ -827,7 +825,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render-idle", }, @@ -835,7 +833,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render", }, @@ -843,7 +841,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.01, "type": "commit", }, @@ -851,7 +849,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.016, "type": "layout-effects", }, @@ -859,7 +857,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.019, "type": "passive-effects", }, @@ -869,7 +867,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render-idle", }, @@ -877,7 +875,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render", }, @@ -885,7 +883,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.028, "type": "commit", }, @@ -893,7 +891,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.034, "type": "layout-effects", }, @@ -901,7 +899,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.037, "type": "passive-effects", }, @@ -995,12 +993,13 @@ describe('Timeline profiler', () => { 1 => Array [], 2 => Array [], 3 => Array [], - 4 => Array [ + 4 => Array [], + 5 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render-idle", }, @@ -1008,7 +1007,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.006, "type": "render", }, @@ -1016,7 +1015,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.01, "type": "commit", }, @@ -1024,7 +1023,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.016, "type": "layout-effects", }, @@ -1032,7 +1031,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.019, "type": "passive-effects", }, @@ -1040,7 +1039,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render-idle", }, @@ -1048,7 +1047,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.024, "type": "render", }, @@ -1056,7 +1055,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.028, "type": "commit", }, @@ -1064,7 +1063,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.034, "type": "layout-effects", }, @@ -1072,12 +1071,11 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.037, "type": "passive-effects", }, ], - 5 => Array [], 6 => Array [], 7 => Array [], 8 => Array [], @@ -1110,14 +1108,14 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.005, "type": "schedule-render", "warning": null, }, Object { "componentName": "App", - "lanes": "0b0000000000000000000000000000100", + "lanes": "0b0000000000000000000000000000101", "timestamp": 0.021, "type": "schedule-state-update", "warning": null, @@ -1947,7 +1945,6 @@ describe('Timeline profiler', () => { global.IS_REACT_ACT_ENVIRONMENT = true; }); - // @reactVersion >= 18.0 it('should process a sample legacy render sequence', async () => { utils.legacyRender(
, document.createElement('div')); utils.act(() => store.profilerStore.stopProfiling()); @@ -1963,7 +1960,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render-idle", }, @@ -1971,7 +1968,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render", }, @@ -1979,7 +1976,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "commit", }, @@ -1987,7 +1984,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "layout-effects", }, @@ -1998,13 +1995,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "Sync", - 2 => "InputContinuousHydration", - 4 => "InputContinuous", - 8 => "DefaultHydration", - 16 => "Default", - 32 => "TransitionHydration", - 64 => "Transition", + 1 => "SyncHydrationLane", + 2 => "Sync", + 4 => "InputContinuousHydration", + 8 => "InputContinuous", + 16 => "DefaultHydration", + 32 => "Default", + 64 => "TransitionHydration", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2020,7 +2017,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Retry", + 4194304 => "Transition", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2031,12 +2028,13 @@ describe('Timeline profiler', () => { 1073741824 => "Offscreen", }, "laneToReactMeasureMap": Map { - 1 => Array [ + 1 => Array [], + 2 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render-idle", }, @@ -2044,7 +2042,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "render", }, @@ -2052,7 +2050,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "commit", }, @@ -2060,12 +2058,11 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "layout-effects", }, ], - 2 => Array [], 4 => Array [], 8 => Array [], 16 => Array [], @@ -2102,7 +2099,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000010", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2117,7 +2114,6 @@ describe('Timeline profiler', () => { `); }); - // @reactVersion >= 18.0 it('should process a sample createRoot render sequence', async () => { function App() { const [didMount, setDidMount] = React.useState(false); @@ -2153,7 +2149,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2161,7 +2157,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2169,7 +2165,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2177,7 +2173,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2185,7 +2181,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2195,7 +2191,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2203,7 +2199,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2211,7 +2207,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2219,7 +2215,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2227,7 +2223,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2267,13 +2263,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "Sync", - 2 => "InputContinuousHydration", - 4 => "InputContinuous", - 8 => "DefaultHydration", - 16 => "Default", - 32 => "TransitionHydration", - 64 => "Transition", + 1 => "SyncHydrationLane", + 2 => "Sync", + 4 => "InputContinuousHydration", + 8 => "InputContinuous", + 16 => "DefaultHydration", + 32 => "Default", + 64 => "TransitionHydration", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2289,7 +2285,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Retry", + 4194304 => "Transition", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2304,12 +2300,13 @@ describe('Timeline profiler', () => { 2 => Array [], 4 => Array [], 8 => Array [], - 16 => Array [ + 16 => Array [], + 32 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2317,7 +2314,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2325,7 +2322,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2333,7 +2330,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2341,7 +2338,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, @@ -2349,7 +2346,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render-idle", }, @@ -2357,7 +2354,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "render", }, @@ -2365,7 +2362,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "commit", }, @@ -2373,7 +2370,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "layout-effects", }, @@ -2381,12 +2378,11 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "passive-effects", }, ], - 32 => Array [], 64 => Array [], 128 => Array [], 256 => Array [], @@ -2419,7 +2415,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2428,7 +2424,7 @@ describe('Timeline profiler', () => { "componentName": "App", "componentStack": " in App (at **)", - "lanes": "0b0000000000000000000000000010000", + "lanes": "0b0000000000000000000000000100000", "timestamp": 10, "type": "schedule-state-update", "warning": null, diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js index a8f06a3227b16..8a3668cd0d396 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js @@ -21,6 +21,7 @@ let Suspense; let act; let IdleEventPriority; +let ContinuousEventPriority; function dispatchMouseHoverEvent(to, from) { if (!to) { @@ -110,6 +111,18 @@ function TODO_scheduleIdleDOMSchedulerTask(fn) { }); } +function TODO_scheduleContinuousSchedulerTask(fn) { + ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => { + const prevEvent = window.event; + window.event = {type: 'message'}; + try { + fn(); + } finally { + window.event = prevEvent; + } + }); +} + describe('ReactDOMServerSelectiveHydration', () => { beforeEach(() => { jest.resetModuleRegistry(); @@ -125,6 +138,8 @@ describe('ReactDOMServerSelectiveHydration', () => { Suspense = React.Suspense; IdleEventPriority = require('react-reconciler/constants').IdleEventPriority; + ContinuousEventPriority = require('react-reconciler/constants') + .ContinuousEventPriority; }); it('hydrates the target boundary synchronously during a click', async () => { @@ -1770,4 +1785,104 @@ describe('ReactDOMServerSelectiveHydration', () => { document.body.removeChild(container); }); + + it('can force hydration in response to sync update', () => { + function Child({text}) { + Scheduler.unstable_yieldValue(`Child ${text}`); + return (spanRef = ref)}>{text}; + } + function App({text}) { + Scheduler.unstable_yieldValue(`App ${text}`); + return ( +
+ + + +
+ ); + } + + let spanRef; + const finalHTML = ReactDOMServer.renderToString(); + expect(Scheduler).toHaveYielded(['App A', 'Child A']); + const container = document.createElement('div'); + document.body.appendChild(container); + container.innerHTML = finalHTML; + const initialSpan = container.getElementsByTagName('span')[0]; + const root = ReactDOMClient.hydrateRoot(container, ); + expect(Scheduler).toFlushUntilNextPaint(['App A']); + + ReactDOM.flushSync(() => { + root.render(); + }); + expect(Scheduler).toHaveYielded(['App B', 'Child A', 'App B', 'Child B']); + expect(initialSpan).toBe(spanRef); + }); + + // @gate experimental || www + it('can force hydration in response to continuous update', () => { + function Child({text}) { + Scheduler.unstable_yieldValue(`Child ${text}`); + return (spanRef = ref)}>{text}; + } + function App({text}) { + Scheduler.unstable_yieldValue(`App ${text}`); + return ( +
+ + + +
+ ); + } + + let spanRef; + const finalHTML = ReactDOMServer.renderToString(); + expect(Scheduler).toHaveYielded(['App A', 'Child A']); + const container = document.createElement('div'); + document.body.appendChild(container); + container.innerHTML = finalHTML; + const initialSpan = container.getElementsByTagName('span')[0]; + const root = ReactDOMClient.hydrateRoot(container, ); + expect(Scheduler).toFlushUntilNextPaint(['App A']); + + TODO_scheduleContinuousSchedulerTask(() => { + root.render(); + }); + expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']); + expect(initialSpan).toBe(spanRef); + }); + + it('can force hydration in response to default update', () => { + function Child({text}) { + Scheduler.unstable_yieldValue(`Child ${text}`); + return (spanRef = ref)}>{text}; + } + function App({text}) { + Scheduler.unstable_yieldValue(`App ${text}`); + return ( +
+ + + +
+ ); + } + + let spanRef; + const finalHTML = ReactDOMServer.renderToString(); + expect(Scheduler).toHaveYielded(['App A', 'Child A']); + const container = document.createElement('div'); + document.body.appendChild(container); + container.innerHTML = finalHTML; + const initialSpan = container.getElementsByTagName('span')[0]; + const root = ReactDOMClient.hydrateRoot(container, ); + expect(Scheduler).toFlushUntilNextPaint(['App A']); + + ReactDOM.unstable_batchedUpdates(() => { + root.render(); + }); + expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']); + expect(initialSpan).toBe(spanRef); + }); }); diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js index 6f36f52f161d6..cc3781bd7b3ed 100644 --- a/packages/react-reconciler/src/ReactFiberLane.new.js +++ b/packages/react-reconciler/src/ReactFiberLane.new.js @@ -36,39 +36,39 @@ export const TotalLanes = 31; export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000; export const NoLane: Lane = /* */ 0b0000000000000000000000000000000; -export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001; - -export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010; -export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100; - -export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000; -export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000; - -const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000; -const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000; -const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000; -const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000; -const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000; -const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000; -const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000; -const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000; -const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000; -const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000; -const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000; -const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000; -const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000; -const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000; -const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000; -const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000; -const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000; -const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000; - -const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000; -const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000; -const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000; -const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000; -const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000; -const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000; +export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001; +export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010; + +export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100; +export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000; + +export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000; +export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000; + +const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000; +const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000; +const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000; +const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000; +const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000; +const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000; +const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000; +const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000; +const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000; +const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000; +const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000; +const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000; +const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000; +const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000; +const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000; +const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000; +const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000; +const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000; + +const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000; +const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000; +const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000; +const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000; +const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000; export const SomeRetryLane: Lane = RetryLane1; @@ -85,6 +85,9 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000 // It should be kept in sync with the Lanes values above. export function getLabelForLane(lane: Lane): string | void { if (enableSchedulingProfiler) { + if (lane & SyncHydrationLane) { + return 'SyncHydrationLane'; + } if (lane & SyncLane) { return 'Sync'; } @@ -131,6 +134,8 @@ let nextRetryLane: Lane = RetryLane1; function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { switch (getHighestPriorityLane(lanes)) { + case SyncHydrationLane: + return SyncHydrationLane; case SyncLane: return SyncLane; case InputContinuousHydrationLane: @@ -164,7 +169,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { case RetryLane2: case RetryLane3: case RetryLane4: - case RetryLane5: return lanes & RetryLanes; case SelectiveHydrationLane: return SelectiveHydrationLane; @@ -327,6 +331,7 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number { function computeExpirationTime(lane: Lane, currentTime: number) { switch (lane) { + case SyncHydrationLane: case SyncLane: case InputContinuousHydrationLane: case InputContinuousLane: @@ -364,7 +369,6 @@ function computeExpirationTime(lane: Lane, currentTime: number) { case RetryLane2: case RetryLane3: case RetryLane4: - case RetryLane5: // TODO: Retries should be allowed to expire if they are CPU bound for // too long, but when I made this change it caused a spike in browser // crashes. There must be some other underlying bug; not super urgent but @@ -459,7 +463,7 @@ export function getLanesToRetrySynchronouslyOnError( } export function includesSyncLane(lanes: Lanes): boolean { - return (lanes & SyncLane) !== NoLanes; + return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes; } export function includesNonIdleWork(lanes: Lanes): boolean { @@ -469,6 +473,8 @@ export function includesOnlyRetries(lanes: Lanes): boolean { return (lanes & RetryLanes) === lanes; } export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean { + // TODO: Should hydration lanes be included here? This function is only + // used in `updateDeferredValueImpl`. const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane; return (lanes & UrgentLanes) === NoLanes; } @@ -749,6 +755,9 @@ export function getBumpedLaneForHydration( let lane; switch (renderLane) { + case SyncLane: + lane = SyncHydrationLane; + break; case InputContinuousLane: lane = InputContinuousHydrationLane; break; @@ -775,7 +784,6 @@ export function getBumpedLaneForHydration( case RetryLane2: case RetryLane3: case RetryLane4: - case RetryLane5: lane = TransitionHydrationLane; break; case IdleLane: diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js index 4a045359fd16f..110893a036530 100644 --- a/packages/react-reconciler/src/ReactFiberLane.old.js +++ b/packages/react-reconciler/src/ReactFiberLane.old.js @@ -36,39 +36,39 @@ export const TotalLanes = 31; export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000; export const NoLane: Lane = /* */ 0b0000000000000000000000000000000; -export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001; - -export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010; -export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100; - -export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000; -export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000; - -const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000; -const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000; -const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000; -const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000; -const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000; -const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000; -const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000; -const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000; -const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000; -const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000; -const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000; -const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000; -const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000; -const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000; -const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000; -const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000; -const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000; -const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000; - -const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000; -const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000; -const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000; -const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000; -const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000; -const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000; +export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001; +export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010; + +export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100; +export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000; + +export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000; +export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000; + +const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000; +const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000; +const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000; +const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000; +const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000; +const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000; +const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000; +const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000; +const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000; +const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000; +const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000; +const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000; +const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000; +const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000; +const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000; +const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000; +const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000; +const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000; + +const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000; +const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000; +const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000; +const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000; +const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000; export const SomeRetryLane: Lane = RetryLane1; @@ -85,6 +85,9 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000 // It should be kept in sync with the Lanes values above. export function getLabelForLane(lane: Lane): string | void { if (enableSchedulingProfiler) { + if (lane & SyncHydrationLane) { + return 'SyncHydrationLane'; + } if (lane & SyncLane) { return 'Sync'; } @@ -131,6 +134,8 @@ let nextRetryLane: Lane = RetryLane1; function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { switch (getHighestPriorityLane(lanes)) { + case SyncHydrationLane: + return SyncHydrationLane; case SyncLane: return SyncLane; case InputContinuousHydrationLane: @@ -164,7 +169,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { case RetryLane2: case RetryLane3: case RetryLane4: - case RetryLane5: return lanes & RetryLanes; case SelectiveHydrationLane: return SelectiveHydrationLane; @@ -327,6 +331,7 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number { function computeExpirationTime(lane: Lane, currentTime: number) { switch (lane) { + case SyncHydrationLane: case SyncLane: case InputContinuousHydrationLane: case InputContinuousLane: @@ -364,7 +369,6 @@ function computeExpirationTime(lane: Lane, currentTime: number) { case RetryLane2: case RetryLane3: case RetryLane4: - case RetryLane5: // TODO: Retries should be allowed to expire if they are CPU bound for // too long, but when I made this change it caused a spike in browser // crashes. There must be some other underlying bug; not super urgent but @@ -459,7 +463,7 @@ export function getLanesToRetrySynchronouslyOnError( } export function includesSyncLane(lanes: Lanes): boolean { - return (lanes & SyncLane) !== NoLanes; + return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes; } export function includesNonIdleWork(lanes: Lanes): boolean { @@ -469,6 +473,8 @@ export function includesOnlyRetries(lanes: Lanes): boolean { return (lanes & RetryLanes) === lanes; } export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean { + // TODO: Should hydration lanes be included here? This function is only + // used in `updateDeferredValueImpl`. const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane; return (lanes & UrgentLanes) === NoLanes; } @@ -749,6 +755,9 @@ export function getBumpedLaneForHydration( let lane; switch (renderLane) { + case SyncLane: + lane = SyncHydrationLane; + break; case InputContinuousLane: lane = InputContinuousHydrationLane; break; @@ -775,7 +784,6 @@ export function getBumpedLaneForHydration( case RetryLane2: case RetryLane3: case RetryLane4: - case RetryLane5: lane = TransitionHydrationLane; break; case IdleLane: diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index b8135becc4360..fb5f1306a8715 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -141,7 +141,7 @@ import { NoTimestamp, claimNextTransitionLane, claimNextRetryLane, - includesSomeLane, + includesSyncLane, isSubsetOfLanes, mergeLanes, removeLanes, @@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // TODO: Temporary until we confirm this warning is not fired. if ( existingCallbackNode == null && - existingCallbackPriority !== SyncLane + !includesSyncLane(existingCallbackPriority) ) { console.error( 'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.', @@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // Schedule a new callback. let newCallbackNode; - if (newCallbackPriority === SyncLane) { + if (includesSyncLane(newCallbackPriority)) { // Special case: Sync React callbacks are scheduled on a special // internal queue if (root.tag === LegacyRoot) { @@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) { flushPassiveEffects(); let lanes = getNextLanes(root, NoLanes); - if (!includesSomeLane(lanes, SyncLane)) { + if (!includesSyncLane(lanes)) { // There's no remaining sync work left. ensureRootIsScheduled(root, now()); return null; @@ -2930,16 +2930,13 @@ function commitRootImpl( // TODO: We can optimize this by not scheduling the callback earlier. Since we // currently schedule the callback in multiple places, will wait until those // are consolidated. - if ( - includesSomeLane(pendingPassiveEffectsLanes, SyncLane) && - root.tag !== LegacyRoot - ) { + if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) { flushPassiveEffects(); } // Read this again, since a passive effect might have updated it remainingLanes = root.pendingLanes; - if (includesSomeLane(remainingLanes, (SyncLane: Lane))) { + if (includesSyncLane(remainingLanes)) { if (enableProfilerTimer && enableProfilerNestedUpdatePhase) { markNestedUpdateScheduled(); } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 3b571b1ceb3d7..069db86d4c05c 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -141,7 +141,7 @@ import { NoTimestamp, claimNextTransitionLane, claimNextRetryLane, - includesSomeLane, + includesSyncLane, isSubsetOfLanes, mergeLanes, removeLanes, @@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // TODO: Temporary until we confirm this warning is not fired. if ( existingCallbackNode == null && - existingCallbackPriority !== SyncLane + !includesSyncLane(existingCallbackPriority) ) { console.error( 'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.', @@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // Schedule a new callback. let newCallbackNode; - if (newCallbackPriority === SyncLane) { + if (includesSyncLane(newCallbackPriority)) { // Special case: Sync React callbacks are scheduled on a special // internal queue if (root.tag === LegacyRoot) { @@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) { flushPassiveEffects(); let lanes = getNextLanes(root, NoLanes); - if (!includesSomeLane(lanes, SyncLane)) { + if (!includesSyncLane(lanes)) { // There's no remaining sync work left. ensureRootIsScheduled(root, now()); return null; @@ -2930,16 +2930,13 @@ function commitRootImpl( // TODO: We can optimize this by not scheduling the callback earlier. Since we // currently schedule the callback in multiple places, will wait until those // are consolidated. - if ( - includesSomeLane(pendingPassiveEffectsLanes, SyncLane) && - root.tag !== LegacyRoot - ) { + if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) { flushPassiveEffects(); } // Read this again, since a passive effect might have updated it remainingLanes = root.pendingLanes; - if (includesSomeLane(remainingLanes, (SyncLane: Lane))) { + if (includesSyncLane(remainingLanes)) { if (enableProfilerTimer && enableProfilerNestedUpdatePhase) { markNestedUpdateScheduled(); } diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js index cd235e7cee306..0d4cf546c6d6e 100644 --- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js +++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js @@ -16,8 +16,9 @@ describe('DebugTracing', () => { let logs; - const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000'; - const RETRY_LANE_STRING = '0b0000000010000000000000000000000'; + const SYNC_LANE_STRING = '0b0000000000000000000000000000010'; + const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000'; + const RETRY_LANE_STRING = '0b0000000100000000000000000000000'; global.IS_REACT_ACT_ENVIRONMENT = true; @@ -87,9 +88,9 @@ describe('DebugTracing', () => { ); expect(logs).toEqual([ - 'group: ⚛️ render (0b0000000000000000000000000000001)', + `group: ⚛️ render (${SYNC_LANE_STRING})`, 'log: ⚛️ Example suspended', - 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)', + `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`, ]); logs.splice(0); @@ -121,9 +122,9 @@ describe('DebugTracing', () => { ); expect(logs).toEqual([ - 'group: ⚛️ render (0b0000000000000000000000000000001)', + `group: ⚛️ render (${SYNC_LANE_STRING})`, 'log: ', - 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)', + `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`, ]); logs.splice(0); @@ -237,7 +238,7 @@ describe('DebugTracing', () => { expect(logs).toEqual([ `group: ⚛️ commit (${DEFAULT_LANE_STRING})`, `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, - 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)', + `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`, `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`, ]); @@ -295,7 +296,7 @@ describe('DebugTracing', () => { expect(logs).toEqual([ `group: ⚛️ commit (${DEFAULT_LANE_STRING})`, `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, - 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)', + `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`, `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`, ]);