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})`, ]);