From 8e8495b4768b67fa7a5eb2fe1c2c1a8c10b1e4a1 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Mon, 5 Dec 2022 15:24:32 -0500 Subject: [PATCH 1/2] Revert SyncHydrationLane We're reverting the stack of changes that introduced this lane in order to unblock the sync to Meta's internal codebase. We will attempt to re-land once the sync is unblocked. --- .../src/__tests__/TimelineProfiler-test.js | 474 ++++++++++-------- .../src/__tests__/preprocessData-test.js | 176 +++---- ...MServerSelectiveHydration-test.internal.js | 115 ----- .../react-reconciler/src/ReactFiberLane.js | 82 ++- .../src/ReactFiberWorkLoop.js | 15 +- .../__tests__/DebugTracing-test.internal.js | 17 +- 6 files changed, 398 insertions(+), 481 deletions(-) diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js index 180c1a5726687..bc69af0ead1fe 100644 --- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js +++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js @@ -126,35 +126,37 @@ 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-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--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-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -162,21 +164,22 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark render yields', async () => { function Bar() { Scheduler.unstable_yieldValue('Bar'); @@ -196,16 +199,17 @@ describe('Timeline profiler', () => { expect(Scheduler).toFlushAndYieldThrough(['Foo']); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-128", - "--render-start-128", - "--component-render-start-Foo", - "--component-render-stop", - "--render-yield", - ] - `); + Array [ + "--schedule-render-64", + "--render-start-64", + "--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() { @@ -220,19 +224,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-2-", + "--suspense-suspend-0-Example-mount-1-", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -248,6 +252,7 @@ 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() { @@ -262,19 +267,19 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-2-", + "--suspense-suspend-0-Example-mount-1-", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -286,6 +291,7 @@ 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() { @@ -299,10 +305,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -310,18 +316,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-32-", + "--suspense-suspend-0-Example-mount-16-", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -337,6 +343,7 @@ 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() { @@ -350,10 +357,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -361,18 +368,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", - "--suspense-suspend-0-Example-mount-32-", + "--suspense-suspend-0-Example-mount-16-", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -388,6 +395,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading class component state updates', () => { class Example extends React.Component { state = {didMount: false}; @@ -402,10 +410,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -413,35 +421,36 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", - "--schedule-state-update-2-Example", + "--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", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--commit-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark cascading class component force updates', () => { class Example extends React.Component { componentDidMount() { @@ -455,10 +464,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -466,35 +475,36 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", - "--schedule-forced-update-2-Example", + "--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", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--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}; @@ -509,10 +519,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -530,24 +540,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", - "--schedule-state-update-32-Example", + "--schedule-state-update-16-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--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 { @@ -563,10 +574,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -584,24 +595,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", - "--schedule-forced-update-32-Example", + "--schedule-forced-update-16-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark cascading layout updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -614,10 +626,10 @@ describe('Timeline profiler', () => { renderRootHelper(); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -625,37 +637,38 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--component-layout-effect-mount-start-Example", - "--schedule-state-update-2-Example", + "--schedule-state-update-1-Example", "--component-layout-effect-mount-stop", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--commit-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark cascading passive updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -671,40 +684,41 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-32", - "--render-start-32", + "--schedule-render-16", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--layout-effects-stop", "--commit-stop", - "--passive-effects-start-32", + "--passive-effects-start-16", "--component-passive-effect-mount-start-Example", - "--schedule-state-update-32-Example", + "--schedule-state-update-16-Example", "--component-passive-effect-mount-stop", "--passive-effects-stop", - "--render-start-32", + "--render-start-16", "--component-render-start-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark render phase updates', () => { function Example() { const [didRender, setDidRender] = React.useState(false); @@ -720,25 +734,26 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-32", - "--render-start-32", + "--schedule-render-16", + "--render-start-16", "--component-render-start-Example", - "--schedule-state-update-32-Example", + "--schedule-state-update-16-Example", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark sync render that throws', async () => { spyOn(console, 'error'); @@ -767,8 +782,8 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -776,31 +791,32 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", - "--schedule-state-update-2-ErrorBoundary", + "--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", "--layout-effects-stop", "--commit-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark concurrent render that throws', async () => { spyOn(console, 'error'); @@ -829,10 +845,10 @@ describe('Timeline profiler', () => { ); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); clearPendingMarks(); @@ -840,7 +856,7 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--render-start-32", + "--render-start-16", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -848,7 +864,7 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--render-start-32", + "--render-start-16", "--component-render-start-ErrorBoundary", "--component-render-stop", "--component-render-start-ExampleThatThrows", @@ -856,31 +872,32 @@ describe('Timeline profiler', () => { "--component-render-stop", "--error-ExampleThatThrows-mount-Expected error", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", - "--schedule-state-update-2-ErrorBoundary", + "--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", "--layout-effects-stop", - "--render-start-2", + "--render-start-1", "--component-render-start-ErrorBoundary", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--commit-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('should mark passive and layout effects', async () => { function ComponentWithEffects() { React.useLayoutEffect(() => { @@ -930,18 +947,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-32", - "--render-start-32", + "--schedule-render-16", + "--render-start-16", "--component-render-start-ComponentWithEffects", "--component-render-stop", "--render-stop", - "--commit-start-32", + "--commit-start-16", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-32", + "--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", "--component-layout-effect-mount-start-ComponentWithEffects", "--component-layout-effect-mount-stop", "--component-layout-effect-mount-start-ComponentWithEffects", @@ -960,17 +977,17 @@ describe('Timeline profiler', () => { ]); expect(clearedMarks).toMatchInlineSnapshot(` - 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", - ] - `); + 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", + ] + `); clearPendingMarks(); @@ -988,22 +1005,22 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--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-2", + "--layout-effects-start-1", "--layout-effects-stop", - "--passive-effects-start-2", + "--passive-effects-start-1", "--component-passive-effect-unmount-start-ComponentWithEffects", "--component-passive-effect-unmount-stop", "--component-passive-effect-unmount-start-ComponentWithEffects", @@ -1017,36 +1034,39 @@ describe('Timeline profiler', () => { }); describe('lane labels', () => { + // @reactVersion >=18.0 it('regression test SyncLane', () => { renderHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-render-2", - "--render-start-2", + "--schedule-render-1", + "--render-start-1", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('regression test DefaultLane', () => { renderRootHelper(
); expect(clearedMarks).toMatchInlineSnapshot(` - Array [ - "--schedule-render-32", - ] - `); + Array [ + "--schedule-render-16", + ] + `); }); + // @reactVersion >=18.0 it('regression test InputDiscreteLane', async () => { const targetRef = React.createRef(null); @@ -1070,24 +1090,25 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-2-App", - "--render-start-2", + "--schedule-state-update-1-App", + "--render-start-1", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-2", + "--commit-start-1", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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", + "--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", "--layout-effects-stop", "--commit-stop", ] `); }); + // @reactVersion >=18.0 it('regression test InputContinuousLane', async () => { const targetRef = React.createRef(null); @@ -1110,18 +1131,18 @@ describe('Timeline profiler', () => { expect(clearedMarks).toMatchInlineSnapshot(` Array [ - "--schedule-state-update-8-App", - "--render-start-8", + "--schedule-state-update-4-App", + "--render-start-4", "--component-render-start-App", "--component-render-stop", "--render-stop", - "--commit-start-8", + "--commit-start-4", "--react-version-", "--profiler-version-1", "--react-internal-module-start- at filtered (:0:0)", "--react-internal-module-stop- at filtered (:1: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-8", + "--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", "--layout-effects-stop", "--commit-stop", ] @@ -1184,6 +1205,7 @@ describe('Timeline profiler', () => { utils.act(() => store.profilerStore.startProfiling()); }); + // @reactVersion >=18.0 it('should mark sync render without suspends or state updates', () => { renderHelper(
); @@ -1191,7 +1213,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1200,6 +1222,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { utils.act(() => renderRootHelper(
)); @@ -1207,7 +1230,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1216,6 +1239,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render without suspends or state updates', () => { let updaterFn; @@ -1248,7 +1272,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000001000", + "lanes": "0b0000000000000000000000000000100", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1257,7 +1281,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000010000000", + "lanes": "0b0000000000000000000000001000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1266,7 +1290,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000010000000", + "lanes": "0b0000000000000000000000001000000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1275,7 +1299,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1562,6 +1586,7 @@ 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}; @@ -1604,7 +1629,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1613,7 +1638,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -1622,6 +1647,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading class component force updates', () => { let forced = false; class Example extends React.Component { @@ -1663,14 +1689,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1679,6 +1705,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark render phase state updates for class component', () => { class Example extends React.Component { state = {didRender: false}; @@ -1731,7 +1758,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1740,7 +1767,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-state-update", "warning": null, @@ -1749,6 +1776,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark render phase force updates for class component', () => { let forced = false; class Example extends React.Component { @@ -1800,14 +1828,14 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, }, Object { "componentName": "Example", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 20, "type": "schedule-force-update", "warning": null, @@ -1816,6 +1844,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading layout updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -1862,7 +1891,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1871,7 +1900,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1880,6 +1909,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark cascading passive updates', () => { function Example() { const [didMount, setDidMount] = React.useState(false); @@ -1925,7 +1955,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1934,7 +1964,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 21, "type": "schedule-state-update", "warning": null, @@ -1943,6 +1973,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark render phase updates', () => { function Example() { const [didRender, setDidRender] = React.useState(false); @@ -1974,7 +2005,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -1983,7 +2014,7 @@ describe('Timeline profiler', () => { "componentName": "Example", "componentStack": " in Example (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -1992,6 +2023,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark sync render that throws', async () => { spyOn(console, 'error'); @@ -2058,7 +2090,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2067,7 +2099,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 20, "type": "schedule-state-update", "warning": null, @@ -2087,6 +2119,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark concurrent render that throws', async () => { spyOn(console, 'error'); @@ -2171,7 +2204,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2180,7 +2213,7 @@ describe('Timeline profiler', () => { "componentName": "ErrorBoundary", "componentStack": " in ErrorBoundary (at **)", - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 30, "type": "schedule-state-update", "warning": null, @@ -2207,6 +2240,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >=18.0 it('should mark passive and layout effects', async () => { function ComponentWithEffects() { React.useLayoutEffect(() => { @@ -2361,7 +2395,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2369,7 +2403,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2377,7 +2411,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2385,7 +2419,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2393,7 +2427,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2403,7 +2437,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render-idle", }, @@ -2411,7 +2445,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render", }, @@ -2419,7 +2453,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "commit", }, @@ -2427,7 +2461,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "layout-effects", }, @@ -2435,7 +2469,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "passive-effects", }, @@ -2471,7 +2505,7 @@ describe('Timeline profiler', () => { expect(timelineData.schedulingEvents).toMatchInlineSnapshot(` Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2481,7 +2515,7 @@ describe('Timeline profiler', () => { "componentStack": " in Child (at **) in CommponentWithChildren (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "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 218783657bc81..6c38ce6c9953a 100644 --- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js +++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js @@ -613,6 +613,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 18.0 it('should process a sample legacy render sequence', async () => { utils.legacyRender(
, document.createElement('div')); @@ -628,7 +629,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render-idle", }, @@ -636,7 +637,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render", }, @@ -644,7 +645,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.008, "type": "commit", }, @@ -652,7 +653,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.014, "type": "layout-effects", }, @@ -713,13 +714,12 @@ describe('Timeline profiler', () => { 30 => "Offscreen", }, "laneToReactMeasureMap": Map { - 0 => Array [], - 1 => Array [ + 0 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.01, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render-idle", }, @@ -727,7 +727,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.006, "type": "render", }, @@ -735,7 +735,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.008, "type": "commit", }, @@ -743,11 +743,12 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.014, "type": "layout-effects", }, ], + 1 => Array [], 2 => Array [], 3 => Array [], 4 => Array [], @@ -784,7 +785,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000001", + "lanes": "0b0000000000000000000000000000000", "timestamp": 0.005, "type": "schedule-render", "warning": null, @@ -799,6 +800,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 18.0 it('should process a sample createRoot render sequence', async () => { function App() { const [didMount, setDidMount] = React.useState(false); @@ -825,7 +827,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render-idle", }, @@ -833,7 +835,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render", }, @@ -841,7 +843,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.01, "type": "commit", }, @@ -849,7 +851,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.016, "type": "layout-effects", }, @@ -857,7 +859,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.019, "type": "passive-effects", }, @@ -867,7 +869,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render-idle", }, @@ -875,7 +877,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render", }, @@ -883,7 +885,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.028, "type": "commit", }, @@ -891,7 +893,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.034, "type": "layout-effects", }, @@ -899,7 +901,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.037, "type": "passive-effects", }, @@ -993,13 +995,12 @@ describe('Timeline profiler', () => { 1 => Array [], 2 => Array [], 3 => Array [], - 4 => Array [], - 5 => Array [ + 4 => Array [ Object { "batchUID": 0, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render-idle", }, @@ -1007,7 +1008,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.006, "type": "render", }, @@ -1015,7 +1016,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.01, "type": "commit", }, @@ -1023,7 +1024,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.016, "type": "layout-effects", }, @@ -1031,7 +1032,7 @@ describe('Timeline profiler', () => { "batchUID": 0, "depth": 0, "duration": 0.004, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.019, "type": "passive-effects", }, @@ -1039,7 +1040,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.012, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render-idle", }, @@ -1047,7 +1048,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.024, "type": "render", }, @@ -1055,7 +1056,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.008, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.028, "type": "commit", }, @@ -1063,7 +1064,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0.001, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.034, "type": "layout-effects", }, @@ -1071,11 +1072,12 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0.003, - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.037, "type": "passive-effects", }, ], + 5 => Array [], 6 => Array [], 7 => Array [], 8 => Array [], @@ -1108,14 +1110,14 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.005, "type": "schedule-render", "warning": null, }, Object { "componentName": "App", - "lanes": "0b0000000000000000000000000000101", + "lanes": "0b0000000000000000000000000000100", "timestamp": 0.021, "type": "schedule-state-update", "warning": null, @@ -1945,6 +1947,7 @@ 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()); @@ -1960,7 +1963,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render-idle", }, @@ -1968,7 +1971,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render", }, @@ -1976,7 +1979,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "commit", }, @@ -1984,7 +1987,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "layout-effects", }, @@ -1995,13 +1998,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "SyncHydrationLane", - 2 => "Sync", - 4 => "InputContinuousHydration", - 8 => "InputContinuous", - 16 => "DefaultHydration", - 32 => "Default", - 64 => "TransitionHydration", + 1 => "Sync", + 2 => "InputContinuousHydration", + 4 => "InputContinuous", + 8 => "DefaultHydration", + 16 => "Default", + 32 => "TransitionHydration", + 64 => "Transition", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2017,7 +2020,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Transition", + 4194304 => "Retry", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2028,13 +2031,12 @@ describe('Timeline profiler', () => { 1073741824 => "Offscreen", }, "laneToReactMeasureMap": Map { - 1 => Array [], - 2 => Array [ + 1 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render-idle", }, @@ -2042,7 +2044,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "render", }, @@ -2050,7 +2052,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "commit", }, @@ -2058,11 +2060,12 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "layout-effects", }, ], + 2 => Array [], 4 => Array [], 8 => Array [], 16 => Array [], @@ -2099,7 +2102,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000000010", + "lanes": "0b0000000000000000000000000000001", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2114,6 +2117,7 @@ describe('Timeline profiler', () => { `); }); + // @reactVersion >= 18.0 it('should process a sample createRoot render sequence', async () => { function App() { const [didMount, setDidMount] = React.useState(false); @@ -2149,7 +2153,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2157,7 +2161,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2165,7 +2169,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2173,7 +2177,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2181,7 +2185,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2191,7 +2195,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2199,7 +2203,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2207,7 +2211,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2215,7 +2219,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2223,7 +2227,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2263,13 +2267,13 @@ describe('Timeline profiler', () => { "flamechart": Array [], "internalModuleSourceToRanges": Map {}, "laneToLabelMap": Map { - 1 => "SyncHydrationLane", - 2 => "Sync", - 4 => "InputContinuousHydration", - 8 => "InputContinuous", - 16 => "DefaultHydration", - 32 => "Default", - 64 => "TransitionHydration", + 1 => "Sync", + 2 => "InputContinuousHydration", + 4 => "InputContinuous", + 8 => "DefaultHydration", + 16 => "Default", + 32 => "TransitionHydration", + 64 => "Transition", 128 => "Transition", 256 => "Transition", 512 => "Transition", @@ -2285,7 +2289,7 @@ describe('Timeline profiler', () => { 524288 => "Transition", 1048576 => "Transition", 2097152 => "Transition", - 4194304 => "Transition", + 4194304 => "Retry", 8388608 => "Retry", 16777216 => "Retry", 33554432 => "Retry", @@ -2300,13 +2304,12 @@ describe('Timeline profiler', () => { 2 => Array [], 4 => Array [], 8 => Array [], - 16 => Array [], - 32 => Array [ + 16 => Array [ Object { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2314,7 +2317,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2322,7 +2325,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2330,7 +2333,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2338,7 +2341,7 @@ describe('Timeline profiler', () => { "batchUID": 1, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, @@ -2346,7 +2349,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render-idle", }, @@ -2354,7 +2357,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "render", }, @@ -2362,7 +2365,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "commit", }, @@ -2370,7 +2373,7 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 1, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "layout-effects", }, @@ -2378,11 +2381,12 @@ describe('Timeline profiler', () => { "batchUID": 2, "depth": 0, "duration": 0, - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "passive-effects", }, ], + 32 => Array [], 64 => Array [], 128 => Array [], 256 => Array [], @@ -2415,7 +2419,7 @@ describe('Timeline profiler', () => { "reactVersion": "", "schedulingEvents": Array [ Object { - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "timestamp": 10, "type": "schedule-render", "warning": null, @@ -2424,7 +2428,7 @@ describe('Timeline profiler', () => { "componentName": "App", "componentStack": " in App (at **)", - "lanes": "0b0000000000000000000000000100000", + "lanes": "0b0000000000000000000000000010000", "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 8a3668cd0d396..a8f06a3227b16 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js @@ -21,7 +21,6 @@ let Suspense; let act; let IdleEventPriority; -let ContinuousEventPriority; function dispatchMouseHoverEvent(to, from) { if (!to) { @@ -111,18 +110,6 @@ 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(); @@ -138,8 +125,6 @@ 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 () => { @@ -1785,104 +1770,4 @@ 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.js b/packages/react-reconciler/src/ReactFiberLane.js index 97a28f88099e0..7ff44ac9a56b6 100644 --- a/packages/react-reconciler/src/ReactFiberLane.js +++ b/packages/react-reconciler/src/ReactFiberLane.js @@ -36,39 +36,39 @@ export const TotalLanes = 31; export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000; export const NoLane: Lane = /* */ 0b0000000000000000000000000000000; -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 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 SomeRetryLane: Lane = RetryLane1; @@ -85,9 +85,6 @@ 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'; } @@ -134,8 +131,6 @@ let nextRetryLane: Lane = RetryLane1; function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { switch (getHighestPriorityLane(lanes)) { - case SyncHydrationLane: - return SyncHydrationLane; case SyncLane: return SyncLane; case InputContinuousHydrationLane: @@ -169,6 +164,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes { case RetryLane2: case RetryLane3: case RetryLane4: + case RetryLane5: return lanes & RetryLanes; case SelectiveHydrationLane: return SelectiveHydrationLane; @@ -331,7 +327,6 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number { function computeExpirationTime(lane: Lane, currentTime: number) { switch (lane) { - case SyncHydrationLane: case SyncLane: case InputContinuousHydrationLane: case InputContinuousLane: @@ -369,6 +364,7 @@ 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 @@ -463,7 +459,7 @@ export function getLanesToRetrySynchronouslyOnError( } export function includesSyncLane(lanes: Lanes): boolean { - return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes; + return (lanes & SyncLane) !== NoLanes; } export function includesNonIdleWork(lanes: Lanes): boolean { @@ -473,8 +469,6 @@ 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; } @@ -755,9 +749,6 @@ export function getBumpedLaneForHydration( let lane; switch (renderLane) { - case SyncLane: - lane = SyncHydrationLane; - break; case InputContinuousLane: lane = InputContinuousHydrationLane; break; @@ -784,6 +775,7 @@ export function getBumpedLaneForHydration( case RetryLane2: case RetryLane3: case RetryLane4: + case RetryLane5: lane = TransitionHydrationLane; break; case IdleLane: diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index 24901177563d3..6f86c38a9bc20 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -138,7 +138,7 @@ import { NoTimestamp, claimNextTransitionLane, claimNextRetryLane, - includesSyncLane, + includesSomeLane, isSubsetOfLanes, mergeLanes, removeLanes, @@ -915,7 +915,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // TODO: Temporary until we confirm this warning is not fired. if ( existingCallbackNode == null && - !includesSyncLane(existingCallbackPriority) + existingCallbackPriority !== SyncLane ) { console.error( 'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.', @@ -933,7 +933,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { // Schedule a new callback. let newCallbackNode; - if (includesSyncLane(newCallbackPriority)) { + if (newCallbackPriority === SyncLane) { // Special case: Sync React callbacks are scheduled on a special // internal queue if (root.tag === LegacyRoot) { @@ -1477,7 +1477,7 @@ function performSyncWorkOnRoot(root) { flushPassiveEffects(); let lanes = getNextLanes(root, NoLanes); - if (!includesSyncLane(lanes)) { + if (!includesSomeLane(lanes, SyncLane)) { // There's no remaining sync work left. ensureRootIsScheduled(root, now()); return null; @@ -2927,13 +2927,16 @@ 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 (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) { + if ( + includesSomeLane(pendingPassiveEffectsLanes, SyncLane) && + root.tag !== LegacyRoot + ) { flushPassiveEffects(); } // Read this again, since a passive effect might have updated it remainingLanes = root.pendingLanes; - if (includesSyncLane(remainingLanes)) { + if (includesSomeLane(remainingLanes, (SyncLane: Lane))) { 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 0d4cf546c6d6e..cd235e7cee306 100644 --- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js +++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js @@ -16,9 +16,8 @@ describe('DebugTracing', () => { let logs; - const SYNC_LANE_STRING = '0b0000000000000000000000000000010'; - const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000'; - const RETRY_LANE_STRING = '0b0000000100000000000000000000000'; + const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000'; + const RETRY_LANE_STRING = '0b0000000010000000000000000000000'; global.IS_REACT_ACT_ENVIRONMENT = true; @@ -88,9 +87,9 @@ describe('DebugTracing', () => { ); expect(logs).toEqual([ - `group: ⚛️ render (${SYNC_LANE_STRING})`, + 'group: ⚛️ render (0b0000000000000000000000000000001)', 'log: ⚛️ Example suspended', - `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`, + 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)', ]); logs.splice(0); @@ -122,9 +121,9 @@ describe('DebugTracing', () => { ); expect(logs).toEqual([ - `group: ⚛️ render (${SYNC_LANE_STRING})`, + 'group: ⚛️ render (0b0000000000000000000000000000001)', 'log: ', - `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`, + 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)', ]); logs.splice(0); @@ -238,7 +237,7 @@ describe('DebugTracing', () => { expect(logs).toEqual([ `group: ⚛️ commit (${DEFAULT_LANE_STRING})`, `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, - `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`, + 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)', `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`, ]); @@ -296,7 +295,7 @@ describe('DebugTracing', () => { expect(logs).toEqual([ `group: ⚛️ commit (${DEFAULT_LANE_STRING})`, `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, - `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`, + 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)', `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`, `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`, ]); From cbca433f4956e1c2aa7968b02e9100da4600ba77 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Mon, 5 Dec 2022 15:26:05 -0500 Subject: [PATCH 2/2] Revert "Force unwind work loop during selective hydration (#25695)" We're reverting the stack of changes that this code belongs to in order to unblock the sync to Meta's internal codebase. We will attempt to re-land once the sync is unblocked. --- ...MServerSelectiveHydration-test.internal.js | 8 ++-- .../src/ReactFiberBeginWork.js | 32 +++---------- .../src/ReactFiberWorkLoop.js | 48 +++---------------- 3 files changed, 18 insertions(+), 70 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js index a8f06a3227b16..3469c4faf0683 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js @@ -1496,10 +1496,12 @@ describe('ReactDOMServerSelectiveHydration', () => { // Start rendering. This will force the first boundary to hydrate // by scheduling it at one higher pri than Idle. expect(Scheduler).toFlushAndYieldThrough([ + // An update was scheduled to force hydrate the boundary, but React will + // continue rendering at Idle until the next time React yields. This is + // fine though because it will switch to the hydration level when it + // re-enters the work loop. 'App', - - // Start hydrating A - 'A', + 'AA', ]); // Hover over A which (could) schedule at one higher pri than Idle. diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index bde65936f1c01..78372d1762916 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -282,14 +282,6 @@ import { const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; -// A special exception that's used to unwind the stack when an update flows -// into a dehydrated boundary. -export const SelectiveHydrationException: mixed = new Error( - "This is not a real error. It's an implementation detail of React's " + - "selective hydration feature. If this leaks into userspace, it's a bug in " + - 'React. Please file an issue.', -); - let didReceiveUpdate: boolean = false; let didWarnAboutBadClass; @@ -2868,16 +2860,6 @@ function updateDehydratedSuspenseComponent( attemptHydrationAtLane, eventTime, ); - - // Throw a special object that signals to the work loop that it should - // interrupt the current render. - // - // Because we're inside a React-only execution stack, we don't - // strictly need to throw here — we could instead modify some internal - // work loop state. But using an exception means we don't need to - // check for this case on every iteration of the work loop. So doing - // it this way moves the check out of the fast path. - throw SelectiveHydrationException; } else { // We have already tried to ping at a higher priority than we're rendering with // so if we got here, we must have failed to hydrate at those levels. We must @@ -2888,17 +2870,15 @@ function updateDehydratedSuspenseComponent( } } - // If we did not selectively hydrate, we'll continue rendering without - // hydrating. Mark this tree as suspended to prevent it from committing - // outside a transition. - // - // This path should only happen if the hydration lane already suspended. - // Currently, it also happens during sync updates because there is no - // hydration lane for sync updates. + // If we have scheduled higher pri work above, this will just abort the render + // since we now have higher priority work. We'll try to infinitely suspend until + // we yield. TODO: We could probably just force yielding earlier instead. + renderDidSuspendDelayIfPossible(); + // If we rendered synchronously, we won't yield so have to render something. + // This will cause us to delete any existing content. // TODO: We should ideally have a sync hydration lane that we can apply to do // a pass where we hydrate this subtree in place using the previous Context and then // reapply the update afterwards. - renderDidSuspendDelayIfPossible(); return retrySuspenseComponentWithoutHydrating( current, workInProgress, diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index 6f86c38a9bc20..0c86cbb324020 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -175,7 +175,6 @@ import { } from './ReactEventPriorities'; import {requestCurrentTransition, NoTransition} from './ReactFiberTransition'; import { - SelectiveHydrationException, beginWork as originalBeginWork, replayFunctionComponent, } from './ReactFiberBeginWork'; @@ -317,14 +316,13 @@ let workInProgress: Fiber | null = null; // The lanes we're rendering let workInProgressRootRenderLanes: Lanes = NoLanes; -opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5 | 6; +opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5; const NotSuspended: SuspendedReason = 0; const SuspendedOnError: SuspendedReason = 1; const SuspendedOnData: SuspendedReason = 2; const SuspendedOnImmediate: SuspendedReason = 3; const SuspendedOnDeprecatedThrowPromise: SuspendedReason = 4; const SuspendedAndReadyToUnwind: SuspendedReason = 5; -const SuspendedOnHydration: SuspendedReason = 6; // When this is true, the work-in-progress fiber just suspended (or errored) and // we've yet to unwind the stack. In some cases, we may yield to the main thread @@ -1799,17 +1797,6 @@ function handleThrow(root, thrownValue): void { workInProgressSuspendedReason = shouldAttemptToSuspendUntilDataResolves() ? SuspendedOnData : SuspendedOnImmediate; - } else if (thrownValue === SelectiveHydrationException) { - // An update flowed into a dehydrated boundary. Before we can apply the - // update, we need to finish hydrating. Interrupt the work-in-progress - // render so we can restart at the hydration lane. - // - // The ideal implementation would be able to switch contexts without - // unwinding the current stack. - // - // We could name this something more general but as of now it's the only - // case where we think this should happen. - workInProgressSuspendedReason = SuspendedOnHydration; } else { // This is a regular error. const isWakeable = @@ -2051,7 +2038,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) { markRenderStarted(lanes); } - outer: do { + do { try { if ( workInProgressSuspendedReason !== NotSuspended && @@ -2067,23 +2054,11 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) { // function and fork the behavior some other way. const unitOfWork = workInProgress; const thrownValue = workInProgressThrownValue; - switch (workInProgressSuspendedReason) { - case SuspendedOnHydration: { - // Selective hydration. An update flowed into a dehydrated tree. - // Interrupt the current render so the work loop can switch to the - // hydration lane. - workInProgress = null; - workInProgressRootExitStatus = RootDidNotComplete; - break outer; - } - default: { - // Continue with the normal work loop. - workInProgressSuspendedReason = NotSuspended; - workInProgressThrownValue = null; - unwindSuspendedUnitOfWork(unitOfWork, thrownValue); - break; - } - } + workInProgressSuspendedReason = NotSuspended; + workInProgressThrownValue = null; + unwindSuspendedUnitOfWork(unitOfWork, thrownValue); + + // Continue with the normal work loop. } workLoopSync(); break; @@ -2241,14 +2216,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) { unwindSuspendedUnitOfWork(unitOfWork, thrownValue); break; } - case SuspendedOnHydration: { - // Selective hydration. An update flowed into a dehydrated tree. - // Interrupt the current render so the work loop can switch to the - // hydration lane. - workInProgress = null; - workInProgressRootExitStatus = RootDidNotComplete; - break outer; - } default: { throw new Error( 'Unexpected SuspendedReason. This is a bug in React.', @@ -3774,7 +3741,6 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) { if ( didSuspendOrErrorWhileHydratingDEV() || originalError === SuspenseException || - originalError === SelectiveHydrationException || (originalError !== null && typeof originalError === 'object' && typeof originalError.then === 'function')