Resubmit Add HydrationSyncLane (#25711)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Submit https://github.com/facebook/react/pull/25698 again after fixing the devtools regression tests in CI. The PR changed lanes representation and some snapshot tests of devtools captures lanes. In devtools tests for older versions, the updated lanes representation no longer matched. The fix is to disable regression tests for those tests. ## How did you test this change? <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> ``` ./scripts/circleci/download_devtools_regression_build.js 18.0 --replaceBuild node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion 18.0 ``` Unrelated to this PR. There was some issue with jest caching when I locally ran that command. it didn't seem to include the @reactVersion transform, but if I manually modified `scripts/jest/preprocessor.js` or ran ` yarn test --clearCache`, the jest test runs correctly.
Tianyu Yao committed
Nov 28, 2022 at 09:13 UTC
8a23def32f9eb7495d6ece67af25fdfbebe42fcd
8 files changed
+532
-444
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+220
-254
@@ -126,37 +126,35 @@ describe('Timeline profiler', () => {
126
setPerformanceMock(null);
127
});
128
129
- // @reactVersion >=18.0
129
it('should mark sync render without suspends or state updates', () => {
130
renderHelper(<div />);
131
132
expect(clearedMarks).toMatchInlineSnapshot(`
133
Array [
135
- "--schedule-render-1",
136
- "--render-start-1",
134
+ "--schedule-render-2",
135
+ "--render-start-2",
136
"--render-stop",
138
- "--commit-start-1",
137
+ "--commit-start-2",
138
"--react-version-<filtered-version>",
139
"--profiler-version-1",
140
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
141
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
143
- "--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",
144
- "--layout-effects-start-1",
142
+ "--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",
143
+ "--layout-effects-start-2",
144
"--layout-effects-stop",
145
"--commit-stop",
146
]
147
`);
148
});
149
151
- // @reactVersion >=18.0
150
it('should mark concurrent render without suspends or state updates', () => {
151
renderRootHelper(<div />);
152
153
expect(clearedMarks).toMatchInlineSnapshot(`
156
- Array [
157
- "--schedule-render-16",
158
- ]
159
- `);
154
+ Array [
155
+ "--schedule-render-32",
156
+ ]
157
+ `);
158
159
clearPendingMarks();
160
@@ -164,22 +162,21 @@ describe('Timeline profiler', () => {
162
163
expect(clearedMarks).toMatchInlineSnapshot(`
164
Array [
167
- "--render-start-16",
165
+ "--render-start-32",
166
"--render-stop",
169
- "--commit-start-16",
167
+ "--commit-start-32",
168
"--react-version-<filtered-version>",
169
"--profiler-version-1",
170
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
171
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
174
- "--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",
175
- "--layout-effects-start-16",
172
+ "--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",
173
+ "--layout-effects-start-32",
174
"--layout-effects-stop",
175
"--commit-stop",
176
]
177
`);
178
});
179
182
- // @reactVersion >=18.0
180
it('should mark render yields', async () => {
181
function Bar() {
182
Scheduler.unstable_yieldValue('Bar');
@@ -199,17 +196,16 @@ describe('Timeline profiler', () => {
196
expect(Scheduler).toFlushAndYieldThrough(['Foo']);
197
198
expect(clearedMarks).toMatchInlineSnapshot(`
202
- Array [
203
- "--schedule-render-64",
204
- "--render-start-64",
205
- "--component-render-start-Foo",
206
- "--component-render-stop",
207
- "--render-yield",
208
- ]
209
- `);
199
+ Array [
200
+ "--schedule-render-128",
201
+ "--render-start-128",
202
+ "--component-render-start-Foo",
203
+ "--component-render-stop",
204
+ "--render-yield",
205
+ ]
206
+ `);
207
});
208
212
- // @reactVersion >=18.0
209
it('should mark sync render with suspense that resolves', async () => {
210
const fakeSuspensePromise = Promise.resolve(true);
211
function Example() {
@@ -224,19 +220,19 @@ describe('Timeline profiler', () => {
220
221
expect(clearedMarks).toMatchInlineSnapshot(`
222
Array [
227
- "--schedule-render-1",
228
- "--render-start-1",
223
+ "--schedule-render-2",
224
+ "--render-start-2",
225
"--component-render-start-Example",
226
"--component-render-stop",
231
- "--suspense-suspend-0-Example-mount-1-",
227
+ "--suspense-suspend-0-Example-mount-2-",
228
"--render-stop",
233
- "--commit-start-1",
229
+ "--commit-start-2",
230
"--react-version-<filtered-version>",
231
"--profiler-version-1",
232
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
233
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
238
- "--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",
239
- "--layout-effects-start-1",
234
+ "--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",
235
+ "--layout-effects-start-2",
236
"--layout-effects-stop",
237
"--commit-stop",
238
]
@@ -252,7 +248,6 @@ describe('Timeline profiler', () => {
248
`);
249
});
250
255
- // @reactVersion >=18.0
251
it('should mark sync render with suspense that rejects', async () => {
252
const fakeSuspensePromise = Promise.reject(new Error('error'));
253
function Example() {
@@ -267,19 +262,19 @@ describe('Timeline profiler', () => {
262
263
expect(clearedMarks).toMatchInlineSnapshot(`
264
Array [
270
- "--schedule-render-1",
271
- "--render-start-1",
265
+ "--schedule-render-2",
266
+ "--render-start-2",
267
"--component-render-start-Example",
268
"--component-render-stop",
274
- "--suspense-suspend-0-Example-mount-1-",
269
+ "--suspense-suspend-0-Example-mount-2-",
270
"--render-stop",
276
- "--commit-start-1",
271
+ "--commit-start-2",
272
"--react-version-<filtered-version>",
273
"--profiler-version-1",
274
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
275
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
281
- "--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",
282
- "--layout-effects-start-1",
276
+ "--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",
277
+ "--layout-effects-start-2",
278
"--layout-effects-stop",
279
"--commit-stop",
280
]
@@ -291,7 +286,6 @@ describe('Timeline profiler', () => {
286
expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
287
});
288
294
- // @reactVersion >=18.0
289
it('should mark concurrent render with suspense that resolves', async () => {
290
const fakeSuspensePromise = Promise.resolve(true);
291
function Example() {
@@ -305,10 +299,10 @@ describe('Timeline profiler', () => {
299
);
300
301
expect(clearedMarks).toMatchInlineSnapshot(`
308
- Array [
309
- "--schedule-render-16",
310
- ]
311
- `);
302
+ Array [
303
+ "--schedule-render-32",
304
+ ]
305
+ `);
306
307
clearPendingMarks();
308
@@ -316,18 +310,18 @@ describe('Timeline profiler', () => {
310
311
expect(clearedMarks).toMatchInlineSnapshot(`
312
Array [
319
- "--render-start-16",
313
+ "--render-start-32",
314
"--component-render-start-Example",
315
"--component-render-stop",
322
- "--suspense-suspend-0-Example-mount-16-",
316
+ "--suspense-suspend-0-Example-mount-32-",
317
"--render-stop",
324
- "--commit-start-16",
318
+ "--commit-start-32",
319
"--react-version-<filtered-version>",
320
"--profiler-version-1",
321
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
322
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
329
- "--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",
330
- "--layout-effects-start-16",
323
+ "--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",
324
+ "--layout-effects-start-32",
325
"--layout-effects-stop",
326
"--commit-stop",
327
]
@@ -343,7 +337,6 @@ describe('Timeline profiler', () => {
337
`);
338
});
339
346
- // @reactVersion >=18.0
340
it('should mark concurrent render with suspense that rejects', async () => {
341
const fakeSuspensePromise = Promise.reject(new Error('error'));
342
function Example() {
@@ -357,10 +350,10 @@ describe('Timeline profiler', () => {
350
);
351
352
expect(clearedMarks).toMatchInlineSnapshot(`
360
- Array [
361
- "--schedule-render-16",
362
- ]
363
- `);
353
+ Array [
354
+ "--schedule-render-32",
355
+ ]
356
+ `);
357
358
clearPendingMarks();
359
@@ -368,18 +361,18 @@ describe('Timeline profiler', () => {
361
362
expect(clearedMarks).toMatchInlineSnapshot(`
363
Array [
371
- "--render-start-16",
364
+ "--render-start-32",
365
"--component-render-start-Example",
366
"--component-render-stop",
374
- "--suspense-suspend-0-Example-mount-16-",
367
+ "--suspense-suspend-0-Example-mount-32-",
368
"--render-stop",
376
- "--commit-start-16",
369
+ "--commit-start-32",
370
"--react-version-<filtered-version>",
371
"--profiler-version-1",
372
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
373
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
381
- "--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",
382
- "--layout-effects-start-16",
374
+ "--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",
375
+ "--layout-effects-start-32",
376
"--layout-effects-stop",
377
"--commit-stop",
378
]
@@ -395,7 +388,6 @@ describe('Timeline profiler', () => {
388
`);
389
});
390
398
- // @reactVersion >=18.0
391
it('should mark cascading class component state updates', () => {
392
class Example extends React.Component {
393
state = {didMount: false};
@@ -410,10 +402,10 @@ describe('Timeline profiler', () => {
402
renderRootHelper(<Example />);
403
404
expect(clearedMarks).toMatchInlineSnapshot(`
413
- Array [
414
- "--schedule-render-16",
415
- ]
416
- `);
405
+ Array [
406
+ "--schedule-render-32",
407
+ ]
408
+ `);
409
410
clearPendingMarks();
411
@@ -421,36 +413,35 @@ describe('Timeline profiler', () => {
413
414
expect(clearedMarks).toMatchInlineSnapshot(`
415
Array [
424
- "--render-start-16",
416
+ "--render-start-32",
417
"--component-render-start-Example",
418
"--component-render-stop",
419
"--render-stop",
428
- "--commit-start-16",
420
+ "--commit-start-32",
421
"--react-version-<filtered-version>",
422
"--profiler-version-1",
423
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
424
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
433
- "--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",
434
- "--layout-effects-start-16",
435
- "--schedule-state-update-1-Example",
425
+ "--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",
426
+ "--layout-effects-start-32",
427
+ "--schedule-state-update-2-Example",
428
"--layout-effects-stop",
437
- "--render-start-1",
429
+ "--render-start-2",
430
"--component-render-start-Example",
431
"--component-render-stop",
432
"--render-stop",
441
- "--commit-start-1",
433
+ "--commit-start-2",
434
"--react-version-<filtered-version>",
435
"--profiler-version-1",
436
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
437
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
446
- "--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",
438
+ "--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",
439
"--commit-stop",
440
"--commit-stop",
441
]
442
`);
443
});
444
453
- // @reactVersion >=18.0
445
it('should mark cascading class component force updates', () => {
446
class Example extends React.Component {
447
componentDidMount() {
@@ -464,10 +455,10 @@ describe('Timeline profiler', () => {
455
renderRootHelper(<Example />);
456
457
expect(clearedMarks).toMatchInlineSnapshot(`
467
- Array [
468
- "--schedule-render-16",
469
- ]
470
- `);
458
+ Array [
459
+ "--schedule-render-32",
460
+ ]
461
+ `);
462
463
clearPendingMarks();
464
@@ -475,36 +466,35 @@ describe('Timeline profiler', () => {
466
467
expect(clearedMarks).toMatchInlineSnapshot(`
468
Array [
478
- "--render-start-16",
469
+ "--render-start-32",
470
"--component-render-start-Example",
471
"--component-render-stop",
472
"--render-stop",
482
- "--commit-start-16",
473
+ "--commit-start-32",
474
"--react-version-<filtered-version>",
475
"--profiler-version-1",
476
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
477
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
487
- "--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",
488
- "--layout-effects-start-16",
489
- "--schedule-forced-update-1-Example",
478
+ "--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",
479
+ "--layout-effects-start-32",
480
+ "--schedule-forced-update-2-Example",
481
"--layout-effects-stop",
491
- "--render-start-1",
482
+ "--render-start-2",
483
"--component-render-start-Example",
484
"--component-render-stop",
485
"--render-stop",
495
- "--commit-start-1",
486
+ "--commit-start-2",
487
"--react-version-<filtered-version>",
488
"--profiler-version-1",
489
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
490
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
500
- "--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",
491
+ "--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",
492
"--commit-stop",
493
"--commit-stop",
494
]
495
`);
496
});
497
507
- // @reactVersion >=18.0
498
it('should mark render phase state updates for class component', () => {
499
class Example extends React.Component {
500
state = {didRender: false};
@@ -519,10 +509,10 @@ describe('Timeline profiler', () => {
509
renderRootHelper(<Example />);
510
511
expect(clearedMarks).toMatchInlineSnapshot(`
522
- Array [
523
- "--schedule-render-16",
524
- ]
525
- `);
512
+ Array [
513
+ "--schedule-render-32",
514
+ ]
515
+ `);
516
517
clearPendingMarks();
518
@@ -540,25 +530,24 @@ describe('Timeline profiler', () => {
530
531
expect(clearedMarks).toMatchInlineSnapshot(`
532
Array [
543
- "--render-start-16",
533
+ "--render-start-32",
534
"--component-render-start-Example",
545
- "--schedule-state-update-16-Example",
535
+ "--schedule-state-update-32-Example",
536
"--component-render-stop",
537
"--render-stop",
548
- "--commit-start-16",
538
+ "--commit-start-32",
539
"--react-version-<filtered-version>",
540
"--profiler-version-1",
541
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
542
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
553
- "--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",
554
- "--layout-effects-start-16",
543
+ "--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",
544
+ "--layout-effects-start-32",
545
"--layout-effects-stop",
546
"--commit-stop",
547
]
548
`);
549
});
550
561
- // @reactVersion >=18.0
551
it('should mark render phase force updates for class component', () => {
552
let forced = false;
553
class Example extends React.Component {
@@ -574,10 +563,10 @@ describe('Timeline profiler', () => {
563
renderRootHelper(<Example />);
564
565
expect(clearedMarks).toMatchInlineSnapshot(`
577
- Array [
578
- "--schedule-render-16",
579
- ]
580
- `);
566
+ Array [
567
+ "--schedule-render-32",
568
+ ]
569
+ `);
570
571
clearPendingMarks();
572
@@ -595,25 +584,24 @@ describe('Timeline profiler', () => {
584
585
expect(clearedMarks).toMatchInlineSnapshot(`
586
Array [
598
- "--render-start-16",
587
+ "--render-start-32",
588
"--component-render-start-Example",
600
- "--schedule-forced-update-16-Example",
589
+ "--schedule-forced-update-32-Example",
590
"--component-render-stop",
591
"--render-stop",
603
- "--commit-start-16",
592
+ "--commit-start-32",
593
"--react-version-<filtered-version>",
594
"--profiler-version-1",
595
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
596
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
608
- "--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",
609
- "--layout-effects-start-16",
597
+ "--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",
598
+ "--layout-effects-start-32",
599
"--layout-effects-stop",
600
"--commit-stop",
601
]
602
`);
603
});
604
616
- // @reactVersion >=18.0
605
it('should mark cascading layout updates', () => {
606
function Example() {
607
const [didMount, setDidMount] = React.useState(false);
@@ -626,10 +614,10 @@ describe('Timeline profiler', () => {
614
renderRootHelper(<Example />);
615
616
expect(clearedMarks).toMatchInlineSnapshot(`
629
- Array [
630
- "--schedule-render-16",
631
- ]
632
- `);
617
+ Array [
618
+ "--schedule-render-32",
619
+ ]
620
+ `);
621
622
clearPendingMarks();
623
@@ -637,38 +625,37 @@ describe('Timeline profiler', () => {
625
626
expect(clearedMarks).toMatchInlineSnapshot(`
627
Array [
640
- "--render-start-16",
628
+ "--render-start-32",
629
"--component-render-start-Example",
630
"--component-render-stop",
631
"--render-stop",
644
- "--commit-start-16",
632
+ "--commit-start-32",
633
"--react-version-<filtered-version>",
634
"--profiler-version-1",
635
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
636
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
649
- "--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",
650
- "--layout-effects-start-16",
637
+ "--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",
638
+ "--layout-effects-start-32",
639
"--component-layout-effect-mount-start-Example",
652
- "--schedule-state-update-1-Example",
640
+ "--schedule-state-update-2-Example",
641
"--component-layout-effect-mount-stop",
642
"--layout-effects-stop",
655
- "--render-start-1",
643
+ "--render-start-2",
644
"--component-render-start-Example",
645
"--component-render-stop",
646
"--render-stop",
659
- "--commit-start-1",
647
+ "--commit-start-2",
648
"--react-version-<filtered-version>",
649
"--profiler-version-1",
650
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
651
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
664
- "--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",
652
+ "--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",
653
"--commit-stop",
654
"--commit-stop",
655
]
656
`);
657
});
658
671
- // @reactVersion >=18.0
659
it('should mark cascading passive updates', () => {
660
function Example() {
661
const [didMount, setDidMount] = React.useState(false);
@@ -684,41 +671,40 @@ describe('Timeline profiler', () => {
671
672
expect(clearedMarks).toMatchInlineSnapshot(`
673
Array [
687
- "--schedule-render-16",
688
- "--render-start-16",
674
+ "--schedule-render-32",
675
+ "--render-start-32",
676
"--component-render-start-Example",
677
"--component-render-stop",
678
"--render-stop",
692
- "--commit-start-16",
679
+ "--commit-start-32",
680
"--react-version-<filtered-version>",
681
"--profiler-version-1",
682
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
683
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
697
- "--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",
698
- "--layout-effects-start-16",
684
+ "--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",
685
+ "--layout-effects-start-32",
686
"--layout-effects-stop",
687
"--commit-stop",
701
- "--passive-effects-start-16",
688
+ "--passive-effects-start-32",
689
"--component-passive-effect-mount-start-Example",
703
- "--schedule-state-update-16-Example",
690
+ "--schedule-state-update-32-Example",
691
"--component-passive-effect-mount-stop",
692
"--passive-effects-stop",
706
- "--render-start-16",
693
+ "--render-start-32",
694
"--component-render-start-Example",
695
"--component-render-stop",
696
"--render-stop",
710
- "--commit-start-16",
697
+ "--commit-start-32",
698
"--react-version-<filtered-version>",
699
"--profiler-version-1",
700
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
701
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
715
- "--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",
702
+ "--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",
703
"--commit-stop",
704
]
705
`);
706
});
707
721
- // @reactVersion >=18.0
708
it('should mark render phase updates', () => {
709
function Example() {
710
const [didRender, setDidRender] = React.useState(false);
@@ -734,26 +720,25 @@ describe('Timeline profiler', () => {
720
721
expect(clearedMarks).toMatchInlineSnapshot(`
722
Array [
737
- "--schedule-render-16",
738
- "--render-start-16",
723
+ "--schedule-render-32",
724
+ "--render-start-32",
725
"--component-render-start-Example",
740
- "--schedule-state-update-16-Example",
726
+ "--schedule-state-update-32-Example",
727
"--component-render-stop",
728
"--render-stop",
743
- "--commit-start-16",
729
+ "--commit-start-32",
730
"--react-version-<filtered-version>",
731
"--profiler-version-1",
732
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
733
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
748
- "--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",
749
- "--layout-effects-start-16",
734
+ "--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",
735
+ "--layout-effects-start-32",
736
"--layout-effects-stop",
737
"--commit-stop",
738
]
739
`);
740
});
741
756
- // @reactVersion >=18.0
742
it('should mark sync render that throws', async () => {
743
spyOn(console, 'error');
744
@@ -782,8 +767,8 @@ describe('Timeline profiler', () => {
767
768
expect(clearedMarks).toMatchInlineSnapshot(`
769
Array [
785
- "--schedule-render-1",
786
- "--render-start-1",
770
+ "--schedule-render-2",
771
+ "--render-start-2",
772
"--component-render-start-ErrorBoundary",
773
"--component-render-stop",
774
"--component-render-start-ExampleThatThrows",
@@ -791,32 +776,31 @@ describe('Timeline profiler', () => {
776
"--component-render-stop",
777
"--error-ExampleThatThrows-mount-Expected error",
778
"--render-stop",
794
- "--commit-start-1",
779
+ "--commit-start-2",
780
"--react-version-<filtered-version>",
781
"--profiler-version-1",
782
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
783
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
799
- "--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",
800
- "--layout-effects-start-1",
801
- "--schedule-state-update-1-ErrorBoundary",
784
+ "--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",
785
+ "--layout-effects-start-2",
786
+ "--schedule-state-update-2-ErrorBoundary",
787
"--layout-effects-stop",
788
"--commit-stop",
804
- "--render-start-1",
789
+ "--render-start-2",
790
"--component-render-start-ErrorBoundary",
791
"--component-render-stop",
792
"--render-stop",
808
- "--commit-start-1",
793
+ "--commit-start-2",
794
"--react-version-<filtered-version>",
795
"--profiler-version-1",
796
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
797
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
813
- "--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",
798
+ "--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",
799
"--commit-stop",
800
]
801
`);
802
});
803
819
- // @reactVersion >=18.0
804
it('should mark concurrent render that throws', async () => {
805
spyOn(console, 'error');
806
@@ -845,10 +829,10 @@ describe('Timeline profiler', () => {
829
);
830
831
expect(clearedMarks).toMatchInlineSnapshot(`
848
- Array [
849
- "--schedule-render-16",
850
- ]
851
- `);
832
+ Array [
833
+ "--schedule-render-32",
834
+ ]
835
+ `);
836
837
clearPendingMarks();
838
@@ -856,7 +840,7 @@ describe('Timeline profiler', () => {
840
841
expect(clearedMarks).toMatchInlineSnapshot(`
842
Array [
859
- "--render-start-16",
843
+ "--render-start-32",
844
"--component-render-start-ErrorBoundary",
845
"--component-render-stop",
846
"--component-render-start-ExampleThatThrows",
@@ -864,7 +848,7 @@ describe('Timeline profiler', () => {
848
"--component-render-stop",
849
"--error-ExampleThatThrows-mount-Expected error",
850
"--render-stop",
867
- "--render-start-16",
851
+ "--render-start-32",
852
"--component-render-start-ErrorBoundary",
853
"--component-render-stop",
854
"--component-render-start-ExampleThatThrows",
@@ -872,32 +856,31 @@ describe('Timeline profiler', () => {
856
"--component-render-stop",
857
"--error-ExampleThatThrows-mount-Expected error",
858
"--render-stop",
875
- "--commit-start-16",
859
+ "--commit-start-32",
860
"--react-version-<filtered-version>",
861
"--profiler-version-1",
862
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
863
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
880
- "--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",
881
- "--layout-effects-start-16",
882
- "--schedule-state-update-1-ErrorBoundary",
864
+ "--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",
865
+ "--layout-effects-start-32",
866
+ "--schedule-state-update-2-ErrorBoundary",
867
"--layout-effects-stop",
884
- "--render-start-1",
868
+ "--render-start-2",
869
"--component-render-start-ErrorBoundary",
870
"--component-render-stop",
871
"--render-stop",
888
- "--commit-start-1",
872
+ "--commit-start-2",
873
"--react-version-<filtered-version>",
874
"--profiler-version-1",
875
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
876
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
893
- "--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",
877
+ "--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",
878
"--commit-stop",
879
"--commit-stop",
880
]
881
`);
882
});
883
900
- // @reactVersion >=18.0
884
it('should mark passive and layout effects', async () => {
885
function ComponentWithEffects() {
886
React.useLayoutEffect(() => {
@@ -947,18 +930,18 @@ describe('Timeline profiler', () => {
930
931
expect(clearedMarks).toMatchInlineSnapshot(`
932
Array [
950
- "--schedule-render-16",
951
- "--render-start-16",
933
+ "--schedule-render-32",
934
+ "--render-start-32",
935
"--component-render-start-ComponentWithEffects",
936
"--component-render-stop",
937
"--render-stop",
955
- "--commit-start-16",
938
+ "--commit-start-32",
939
"--react-version-<filtered-version>",
940
"--profiler-version-1",
941
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
942
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
960
- "--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",
961
- "--layout-effects-start-16",
943
+ "--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",
944
+ "--layout-effects-start-32",
945
"--component-layout-effect-mount-start-ComponentWithEffects",
946
"--component-layout-effect-mount-stop",
947
"--component-layout-effect-mount-start-ComponentWithEffects",
@@ -977,17 +960,17 @@ describe('Timeline profiler', () => {
960
]);
961
962
expect(clearedMarks).toMatchInlineSnapshot(`
980
- Array [
981
- "--passive-effects-start-16",
982
- "--component-passive-effect-mount-start-ComponentWithEffects",
983
- "--component-passive-effect-mount-stop",
984
- "--component-passive-effect-mount-start-ComponentWithEffects",
985
- "--component-passive-effect-mount-stop",
986
- "--component-passive-effect-mount-start-ComponentWithEffects",
987
- "--component-passive-effect-mount-stop",
988
- "--passive-effects-stop",
989
- ]
990
- `);
963
+ Array [
964
+ "--passive-effects-start-32",
965
+ "--component-passive-effect-mount-start-ComponentWithEffects",
966
+ "--component-passive-effect-mount-stop",
967
+ "--component-passive-effect-mount-start-ComponentWithEffects",
968
+ "--component-passive-effect-mount-stop",
969
+ "--component-passive-effect-mount-start-ComponentWithEffects",
970
+ "--component-passive-effect-mount-stop",
971
+ "--passive-effects-stop",
972
+ ]
973
+ `);
974
975
clearPendingMarks();
976
@@ -1005,22 +988,22 @@ describe('Timeline profiler', () => {
988
989
expect(clearedMarks).toMatchInlineSnapshot(`
990
Array [
1008
- "--schedule-render-1",
1009
- "--render-start-1",
991
+ "--schedule-render-2",
992
+ "--render-start-2",
993
"--render-stop",
1011
- "--commit-start-1",
994
+ "--commit-start-2",
995
"--react-version-<filtered-version>",
996
"--profiler-version-1",
997
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
998
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1016
- "--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",
999
+ "--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",
1000
"--component-layout-effect-unmount-start-ComponentWithEffects",
1001
"--component-layout-effect-unmount-stop",
1002
"--component-layout-effect-unmount-start-ComponentWithEffects",
1003
"--component-layout-effect-unmount-stop",
1021
- "--layout-effects-start-1",
1004
+ "--layout-effects-start-2",
1005
"--layout-effects-stop",
1023
- "--passive-effects-start-1",
1006
+ "--passive-effects-start-2",
1007
"--component-passive-effect-unmount-start-ComponentWithEffects",
1008
"--component-passive-effect-unmount-stop",
1009
"--component-passive-effect-unmount-start-ComponentWithEffects",
@@ -1034,39 +1017,36 @@ describe('Timeline profiler', () => {
1017
});
1018
1019
describe('lane labels', () => {
1037
- // @reactVersion >=18.0
1020
it('regression test SyncLane', () => {
1021
renderHelper(<div />);
1022
1023
expect(clearedMarks).toMatchInlineSnapshot(`
1024
Array [
1043
- "--schedule-render-1",
1044
- "--render-start-1",
1025
+ "--schedule-render-2",
1026
+ "--render-start-2",
1027
"--render-stop",
1046
- "--commit-start-1",
1028
+ "--commit-start-2",
1029
"--react-version-<filtered-version>",
1030
"--profiler-version-1",
1031
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1032
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1051
- "--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",
1052
- "--layout-effects-start-1",
1033
+ "--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",
1034
+ "--layout-effects-start-2",
1035
"--layout-effects-stop",
1036
"--commit-stop",
1037
]
1038
`);
1039
});
1040
1059
- // @reactVersion >=18.0
1041
it('regression test DefaultLane', () => {
1042
renderRootHelper(<div />);
1043
expect(clearedMarks).toMatchInlineSnapshot(`
1063
- Array [
1064
- "--schedule-render-16",
1065
- ]
1066
- `);
1044
+ Array [
1045
+ "--schedule-render-32",
1046
+ ]
1047
+ `);
1048
});
1049
1069
- // @reactVersion >=18.0
1050
it('regression test InputDiscreteLane', async () => {
1051
const targetRef = React.createRef(null);
1052
@@ -1090,25 +1070,24 @@ describe('Timeline profiler', () => {
1070
1071
expect(clearedMarks).toMatchInlineSnapshot(`
1072
Array [
1093
- "--schedule-state-update-1-App",
1094
- "--render-start-1",
1073
+ "--schedule-state-update-2-App",
1074
+ "--render-start-2",
1075
"--component-render-start-App",
1076
"--component-render-stop",
1077
"--render-stop",
1098
- "--commit-start-1",
1078
+ "--commit-start-2",
1079
"--react-version-<filtered-version>",
1080
"--profiler-version-1",
1081
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1082
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1103
- "--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",
1104
- "--layout-effects-start-1",
1083
+ "--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",
1084
+ "--layout-effects-start-2",
1085
"--layout-effects-stop",
1086
"--commit-stop",
1087
]
1088
`);
1089
});
1090
1111
- // @reactVersion >=18.0
1091
it('regression test InputContinuousLane', async () => {
1092
const targetRef = React.createRef(null);
1093
@@ -1131,18 +1110,18 @@ describe('Timeline profiler', () => {
1110
1111
expect(clearedMarks).toMatchInlineSnapshot(`
1112
Array [
1134
- "--schedule-state-update-4-App",
1135
- "--render-start-4",
1113
+ "--schedule-state-update-8-App",
1114
+ "--render-start-8",
1115
"--component-render-start-App",
1116
"--component-render-stop",
1117
"--render-stop",
1139
- "--commit-start-4",
1118
+ "--commit-start-8",
1119
"--react-version-<filtered-version>",
1120
"--profiler-version-1",
1121
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1122
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1144
- "--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",
1145
- "--layout-effects-start-4",
1123
+ "--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",
1124
+ "--layout-effects-start-8",
1125
"--layout-effects-stop",
1126
"--commit-stop",
1127
]
@@ -1205,7 +1184,6 @@ describe('Timeline profiler', () => {
1184
utils.act(() => store.profilerStore.startProfiling());
1185
});
1186
1208
- // @reactVersion >=18.0
1187
it('should mark sync render without suspends or state updates', () => {
1188
renderHelper(<div />);
1189
@@ -1213,7 +1191,7 @@ describe('Timeline profiler', () => {
1191
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1192
Array [
1193
Object {
1216
- "lanes": "0b0000000000000000000000000000001",
1194
+ "lanes": "0b0000000000000000000000000000010",
1195
"timestamp": 10,
1196
"type": "schedule-render",
1197
"warning": null,
@@ -1222,7 +1200,6 @@ describe('Timeline profiler', () => {
1200
`);
1201
});
1202
1225
- // @reactVersion >=18.0
1203
it('should mark concurrent render without suspends or state updates', () => {
1204
utils.act(() => renderRootHelper(<div />));
1205
@@ -1230,7 +1207,7 @@ describe('Timeline profiler', () => {
1207
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1208
Array [
1209
Object {
1233
- "lanes": "0b0000000000000000000000000010000",
1210
+ "lanes": "0b0000000000000000000000000100000",
1211
"timestamp": 10,
1212
"type": "schedule-render",
1213
"warning": null,
@@ -1239,7 +1216,6 @@ describe('Timeline profiler', () => {
1216
`);
1217
});
1218
1242
- // @reactVersion >=18.0
1219
it('should mark concurrent render without suspends or state updates', () => {
1220
let updaterFn;
1221
@@ -1272,7 +1248,7 @@ describe('Timeline profiler', () => {
1248
"componentName": "Example",
1249
"componentStack": "
1250
in Example (at **)",
1275
- "lanes": "0b0000000000000000000000000000100",
1251
+ "lanes": "0b0000000000000000000000000001000",
1252
"timestamp": 10,
1253
"type": "schedule-state-update",
1254
"warning": null,
@@ -1281,7 +1257,7 @@ describe('Timeline profiler', () => {
1257
"componentName": "Example",
1258
"componentStack": "
1259
in Example (at **)",
1284
- "lanes": "0b0000000000000000000000001000000",
1260
+ "lanes": "0b0000000000000000000000010000000",
1261
"timestamp": 10,
1262
"type": "schedule-state-update",
1263
"warning": null,
@@ -1290,7 +1266,7 @@ describe('Timeline profiler', () => {
1266
"componentName": "Example",
1267
"componentStack": "
1268
in Example (at **)",
1293
- "lanes": "0b0000000000000000000000001000000",
1269
+ "lanes": "0b0000000000000000000000010000000",
1270
"timestamp": 10,
1271
"type": "schedule-state-update",
1272
"warning": null,
@@ -1299,7 +1275,7 @@ describe('Timeline profiler', () => {
1275
"componentName": "Example",
1276
"componentStack": "
1277
in Example (at **)",
1302
- "lanes": "0b0000000000000000000000000010000",
1278
+ "lanes": "0b0000000000000000000000000100000",
1279
"timestamp": 10,
1280
"type": "schedule-state-update",
1281
"warning": null,
@@ -1586,7 +1562,6 @@ describe('Timeline profiler', () => {
1562
expect(timelineData.componentMeasures).toHaveLength(2);
1563
});
1564
1589
- // @reactVersion >=18.0
1565
it('should mark cascading class component state updates', () => {
1566
class Example extends React.Component {
1567
state = {didMount: false};
@@ -1629,7 +1604,7 @@ describe('Timeline profiler', () => {
1604
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1605
Array [
1606
Object {
1632
- "lanes": "0b0000000000000000000000000010000",
1607
+ "lanes": "0b0000000000000000000000000100000",
1608
"timestamp": 10,
1609
"type": "schedule-render",
1610
"warning": null,
@@ -1638,7 +1613,7 @@ describe('Timeline profiler', () => {
1613
"componentName": "Example",
1614
"componentStack": "
1615
in Example (at **)",
1641
- "lanes": "0b0000000000000000000000000000001",
1616
+ "lanes": "0b0000000000000000000000000000010",
1617
"timestamp": 20,
1618
"type": "schedule-state-update",
1619
"warning": null,
@@ -1647,7 +1622,6 @@ describe('Timeline profiler', () => {
1622
`);
1623
});
1624
1650
- // @reactVersion >=18.0
1625
it('should mark cascading class component force updates', () => {
1626
let forced = false;
1627
class Example extends React.Component {
@@ -1689,14 +1663,14 @@ describe('Timeline profiler', () => {
1663
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1664
Array [
1665
Object {
1692
- "lanes": "0b0000000000000000000000000010000",
1666
+ "lanes": "0b0000000000000000000000000100000",
1667
"timestamp": 10,
1668
"type": "schedule-render",
1669
"warning": null,
1670
},
1671
Object {
1672
"componentName": "Example",
1699
- "lanes": "0b0000000000000000000000000000001",
1673
+ "lanes": "0b0000000000000000000000000000010",
1674
"timestamp": 20,
1675
"type": "schedule-force-update",
1676
"warning": null,
@@ -1705,7 +1679,6 @@ describe('Timeline profiler', () => {
1679
`);
1680
});
1681
1708
- // @reactVersion >=18.0
1682
it('should mark render phase state updates for class component', () => {
1683
class Example extends React.Component {
1684
state = {didRender: false};
@@ -1758,7 +1731,7 @@ describe('Timeline profiler', () => {
1731
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1732
Array [
1733
Object {
1761
- "lanes": "0b0000000000000000000000000010000",
1734
+ "lanes": "0b0000000000000000000000000100000",
1735
"timestamp": 10,
1736
"type": "schedule-render",
1737
"warning": null,
@@ -1767,7 +1740,7 @@ describe('Timeline profiler', () => {
1740
"componentName": "Example",
1741
"componentStack": "
1742
in Example (at **)",
1770
- "lanes": "0b0000000000000000000000000010000",
1743
+ "lanes": "0b0000000000000000000000000100000",
1744
"timestamp": 10,
1745
"type": "schedule-state-update",
1746
"warning": null,
@@ -1776,7 +1749,6 @@ describe('Timeline profiler', () => {
1749
`);
1750
});
1751
1779
- // @reactVersion >=18.0
1752
it('should mark render phase force updates for class component', () => {
1753
let forced = false;
1754
class Example extends React.Component {
@@ -1828,14 +1800,14 @@ describe('Timeline profiler', () => {
1800
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1801
Array [
1802
Object {
1831
- "lanes": "0b0000000000000000000000000010000",
1803
+ "lanes": "0b0000000000000000000000000100000",
1804
"timestamp": 10,
1805
"type": "schedule-render",
1806
"warning": null,
1807
},
1808
Object {
1809
"componentName": "Example",
1838
- "lanes": "0b0000000000000000000000000010000",
1810
+ "lanes": "0b0000000000000000000000000100000",
1811
"timestamp": 20,
1812
"type": "schedule-force-update",
1813
"warning": null,
@@ -1844,7 +1816,6 @@ describe('Timeline profiler', () => {
1816
`);
1817
});
1818
1847
- // @reactVersion >=18.0
1819
it('should mark cascading layout updates', () => {
1820
function Example() {
1821
const [didMount, setDidMount] = React.useState(false);
@@ -1891,7 +1862,7 @@ describe('Timeline profiler', () => {
1862
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1863
Array [
1864
Object {
1894
- "lanes": "0b0000000000000000000000000010000",
1865
+ "lanes": "0b0000000000000000000000000100000",
1866
"timestamp": 10,
1867
"type": "schedule-render",
1868
"warning": null,
@@ -1900,7 +1871,7 @@ describe('Timeline profiler', () => {
1871
"componentName": "Example",
1872
"componentStack": "
1873
in Example (at **)",
1903
- "lanes": "0b0000000000000000000000000000001",
1874
+ "lanes": "0b0000000000000000000000000000010",
1875
"timestamp": 21,
1876
"type": "schedule-state-update",
1877
"warning": null,
@@ -1909,7 +1880,6 @@ describe('Timeline profiler', () => {
1880
`);
1881
});
1882
1912
- // @reactVersion >=18.0
1883
it('should mark cascading passive updates', () => {
1884
function Example() {
1885
const [didMount, setDidMount] = React.useState(false);
@@ -1955,7 +1925,7 @@ describe('Timeline profiler', () => {
1925
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1926
Array [
1927
Object {
1958
- "lanes": "0b0000000000000000000000000010000",
1928
+ "lanes": "0b0000000000000000000000000100000",
1929
"timestamp": 10,
1930
"type": "schedule-render",
1931
"warning": null,
@@ -1964,7 +1934,7 @@ describe('Timeline profiler', () => {
1934
"componentName": "Example",
1935
"componentStack": "
1936
in Example (at **)",
1967
- "lanes": "0b0000000000000000000000000010000",
1937
+ "lanes": "0b0000000000000000000000000100000",
1938
"timestamp": 21,
1939
"type": "schedule-state-update",
1940
"warning": null,
@@ -1973,7 +1943,6 @@ describe('Timeline profiler', () => {
1943
`);
1944
});
1945
1976
- // @reactVersion >=18.0
1946
it('should mark render phase updates', () => {
1947
function Example() {
1948
const [didRender, setDidRender] = React.useState(false);
@@ -2005,7 +1974,7 @@ describe('Timeline profiler', () => {
1974
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1975
Array [
1976
Object {
2008
- "lanes": "0b0000000000000000000000000010000",
1977
+ "lanes": "0b0000000000000000000000000100000",
1978
"timestamp": 10,
1979
"type": "schedule-render",
1980
"warning": null,
@@ -2014,7 +1983,7 @@ describe('Timeline profiler', () => {
1983
"componentName": "Example",
1984
"componentStack": "
1985
in Example (at **)",
2017
- "lanes": "0b0000000000000000000000000010000",
1986
+ "lanes": "0b0000000000000000000000000100000",
1987
"timestamp": 20,
1988
"type": "schedule-state-update",
1989
"warning": null,
@@ -2023,7 +1992,6 @@ describe('Timeline profiler', () => {
1992
`);
1993
});
1994
2026
- // @reactVersion >=18.0
1995
it('should mark sync render that throws', async () => {
1996
spyOn(console, 'error');
1997
@@ -2090,7 +2058,7 @@ describe('Timeline profiler', () => {
2058
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2059
Array [
2060
Object {
2093
- "lanes": "0b0000000000000000000000000000001",
2061
+ "lanes": "0b0000000000000000000000000000010",
2062
"timestamp": 10,
2063
"type": "schedule-render",
2064
"warning": null,
@@ -2099,7 +2067,7 @@ describe('Timeline profiler', () => {
2067
"componentName": "ErrorBoundary",
2068
"componentStack": "
2069
in ErrorBoundary (at **)",
2102
- "lanes": "0b0000000000000000000000000000001",
2070
+ "lanes": "0b0000000000000000000000000000010",
2071
"timestamp": 20,
2072
"type": "schedule-state-update",
2073
"warning": null,
@@ -2119,7 +2087,6 @@ describe('Timeline profiler', () => {
2087
`);
2088
});
2089
2122
- // @reactVersion >=18.0
2090
it('should mark concurrent render that throws', async () => {
2091
spyOn(console, 'error');
2092
@@ -2204,7 +2171,7 @@ describe('Timeline profiler', () => {
2171
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2172
Array [
2173
Object {
2207
- "lanes": "0b0000000000000000000000000010000",
2174
+ "lanes": "0b0000000000000000000000000100000",
2175
"timestamp": 10,
2176
"type": "schedule-render",
2177
"warning": null,
@@ -2213,7 +2180,7 @@ describe('Timeline profiler', () => {
2180
"componentName": "ErrorBoundary",
2181
"componentStack": "
2182
in ErrorBoundary (at **)",
2216
- "lanes": "0b0000000000000000000000000000001",
2183
+ "lanes": "0b0000000000000000000000000000010",
2184
"timestamp": 30,
2185
"type": "schedule-state-update",
2186
"warning": null,
@@ -2240,7 +2207,6 @@ describe('Timeline profiler', () => {
2207
`);
2208
});
2209
2243
- // @reactVersion >=18.0
2210
it('should mark passive and layout effects', async () => {
2211
function ComponentWithEffects() {
2212
React.useLayoutEffect(() => {
@@ -2395,7 +2361,7 @@ describe('Timeline profiler', () => {
2361
"batchUID": 1,
2362
"depth": 0,
2363
"duration": 0,
2398
- "lanes": "0b0000000000000000000000000010000",
2364
+ "lanes": "0b0000000000000000000000000100000",
2365
"timestamp": 10,
2366
"type": "render-idle",
2367
},
@@ -2403,7 +2369,7 @@ describe('Timeline profiler', () => {
2369
"batchUID": 1,
2370
"depth": 0,
2371
"duration": 0,
2406
- "lanes": "0b0000000000000000000000000010000",
2372
+ "lanes": "0b0000000000000000000000000100000",
2373
"timestamp": 10,
2374
"type": "render",
2375
},
@@ -2411,7 +2377,7 @@ describe('Timeline profiler', () => {
2377
"batchUID": 1,
2378
"depth": 0,
2379
"duration": 0,
2414
- "lanes": "0b0000000000000000000000000010000",
2380
+ "lanes": "0b0000000000000000000000000100000",
2381
"timestamp": 10,
2382
"type": "commit",
2383
},
@@ -2419,7 +2385,7 @@ describe('Timeline profiler', () => {
2385
"batchUID": 1,
2386
"depth": 1,
2387
"duration": 0,
2422
- "lanes": "0b0000000000000000000000000010000",
2388
+ "lanes": "0b0000000000000000000000000100000",
2389
"timestamp": 10,
2390
"type": "layout-effects",
2391
},
@@ -2427,7 +2393,7 @@ describe('Timeline profiler', () => {
2393
"batchUID": 1,
2394
"depth": 0,
2395
"duration": 0,
2430
- "lanes": "0b0000000000000000000000000010000",
2396
+ "lanes": "0b0000000000000000000000000100000",
2397
"timestamp": 10,
2398
"type": "passive-effects",
2399
},
@@ -2437,7 +2403,7 @@ describe('Timeline profiler', () => {
2403
"batchUID": 2,
2404
"depth": 0,
2405
"duration": 0,
2440
- "lanes": "0b0000000000000000000000000000001",
2406
+ "lanes": "0b0000000000000000000000000000010",
2407
"timestamp": 10,
2408
"type": "render-idle",
2409
},
@@ -2445,7 +2411,7 @@ describe('Timeline profiler', () => {
2411
"batchUID": 2,
2412
"depth": 0,
2413
"duration": 0,
2448
- "lanes": "0b0000000000000000000000000000001",
2414
+ "lanes": "0b0000000000000000000000000000010",
2415
"timestamp": 10,
2416
"type": "render",
2417
},
@@ -2453,7 +2419,7 @@ describe('Timeline profiler', () => {
2419
"batchUID": 2,
2420
"depth": 0,
2421
"duration": 0,
2456
- "lanes": "0b0000000000000000000000000000001",
2422
+ "lanes": "0b0000000000000000000000000000010",
2423
"timestamp": 10,
2424
"type": "commit",
2425
},
@@ -2461,7 +2427,7 @@ describe('Timeline profiler', () => {
2427
"batchUID": 2,
2428
"depth": 1,
2429
"duration": 0,
2464
- "lanes": "0b0000000000000000000000000000001",
2430
+ "lanes": "0b0000000000000000000000000000010",
2431
"timestamp": 10,
2432
"type": "layout-effects",
2433
},
@@ -2469,7 +2435,7 @@ describe('Timeline profiler', () => {
2435
"batchUID": 2,
2436
"depth": 1,
2437
"duration": 0,
2472
- "lanes": "0b0000000000000000000000000000001",
2438
+ "lanes": "0b0000000000000000000000000000010",
2439
"timestamp": 10,
2440
"type": "passive-effects",
2441
},
@@ -2505,7 +2471,7 @@ describe('Timeline profiler', () => {
2471
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2472
Array [
2473
Object {
2508
- "lanes": "0b0000000000000000000000000010000",
2474
+ "lanes": "0b0000000000000000000000000100000",
2475
"timestamp": 10,
2476
"type": "schedule-render",
2477
"warning": null,
@@ -2515,7 +2481,7 @@ describe('Timeline profiler', () => {
2481
"componentStack": "
2482
in Child (at **)
2483
in CommponentWithChildren (at **)",
2518
- "lanes": "0b0000000000000000000000000010000",
2484
+ "lanes": "0b0000000000000000000000000100000",
2485
"timestamp": 10,
2486
"type": "schedule-state-update",
2487
"warning": null,
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+86
-90
@@ -613,7 +613,6 @@ describe('Timeline profiler', () => {
613
`);
614
});
615
616
- // @reactVersion >= 18.0
616
it('should process a sample legacy render sequence', async () => {
617
utils.legacyRender(<div />, document.createElement('div'));
618
@@ -629,7 +628,7 @@ describe('Timeline profiler', () => {
628
"batchUID": 0,
629
"depth": 0,
630
"duration": 0.01,
632
- "lanes": "0b0000000000000000000000000000000",
631
+ "lanes": "0b0000000000000000000000000000001",
632
"timestamp": 0.006,
633
"type": "render-idle",
634
},
@@ -637,7 +636,7 @@ describe('Timeline profiler', () => {
636
"batchUID": 0,
637
"depth": 0,
638
"duration": 0.001,
640
- "lanes": "0b0000000000000000000000000000000",
639
+ "lanes": "0b0000000000000000000000000000001",
640
"timestamp": 0.006,
641
"type": "render",
642
},
@@ -645,7 +644,7 @@ describe('Timeline profiler', () => {
644
"batchUID": 0,
645
"depth": 0,
646
"duration": 0.008,
648
- "lanes": "0b0000000000000000000000000000000",
647
+ "lanes": "0b0000000000000000000000000000001",
648
"timestamp": 0.008,
649
"type": "commit",
650
},
@@ -653,7 +652,7 @@ describe('Timeline profiler', () => {
652
"batchUID": 0,
653
"depth": 1,
654
"duration": 0.001,
656
- "lanes": "0b0000000000000000000000000000000",
655
+ "lanes": "0b0000000000000000000000000000001",
656
"timestamp": 0.014,
657
"type": "layout-effects",
658
},
@@ -714,12 +713,13 @@ describe('Timeline profiler', () => {
713
30 => "Offscreen",
714
},
715
"laneToReactMeasureMap": Map {
717
- 0 => Array [
716
+ 0 => Array [],
717
+ 1 => Array [
718
Object {
719
"batchUID": 0,
720
"depth": 0,
721
"duration": 0.01,
722
- "lanes": "0b0000000000000000000000000000000",
722
+ "lanes": "0b0000000000000000000000000000001",
723
"timestamp": 0.006,
724
"type": "render-idle",
725
},
@@ -727,7 +727,7 @@ describe('Timeline profiler', () => {
727
"batchUID": 0,
728
"depth": 0,
729
"duration": 0.001,
730
- "lanes": "0b0000000000000000000000000000000",
730
+ "lanes": "0b0000000000000000000000000000001",
731
"timestamp": 0.006,
732
"type": "render",
733
},
@@ -735,7 +735,7 @@ describe('Timeline profiler', () => {
735
"batchUID": 0,
736
"depth": 0,
737
"duration": 0.008,
738
- "lanes": "0b0000000000000000000000000000000",
738
+ "lanes": "0b0000000000000000000000000000001",
739
"timestamp": 0.008,
740
"type": "commit",
741
},
@@ -743,12 +743,11 @@ describe('Timeline profiler', () => {
743
"batchUID": 0,
744
"depth": 1,
745
"duration": 0.001,
746
- "lanes": "0b0000000000000000000000000000000",
746
+ "lanes": "0b0000000000000000000000000000001",
747
"timestamp": 0.014,
748
"type": "layout-effects",
749
},
750
],
751
- 1 => Array [],
751
2 => Array [],
752
3 => Array [],
753
4 => Array [],
@@ -785,7 +784,7 @@ describe('Timeline profiler', () => {
784
"reactVersion": "<filtered-version>",
785
"schedulingEvents": Array [
786
Object {
788
- "lanes": "0b0000000000000000000000000000000",
787
+ "lanes": "0b0000000000000000000000000000001",
788
"timestamp": 0.005,
789
"type": "schedule-render",
790
"warning": null,
@@ -800,7 +799,6 @@ describe('Timeline profiler', () => {
799
`);
800
});
801
803
- // @reactVersion >= 18.0
802
it('should process a sample createRoot render sequence', async () => {
803
function App() {
804
const [didMount, setDidMount] = React.useState(false);
@@ -827,7 +825,7 @@ describe('Timeline profiler', () => {
825
"batchUID": 0,
826
"depth": 0,
827
"duration": 0.012,
830
- "lanes": "0b0000000000000000000000000000100",
828
+ "lanes": "0b0000000000000000000000000000101",
829
"timestamp": 0.006,
830
"type": "render-idle",
831
},
@@ -835,7 +833,7 @@ describe('Timeline profiler', () => {
833
"batchUID": 0,
834
"depth": 0,
835
"duration": 0.003,
838
- "lanes": "0b0000000000000000000000000000100",
836
+ "lanes": "0b0000000000000000000000000000101",
837
"timestamp": 0.006,
838
"type": "render",
839
},
@@ -843,7 +841,7 @@ describe('Timeline profiler', () => {
841
"batchUID": 0,
842
"depth": 0,
843
"duration": 0.008,
846
- "lanes": "0b0000000000000000000000000000100",
844
+ "lanes": "0b0000000000000000000000000000101",
845
"timestamp": 0.01,
846
"type": "commit",
847
},
@@ -851,7 +849,7 @@ describe('Timeline profiler', () => {
849
"batchUID": 0,
850
"depth": 1,
851
"duration": 0.001,
854
- "lanes": "0b0000000000000000000000000000100",
852
+ "lanes": "0b0000000000000000000000000000101",
853
"timestamp": 0.016,
854
"type": "layout-effects",
855
},
@@ -859,7 +857,7 @@ describe('Timeline profiler', () => {
857
"batchUID": 0,
858
"depth": 0,
859
"duration": 0.004,
862
- "lanes": "0b0000000000000000000000000000100",
860
+ "lanes": "0b0000000000000000000000000000101",
861
"timestamp": 0.019,
862
"type": "passive-effects",
863
},
@@ -869,7 +867,7 @@ describe('Timeline profiler', () => {
867
"batchUID": 1,
868
"depth": 0,
869
"duration": 0.012,
872
- "lanes": "0b0000000000000000000000000000100",
870
+ "lanes": "0b0000000000000000000000000000101",
871
"timestamp": 0.024,
872
"type": "render-idle",
873
},
@@ -877,7 +875,7 @@ describe('Timeline profiler', () => {
875
"batchUID": 1,
876
"depth": 0,
877
"duration": 0.003,
880
- "lanes": "0b0000000000000000000000000000100",
878
+ "lanes": "0b0000000000000000000000000000101",
879
"timestamp": 0.024,
880
"type": "render",
881
},
@@ -885,7 +883,7 @@ describe('Timeline profiler', () => {
883
"batchUID": 1,
884
"depth": 0,
885
"duration": 0.008,
888
- "lanes": "0b0000000000000000000000000000100",
886
+ "lanes": "0b0000000000000000000000000000101",
887
"timestamp": 0.028,
888
"type": "commit",
889
},
@@ -893,7 +891,7 @@ describe('Timeline profiler', () => {
891
"batchUID": 1,
892
"depth": 1,
893
"duration": 0.001,
896
- "lanes": "0b0000000000000000000000000000100",
894
+ "lanes": "0b0000000000000000000000000000101",
895
"timestamp": 0.034,
896
"type": "layout-effects",
897
},
@@ -901,7 +899,7 @@ describe('Timeline profiler', () => {
899
"batchUID": 1,
900
"depth": 0,
901
"duration": 0.003,
904
- "lanes": "0b0000000000000000000000000000100",
902
+ "lanes": "0b0000000000000000000000000000101",
903
"timestamp": 0.037,
904
"type": "passive-effects",
905
},
@@ -995,12 +993,13 @@ describe('Timeline profiler', () => {
993
1 => Array [],
994
2 => Array [],
995
3 => Array [],
998
- 4 => Array [
996
+ 4 => Array [],
997
+ 5 => Array [
998
Object {
999
"batchUID": 0,
1000
"depth": 0,
1001
"duration": 0.012,
1003
- "lanes": "0b0000000000000000000000000000100",
1002
+ "lanes": "0b0000000000000000000000000000101",
1003
"timestamp": 0.006,
1004
"type": "render-idle",
1005
},
@@ -1008,7 +1007,7 @@ describe('Timeline profiler', () => {
1007
"batchUID": 0,
1008
"depth": 0,
1009
"duration": 0.003,
1011
- "lanes": "0b0000000000000000000000000000100",
1010
+ "lanes": "0b0000000000000000000000000000101",
1011
"timestamp": 0.006,
1012
"type": "render",
1013
},
@@ -1016,7 +1015,7 @@ describe('Timeline profiler', () => {
1015
"batchUID": 0,
1016
"depth": 0,
1017
"duration": 0.008,
1019
- "lanes": "0b0000000000000000000000000000100",
1018
+ "lanes": "0b0000000000000000000000000000101",
1019
"timestamp": 0.01,
1020
"type": "commit",
1021
},
@@ -1024,7 +1023,7 @@ describe('Timeline profiler', () => {
1023
"batchUID": 0,
1024
"depth": 1,
1025
"duration": 0.001,
1027
- "lanes": "0b0000000000000000000000000000100",
1026
+ "lanes": "0b0000000000000000000000000000101",
1027
"timestamp": 0.016,
1028
"type": "layout-effects",
1029
},
@@ -1032,7 +1031,7 @@ describe('Timeline profiler', () => {
1031
"batchUID": 0,
1032
"depth": 0,
1033
"duration": 0.004,
1035
- "lanes": "0b0000000000000000000000000000100",
1034
+ "lanes": "0b0000000000000000000000000000101",
1035
"timestamp": 0.019,
1036
"type": "passive-effects",
1037
},
@@ -1040,7 +1039,7 @@ describe('Timeline profiler', () => {
1039
"batchUID": 1,
1040
"depth": 0,
1041
"duration": 0.012,
1043
- "lanes": "0b0000000000000000000000000000100",
1042
+ "lanes": "0b0000000000000000000000000000101",
1043
"timestamp": 0.024,
1044
"type": "render-idle",
1045
},
@@ -1048,7 +1047,7 @@ describe('Timeline profiler', () => {
1047
"batchUID": 1,
1048
"depth": 0,
1049
"duration": 0.003,
1051
- "lanes": "0b0000000000000000000000000000100",
1050
+ "lanes": "0b0000000000000000000000000000101",
1051
"timestamp": 0.024,
1052
"type": "render",
1053
},
@@ -1056,7 +1055,7 @@ describe('Timeline profiler', () => {
1055
"batchUID": 1,
1056
"depth": 0,
1057
"duration": 0.008,
1059
- "lanes": "0b0000000000000000000000000000100",
1058
+ "lanes": "0b0000000000000000000000000000101",
1059
"timestamp": 0.028,
1060
"type": "commit",
1061
},
@@ -1064,7 +1063,7 @@ describe('Timeline profiler', () => {
1063
"batchUID": 1,
1064
"depth": 1,
1065
"duration": 0.001,
1067
- "lanes": "0b0000000000000000000000000000100",
1066
+ "lanes": "0b0000000000000000000000000000101",
1067
"timestamp": 0.034,
1068
"type": "layout-effects",
1069
},
@@ -1072,12 +1071,11 @@ describe('Timeline profiler', () => {
1071
"batchUID": 1,
1072
"depth": 0,
1073
"duration": 0.003,
1075
- "lanes": "0b0000000000000000000000000000100",
1074
+ "lanes": "0b0000000000000000000000000000101",
1075
"timestamp": 0.037,
1076
"type": "passive-effects",
1077
},
1078
],
1080
- 5 => Array [],
1079
6 => Array [],
1080
7 => Array [],
1081
8 => Array [],
@@ -1110,14 +1108,14 @@ describe('Timeline profiler', () => {
1108
"reactVersion": "<filtered-version>",
1109
"schedulingEvents": Array [
1110
Object {
1113
- "lanes": "0b0000000000000000000000000000100",
1111
+ "lanes": "0b0000000000000000000000000000101",
1112
"timestamp": 0.005,
1113
"type": "schedule-render",
1114
"warning": null,
1115
},
1116
Object {
1117
"componentName": "App",
1120
- "lanes": "0b0000000000000000000000000000100",
1118
+ "lanes": "0b0000000000000000000000000000101",
1119
"timestamp": 0.021,
1120
"type": "schedule-state-update",
1121
"warning": null,
@@ -1947,7 +1945,6 @@ describe('Timeline profiler', () => {
1945
global.IS_REACT_ACT_ENVIRONMENT = true;
1946
});
1947
1950
- // @reactVersion >= 18.0
1948
it('should process a sample legacy render sequence', async () => {
1949
utils.legacyRender(<div />, document.createElement('div'));
1950
utils.act(() => store.profilerStore.stopProfiling());
@@ -1963,7 +1960,7 @@ describe('Timeline profiler', () => {
1960
"batchUID": 1,
1961
"depth": 0,
1962
"duration": 0,
1966
- "lanes": "0b0000000000000000000000000000001",
1963
+ "lanes": "0b0000000000000000000000000000010",
1964
"timestamp": 10,
1965
"type": "render-idle",
1966
},
@@ -1971,7 +1968,7 @@ describe('Timeline profiler', () => {
1968
"batchUID": 1,
1969
"depth": 0,
1970
"duration": 0,
1974
- "lanes": "0b0000000000000000000000000000001",
1971
+ "lanes": "0b0000000000000000000000000000010",
1972
"timestamp": 10,
1973
"type": "render",
1974
},
@@ -1979,7 +1976,7 @@ describe('Timeline profiler', () => {
1976
"batchUID": 1,
1977
"depth": 0,
1978
"duration": 0,
1982
- "lanes": "0b0000000000000000000000000000001",
1979
+ "lanes": "0b0000000000000000000000000000010",
1980
"timestamp": 10,
1981
"type": "commit",
1982
},
@@ -1987,7 +1984,7 @@ describe('Timeline profiler', () => {
1984
"batchUID": 1,
1985
"depth": 1,
1986
"duration": 0,
1990
- "lanes": "0b0000000000000000000000000000001",
1987
+ "lanes": "0b0000000000000000000000000000010",
1988
"timestamp": 10,
1989
"type": "layout-effects",
1990
},
@@ -1998,13 +1995,13 @@ describe('Timeline profiler', () => {
1995
"flamechart": Array [],
1996
"internalModuleSourceToRanges": Map {},
1997
"laneToLabelMap": Map {
2001
- 1 => "Sync",
2002
- 2 => "InputContinuousHydration",
2003
- 4 => "InputContinuous",
2004
- 8 => "DefaultHydration",
2005
- 16 => "Default",
2006
- 32 => "TransitionHydration",
2007
- 64 => "Transition",
1998
+ 1 => "SyncHydrationLane",
1999
+ 2 => "Sync",
2000
+ 4 => "InputContinuousHydration",
2001
+ 8 => "InputContinuous",
2002
+ 16 => "DefaultHydration",
2003
+ 32 => "Default",
2004
+ 64 => "TransitionHydration",
2005
128 => "Transition",
2006
256 => "Transition",
2007
512 => "Transition",
@@ -2020,7 +2017,7 @@ describe('Timeline profiler', () => {
2017
524288 => "Transition",
2018
1048576 => "Transition",
2019
2097152 => "Transition",
2023
- 4194304 => "Retry",
2020
+ 4194304 => "Transition",
2021
8388608 => "Retry",
2022
16777216 => "Retry",
2023
33554432 => "Retry",
@@ -2031,12 +2028,13 @@ describe('Timeline profiler', () => {
2028
1073741824 => "Offscreen",
2029
},
2030
"laneToReactMeasureMap": Map {
2034
- 1 => Array [
2031
+ 1 => Array [],
2032
+ 2 => Array [
2033
Object {
2034
"batchUID": 1,
2035
"depth": 0,
2036
"duration": 0,
2039
- "lanes": "0b0000000000000000000000000000001",
2037
+ "lanes": "0b0000000000000000000000000000010",
2038
"timestamp": 10,
2039
"type": "render-idle",
2040
},
@@ -2044,7 +2042,7 @@ describe('Timeline profiler', () => {
2042
"batchUID": 1,
2043
"depth": 0,
2044
"duration": 0,
2047
- "lanes": "0b0000000000000000000000000000001",
2045
+ "lanes": "0b0000000000000000000000000000010",
2046
"timestamp": 10,
2047
"type": "render",
2048
},
@@ -2052,7 +2050,7 @@ describe('Timeline profiler', () => {
2050
"batchUID": 1,
2051
"depth": 0,
2052
"duration": 0,
2055
- "lanes": "0b0000000000000000000000000000001",
2053
+ "lanes": "0b0000000000000000000000000000010",
2054
"timestamp": 10,
2055
"type": "commit",
2056
},
@@ -2060,12 +2058,11 @@ describe('Timeline profiler', () => {
2058
"batchUID": 1,
2059
"depth": 1,
2060
"duration": 0,
2063
- "lanes": "0b0000000000000000000000000000001",
2061
+ "lanes": "0b0000000000000000000000000000010",
2062
"timestamp": 10,
2063
"type": "layout-effects",
2064
},
2065
],
2068
- 2 => Array [],
2066
4 => Array [],
2067
8 => Array [],
2068
16 => Array [],
@@ -2102,7 +2099,7 @@ describe('Timeline profiler', () => {
2099
"reactVersion": "<filtered-version>",
2100
"schedulingEvents": Array [
2101
Object {
2105
- "lanes": "0b0000000000000000000000000000001",
2102
+ "lanes": "0b0000000000000000000000000000010",
2103
"timestamp": 10,
2104
"type": "schedule-render",
2105
"warning": null,
@@ -2117,7 +2114,6 @@ describe('Timeline profiler', () => {
2114
`);
2115
});
2116
2120
- // @reactVersion >= 18.0
2117
it('should process a sample createRoot render sequence', async () => {
2118
function App() {
2119
const [didMount, setDidMount] = React.useState(false);
@@ -2153,7 +2149,7 @@ describe('Timeline profiler', () => {
2149
"batchUID": 1,
2150
"depth": 0,
2151
"duration": 0,
2156
- "lanes": "0b0000000000000000000000000010000",
2152
+ "lanes": "0b0000000000000000000000000100000",
2153
"timestamp": 10,
2154
"type": "render-idle",
2155
},
@@ -2161,7 +2157,7 @@ describe('Timeline profiler', () => {
2157
"batchUID": 1,
2158
"depth": 0,
2159
"duration": 0,
2164
- "lanes": "0b0000000000000000000000000010000",
2160
+ "lanes": "0b0000000000000000000000000100000",
2161
"timestamp": 10,
2162
"type": "render",
2163
},
@@ -2169,7 +2165,7 @@ describe('Timeline profiler', () => {
2165
"batchUID": 1,
2166
"depth": 0,
2167
"duration": 0,
2172
- "lanes": "0b0000000000000000000000000010000",
2168
+ "lanes": "0b0000000000000000000000000100000",
2169
"timestamp": 10,
2170
"type": "commit",
2171
},
@@ -2177,7 +2173,7 @@ describe('Timeline profiler', () => {
2173
"batchUID": 1,
2174
"depth": 1,
2175
"duration": 0,
2180
- "lanes": "0b0000000000000000000000000010000",
2176
+ "lanes": "0b0000000000000000000000000100000",
2177
"timestamp": 10,
2178
"type": "layout-effects",
2179
},
@@ -2185,7 +2181,7 @@ describe('Timeline profiler', () => {
2181
"batchUID": 1,
2182
"depth": 0,
2183
"duration": 0,
2188
- "lanes": "0b0000000000000000000000000010000",
2184
+ "lanes": "0b0000000000000000000000000100000",
2185
"timestamp": 10,
2186
"type": "passive-effects",
2187
},
@@ -2195,7 +2191,7 @@ describe('Timeline profiler', () => {
2191
"batchUID": 2,
2192
"depth": 0,
2193
"duration": 0,
2198
- "lanes": "0b0000000000000000000000000010000",
2194
+ "lanes": "0b0000000000000000000000000100000",
2195
"timestamp": 10,
2196
"type": "render-idle",
2197
},
@@ -2203,7 +2199,7 @@ describe('Timeline profiler', () => {
2199
"batchUID": 2,
2200
"depth": 0,
2201
"duration": 0,
2206
- "lanes": "0b0000000000000000000000000010000",
2202
+ "lanes": "0b0000000000000000000000000100000",
2203
"timestamp": 10,
2204
"type": "render",
2205
},
@@ -2211,7 +2207,7 @@ describe('Timeline profiler', () => {
2207
"batchUID": 2,
2208
"depth": 0,
2209
"duration": 0,
2214
- "lanes": "0b0000000000000000000000000010000",
2210
+ "lanes": "0b0000000000000000000000000100000",
2211
"timestamp": 10,
2212
"type": "commit",
2213
},
@@ -2219,7 +2215,7 @@ describe('Timeline profiler', () => {
2215
"batchUID": 2,
2216
"depth": 1,
2217
"duration": 0,
2222
- "lanes": "0b0000000000000000000000000010000",
2218
+ "lanes": "0b0000000000000000000000000100000",
2219
"timestamp": 10,
2220
"type": "layout-effects",
2221
},
@@ -2227,7 +2223,7 @@ describe('Timeline profiler', () => {
2223
"batchUID": 2,
2224
"depth": 0,
2225
"duration": 0,
2230
- "lanes": "0b0000000000000000000000000010000",
2226
+ "lanes": "0b0000000000000000000000000100000",
2227
"timestamp": 10,
2228
"type": "passive-effects",
2229
},
@@ -2267,13 +2263,13 @@ describe('Timeline profiler', () => {
2263
"flamechart": Array [],
2264
"internalModuleSourceToRanges": Map {},
2265
"laneToLabelMap": Map {
2270
- 1 => "Sync",
2271
- 2 => "InputContinuousHydration",
2272
- 4 => "InputContinuous",
2273
- 8 => "DefaultHydration",
2274
- 16 => "Default",
2275
- 32 => "TransitionHydration",
2276
- 64 => "Transition",
2266
+ 1 => "SyncHydrationLane",
2267
+ 2 => "Sync",
2268
+ 4 => "InputContinuousHydration",
2269
+ 8 => "InputContinuous",
2270
+ 16 => "DefaultHydration",
2271
+ 32 => "Default",
2272
+ 64 => "TransitionHydration",
2273
128 => "Transition",
2274
256 => "Transition",
2275
512 => "Transition",
@@ -2289,7 +2285,7 @@ describe('Timeline profiler', () => {
2285
524288 => "Transition",
2286
1048576 => "Transition",
2287
2097152 => "Transition",
2292
- 4194304 => "Retry",
2288
+ 4194304 => "Transition",
2289
8388608 => "Retry",
2290
16777216 => "Retry",
2291
33554432 => "Retry",
@@ -2304,12 +2300,13 @@ describe('Timeline profiler', () => {
2300
2 => Array [],
2301
4 => Array [],
2302
8 => Array [],
2307
- 16 => Array [
2303
+ 16 => Array [],
2304
+ 32 => Array [
2305
Object {
2306
"batchUID": 1,
2307
"depth": 0,
2308
"duration": 0,
2312
- "lanes": "0b0000000000000000000000000010000",
2309
+ "lanes": "0b0000000000000000000000000100000",
2310
"timestamp": 10,
2311
"type": "render-idle",
2312
},
@@ -2317,7 +2314,7 @@ describe('Timeline profiler', () => {
2314
"batchUID": 1,
2315
"depth": 0,
2316
"duration": 0,
2320
- "lanes": "0b0000000000000000000000000010000",
2317
+ "lanes": "0b0000000000000000000000000100000",
2318
"timestamp": 10,
2319
"type": "render",
2320
},
@@ -2325,7 +2322,7 @@ describe('Timeline profiler', () => {
2322
"batchUID": 1,
2323
"depth": 0,
2324
"duration": 0,
2328
- "lanes": "0b0000000000000000000000000010000",
2325
+ "lanes": "0b0000000000000000000000000100000",
2326
"timestamp": 10,
2327
"type": "commit",
2328
},
@@ -2333,7 +2330,7 @@ describe('Timeline profiler', () => {
2330
"batchUID": 1,
2331
"depth": 1,
2332
"duration": 0,
2336
- "lanes": "0b0000000000000000000000000010000",
2333
+ "lanes": "0b0000000000000000000000000100000",
2334
"timestamp": 10,
2335
"type": "layout-effects",
2336
},
@@ -2341,7 +2338,7 @@ describe('Timeline profiler', () => {
2338
"batchUID": 1,
2339
"depth": 0,
2340
"duration": 0,
2344
- "lanes": "0b0000000000000000000000000010000",
2341
+ "lanes": "0b0000000000000000000000000100000",
2342
"timestamp": 10,
2343
"type": "passive-effects",
2344
},
@@ -2349,7 +2346,7 @@ describe('Timeline profiler', () => {
2346
"batchUID": 2,
2347
"depth": 0,
2348
"duration": 0,
2352
- "lanes": "0b0000000000000000000000000010000",
2349
+ "lanes": "0b0000000000000000000000000100000",
2350
"timestamp": 10,
2351
"type": "render-idle",
2352
},
@@ -2357,7 +2354,7 @@ describe('Timeline profiler', () => {
2354
"batchUID": 2,
2355
"depth": 0,
2356
"duration": 0,
2360
- "lanes": "0b0000000000000000000000000010000",
2357
+ "lanes": "0b0000000000000000000000000100000",
2358
"timestamp": 10,
2359
"type": "render",
2360
},
@@ -2365,7 +2362,7 @@ describe('Timeline profiler', () => {
2362
"batchUID": 2,
2363
"depth": 0,
2364
"duration": 0,
2368
- "lanes": "0b0000000000000000000000000010000",
2365
+ "lanes": "0b0000000000000000000000000100000",
2366
"timestamp": 10,
2367
"type": "commit",
2368
},
@@ -2373,7 +2370,7 @@ describe('Timeline profiler', () => {
2370
"batchUID": 2,
2371
"depth": 1,
2372
"duration": 0,
2376
- "lanes": "0b0000000000000000000000000010000",
2373
+ "lanes": "0b0000000000000000000000000100000",
2374
"timestamp": 10,
2375
"type": "layout-effects",
2376
},
@@ -2381,12 +2378,11 @@ describe('Timeline profiler', () => {
2378
"batchUID": 2,
2379
"depth": 0,
2380
"duration": 0,
2384
- "lanes": "0b0000000000000000000000000010000",
2381
+ "lanes": "0b0000000000000000000000000100000",
2382
"timestamp": 10,
2383
"type": "passive-effects",
2384
},
2385
],
2389
- 32 => Array [],
2386
64 => Array [],
2387
128 => Array [],
2388
256 => Array [],
@@ -2419,7 +2415,7 @@ describe('Timeline profiler', () => {
2415
"reactVersion": "<filtered-version>",
2416
"schedulingEvents": Array [
2417
Object {
2422
- "lanes": "0b0000000000000000000000000010000",
2418
+ "lanes": "0b0000000000000000000000000100000",
2419
"timestamp": 10,
2420
"type": "schedule-render",
2421
"warning": null,
@@ -2428,7 +2424,7 @@ describe('Timeline profiler', () => {
2424
"componentName": "App",
2425
"componentStack": "
2426
in App (at **)",
2431
- "lanes": "0b0000000000000000000000000010000",
2427
+ "lanes": "0b0000000000000000000000000100000",
2428
"timestamp": 10,
2429
"type": "schedule-state-update",
2430
"warning": null,
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+115
@@ -21,6 +21,7 @@ let Suspense;
21
let act;
22
23
let IdleEventPriority;
24
+let ContinuousEventPriority;
25
26
function dispatchMouseHoverEvent(to, from) {
27
if (!to) {
@@ -110,6 +111,18 @@ function TODO_scheduleIdleDOMSchedulerTask(fn) {
111
});
112
}
113
114
+function TODO_scheduleContinuousSchedulerTask(fn) {
115
+ ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () => {
116
+ const prevEvent = window.event;
117
+ window.event = {type: 'message'};
118
+ try {
119
+ fn();
120
+ } finally {
121
+ window.event = prevEvent;
122
+ }
123
+ });
124
+}
125
+
126
describe('ReactDOMServerSelectiveHydration', () => {
127
beforeEach(() => {
128
jest.resetModuleRegistry();
@@ -125,6 +138,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
138
Suspense = React.Suspense;
139
140
IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
141
+ ContinuousEventPriority = require('react-reconciler/constants')
142
+ .ContinuousEventPriority;
143
});
144
145
it('hydrates the target boundary synchronously during a click', async () => {
@@ -1770,4 +1785,104 @@ describe('ReactDOMServerSelectiveHydration', () => {
1785
1786
document.body.removeChild(container);
1787
});
1788
+
1789
+ it('can force hydration in response to sync update', () => {
1790
+ function Child({text}) {
1791
+ Scheduler.unstable_yieldValue(`Child ${text}`);
1792
+ return <span ref={ref => (spanRef = ref)}>{text}</span>;
1793
+ }
1794
+ function App({text}) {
1795
+ Scheduler.unstable_yieldValue(`App ${text}`);
1796
+ return (
1797
+ <div>
1798
+ <Suspense fallback={null}>
1799
+ <Child text={text} />
1800
+ </Suspense>
1801
+ </div>
1802
+ );
1803
+ }
1804
+
1805
+ let spanRef;
1806
+ const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
1807
+ expect(Scheduler).toHaveYielded(['App A', 'Child A']);
1808
+ const container = document.createElement('div');
1809
+ document.body.appendChild(container);
1810
+ container.innerHTML = finalHTML;
1811
+ const initialSpan = container.getElementsByTagName('span')[0];
1812
+ const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
1813
+ expect(Scheduler).toFlushUntilNextPaint(['App A']);
1814
+
1815
+ ReactDOM.flushSync(() => {
1816
+ root.render(<App text="B" />);
1817
+ });
1818
+ expect(Scheduler).toHaveYielded(['App B', 'Child A', 'App B', 'Child B']);
1819
+ expect(initialSpan).toBe(spanRef);
1820
+ });
1821
+
1822
+ // @gate experimental || www
1823
+ it('can force hydration in response to continuous update', () => {
1824
+ function Child({text}) {
1825
+ Scheduler.unstable_yieldValue(`Child ${text}`);
1826
+ return <span ref={ref => (spanRef = ref)}>{text}</span>;
1827
+ }
1828
+ function App({text}) {
1829
+ Scheduler.unstable_yieldValue(`App ${text}`);
1830
+ return (
1831
+ <div>
1832
+ <Suspense fallback={null}>
1833
+ <Child text={text} />
1834
+ </Suspense>
1835
+ </div>
1836
+ );
1837
+ }
1838
+
1839
+ let spanRef;
1840
+ const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
1841
+ expect(Scheduler).toHaveYielded(['App A', 'Child A']);
1842
+ const container = document.createElement('div');
1843
+ document.body.appendChild(container);
1844
+ container.innerHTML = finalHTML;
1845
+ const initialSpan = container.getElementsByTagName('span')[0];
1846
+ const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
1847
+ expect(Scheduler).toFlushUntilNextPaint(['App A']);
1848
+
1849
+ TODO_scheduleContinuousSchedulerTask(() => {
1850
+ root.render(<App text="B" />);
1851
+ });
1852
+ expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']);
1853
+ expect(initialSpan).toBe(spanRef);
1854
+ });
1855
+
1856
+ it('can force hydration in response to default update', () => {
1857
+ function Child({text}) {
1858
+ Scheduler.unstable_yieldValue(`Child ${text}`);
1859
+ return <span ref={ref => (spanRef = ref)}>{text}</span>;
1860
+ }
1861
+ function App({text}) {
1862
+ Scheduler.unstable_yieldValue(`App ${text}`);
1863
+ return (
1864
+ <div>
1865
+ <Suspense fallback={null}>
1866
+ <Child text={text} />
1867
+ </Suspense>
1868
+ </div>
1869
+ );
1870
+ }
1871
+
1872
+ let spanRef;
1873
+ const finalHTML = ReactDOMServer.renderToString(<App text="A" />);
1874
+ expect(Scheduler).toHaveYielded(['App A', 'Child A']);
1875
+ const container = document.createElement('div');
1876
+ document.body.appendChild(container);
1877
+ container.innerHTML = finalHTML;
1878
+ const initialSpan = container.getElementsByTagName('span')[0];
1879
+ const root = ReactDOMClient.hydrateRoot(container, <App text="A" />);
1880
+ expect(Scheduler).toFlushUntilNextPaint(['App A']);
1881
+
1882
+ ReactDOM.unstable_batchedUpdates(() => {
1883
+ root.render(<App text="B" />);
1884
+ });
1885
+ expect(Scheduler).toFlushAndYield(['App B', 'Child A', 'App B', 'Child B']);
1886
+ expect(initialSpan).toBe(spanRef);
1887
+ });
1888
});
packages/react-reconciler/src/ReactFiberLane.new.js
+45
-37
@@ -36,39 +36,39 @@ export const TotalLanes = 31;
36
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
37
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
38
39
-export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
40
-
41
-export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010;
42
-export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100;
43
-
44
-export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000;
45
-export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000;
46
-
47
-const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000;
48
-const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000;
49
-const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000;
50
-const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000;
51
-const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000;
52
-const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000;
53
-const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000;
54
-const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000;
55
-const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000;
56
-const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000;
57
-const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000;
58
-const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000;
59
-const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000;
60
-const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000;
61
-const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000;
62
-const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000;
63
-const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000;
64
-const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000;
65
-
66
-const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000;
67
-const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;
68
-const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;
69
-const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;
70
-const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;
71
-const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000;
39
+export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;
40
+export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;
41
+
42
+export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
43
+export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;
44
+
45
+export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
46
+export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;
47
+
48
+const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
49
+const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000;
50
+const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000;
51
+const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000;
52
+const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000;
53
+const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000;
54
+const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000;
55
+const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000;
56
+const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000;
57
+const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000;
58
+const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000;
59
+const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000;
60
+const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000;
61
+const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000;
62
+const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000;
63
+const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000;
64
+const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000;
65
+const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000;
66
+
67
+const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000;
68
+const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000;
69
+const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000;
70
+const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000;
71
+const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000;
72
73
export const SomeRetryLane: Lane = RetryLane1;
74
@@ -85,6 +85,9 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000
85
// It should be kept in sync with the Lanes values above.
86
export function getLabelForLane(lane: Lane): string | void {
87
if (enableSchedulingProfiler) {
88
+ if (lane & SyncHydrationLane) {
89
+ return 'SyncHydrationLane';
90
+ }
91
if (lane & SyncLane) {
92
return 'Sync';
93
}
@@ -131,6 +134,8 @@ let nextRetryLane: Lane = RetryLane1;
134
135
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
136
switch (getHighestPriorityLane(lanes)) {
137
+ case SyncHydrationLane:
138
+ return SyncHydrationLane;
139
case SyncLane:
140
return SyncLane;
141
case InputContinuousHydrationLane:
@@ -164,7 +169,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
169
case RetryLane2:
170
case RetryLane3:
171
case RetryLane4:
167
- case RetryLane5:
172
return lanes & RetryLanes;
173
case SelectiveHydrationLane:
174
return SelectiveHydrationLane;
@@ -327,6 +331,7 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
331
332
function computeExpirationTime(lane: Lane, currentTime: number) {
333
switch (lane) {
334
+ case SyncHydrationLane:
335
case SyncLane:
336
case InputContinuousHydrationLane:
337
case InputContinuousLane:
@@ -364,7 +369,6 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
369
case RetryLane2:
370
case RetryLane3:
371
case RetryLane4:
367
- case RetryLane5:
372
// TODO: Retries should be allowed to expire if they are CPU bound for
373
// too long, but when I made this change it caused a spike in browser
374
// crashes. There must be some other underlying bug; not super urgent but
@@ -459,7 +463,7 @@ export function getLanesToRetrySynchronouslyOnError(
463
}
464
465
export function includesSyncLane(lanes: Lanes): boolean {
462
- return (lanes & SyncLane) !== NoLanes;
466
+ return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
467
}
468
469
export function includesNonIdleWork(lanes: Lanes): boolean {
@@ -469,6 +473,8 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
473
return (lanes & RetryLanes) === lanes;
474
}
475
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
476
+ // TODO: Should hydration lanes be included here? This function is only
477
+ // used in `updateDeferredValueImpl`.
478
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
479
return (lanes & UrgentLanes) === NoLanes;
480
}
@@ -749,6 +755,9 @@ export function getBumpedLaneForHydration(
755
756
let lane;
757
switch (renderLane) {
758
+ case SyncLane:
759
+ lane = SyncHydrationLane;
760
+ break;
761
case InputContinuousLane:
762
lane = InputContinuousHydrationLane;
763
break;
@@ -775,7 +784,6 @@ export function getBumpedLaneForHydration(
784
case RetryLane2:
785
case RetryLane3:
786
case RetryLane4:
778
- case RetryLane5:
787
lane = TransitionHydrationLane;
788
break;
789
case IdleLane:
packages/react-reconciler/src/ReactFiberLane.old.js
+45
-37
@@ -36,39 +36,39 @@ export const TotalLanes = 31;
36
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
37
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
38
39
-export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001;
40
-
41
-export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000010;
42
-export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000000100;
43
-
44
-export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000001000;
45
-export const DefaultLane: Lane = /* */ 0b0000000000000000000000000010000;
46
-
47
-const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000000100000;
48
-const TransitionLanes: Lanes = /* */ 0b0000000001111111111111111000000;
49
-const TransitionLane1: Lane = /* */ 0b0000000000000000000000001000000;
50
-const TransitionLane2: Lane = /* */ 0b0000000000000000000000010000000;
51
-const TransitionLane3: Lane = /* */ 0b0000000000000000000000100000000;
52
-const TransitionLane4: Lane = /* */ 0b0000000000000000000001000000000;
53
-const TransitionLane5: Lane = /* */ 0b0000000000000000000010000000000;
54
-const TransitionLane6: Lane = /* */ 0b0000000000000000000100000000000;
55
-const TransitionLane7: Lane = /* */ 0b0000000000000000001000000000000;
56
-const TransitionLane8: Lane = /* */ 0b0000000000000000010000000000000;
57
-const TransitionLane9: Lane = /* */ 0b0000000000000000100000000000000;
58
-const TransitionLane10: Lane = /* */ 0b0000000000000001000000000000000;
59
-const TransitionLane11: Lane = /* */ 0b0000000000000010000000000000000;
60
-const TransitionLane12: Lane = /* */ 0b0000000000000100000000000000000;
61
-const TransitionLane13: Lane = /* */ 0b0000000000001000000000000000000;
62
-const TransitionLane14: Lane = /* */ 0b0000000000010000000000000000000;
63
-const TransitionLane15: Lane = /* */ 0b0000000000100000000000000000000;
64
-const TransitionLane16: Lane = /* */ 0b0000000001000000000000000000000;
65
-
66
-const RetryLanes: Lanes = /* */ 0b0000111110000000000000000000000;
67
-const RetryLane1: Lane = /* */ 0b0000000010000000000000000000000;
68
-const RetryLane2: Lane = /* */ 0b0000000100000000000000000000000;
69
-const RetryLane3: Lane = /* */ 0b0000001000000000000000000000000;
70
-const RetryLane4: Lane = /* */ 0b0000010000000000000000000000000;
71
-const RetryLane5: Lane = /* */ 0b0000100000000000000000000000000;
39
+export const SyncHydrationLane: Lane = /* */ 0b0000000000000000000000000000001;
40
+export const SyncLane: Lane = /* */ 0b0000000000000000000000000000010;
41
+
42
+export const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000000100;
43
+export const InputContinuousLane: Lane = /* */ 0b0000000000000000000000000001000;
44
+
45
+export const DefaultHydrationLane: Lane = /* */ 0b0000000000000000000000000010000;
46
+export const DefaultLane: Lane = /* */ 0b0000000000000000000000000100000;
47
+
48
+const TransitionHydrationLane: Lane = /* */ 0b0000000000000000000000001000000;
49
+const TransitionLanes: Lanes = /* */ 0b0000000011111111111111110000000;
50
+const TransitionLane1: Lane = /* */ 0b0000000000000000000000010000000;
51
+const TransitionLane2: Lane = /* */ 0b0000000000000000000000100000000;
52
+const TransitionLane3: Lane = /* */ 0b0000000000000000000001000000000;
53
+const TransitionLane4: Lane = /* */ 0b0000000000000000000010000000000;
54
+const TransitionLane5: Lane = /* */ 0b0000000000000000000100000000000;
55
+const TransitionLane6: Lane = /* */ 0b0000000000000000001000000000000;
56
+const TransitionLane7: Lane = /* */ 0b0000000000000000010000000000000;
57
+const TransitionLane8: Lane = /* */ 0b0000000000000000100000000000000;
58
+const TransitionLane9: Lane = /* */ 0b0000000000000001000000000000000;
59
+const TransitionLane10: Lane = /* */ 0b0000000000000010000000000000000;
60
+const TransitionLane11: Lane = /* */ 0b0000000000000100000000000000000;
61
+const TransitionLane12: Lane = /* */ 0b0000000000001000000000000000000;
62
+const TransitionLane13: Lane = /* */ 0b0000000000010000000000000000000;
63
+const TransitionLane14: Lane = /* */ 0b0000000000100000000000000000000;
64
+const TransitionLane15: Lane = /* */ 0b0000000001000000000000000000000;
65
+const TransitionLane16: Lane = /* */ 0b0000000010000000000000000000000;
66
+
67
+const RetryLanes: Lanes = /* */ 0b0000111100000000000000000000000;
68
+const RetryLane1: Lane = /* */ 0b0000000100000000000000000000000;
69
+const RetryLane2: Lane = /* */ 0b0000001000000000000000000000000;
70
+const RetryLane3: Lane = /* */ 0b0000010000000000000000000000000;
71
+const RetryLane4: Lane = /* */ 0b0000100000000000000000000000000;
72
73
export const SomeRetryLane: Lane = RetryLane1;
74
@@ -85,6 +85,9 @@ export const OffscreenLane: Lane = /* */ 0b1000000000000000000
85
// It should be kept in sync with the Lanes values above.
86
export function getLabelForLane(lane: Lane): string | void {
87
if (enableSchedulingProfiler) {
88
+ if (lane & SyncHydrationLane) {
89
+ return 'SyncHydrationLane';
90
+ }
91
if (lane & SyncLane) {
92
return 'Sync';
93
}
@@ -131,6 +134,8 @@ let nextRetryLane: Lane = RetryLane1;
134
135
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
136
switch (getHighestPriorityLane(lanes)) {
137
+ case SyncHydrationLane:
138
+ return SyncHydrationLane;
139
case SyncLane:
140
return SyncLane;
141
case InputContinuousHydrationLane:
@@ -164,7 +169,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
169
case RetryLane2:
170
case RetryLane3:
171
case RetryLane4:
167
- case RetryLane5:
172
return lanes & RetryLanes;
173
case SelectiveHydrationLane:
174
return SelectiveHydrationLane;
@@ -327,6 +331,7 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
331
332
function computeExpirationTime(lane: Lane, currentTime: number) {
333
switch (lane) {
334
+ case SyncHydrationLane:
335
case SyncLane:
336
case InputContinuousHydrationLane:
337
case InputContinuousLane:
@@ -364,7 +369,6 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
369
case RetryLane2:
370
case RetryLane3:
371
case RetryLane4:
367
- case RetryLane5:
372
// TODO: Retries should be allowed to expire if they are CPU bound for
373
// too long, but when I made this change it caused a spike in browser
374
// crashes. There must be some other underlying bug; not super urgent but
@@ -459,7 +463,7 @@ export function getLanesToRetrySynchronouslyOnError(
463
}
464
465
export function includesSyncLane(lanes: Lanes): boolean {
462
- return (lanes & SyncLane) !== NoLanes;
466
+ return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
467
}
468
469
export function includesNonIdleWork(lanes: Lanes): boolean {
@@ -469,6 +473,8 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
473
return (lanes & RetryLanes) === lanes;
474
}
475
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
476
+ // TODO: Should hydration lanes be included here? This function is only
477
+ // used in `updateDeferredValueImpl`.
478
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
479
return (lanes & UrgentLanes) === NoLanes;
480
}
@@ -749,6 +755,9 @@ export function getBumpedLaneForHydration(
755
756
let lane;
757
switch (renderLane) {
758
+ case SyncLane:
759
+ lane = SyncHydrationLane;
760
+ break;
761
case InputContinuousLane:
762
lane = InputContinuousHydrationLane;
763
break;
@@ -775,7 +784,6 @@ export function getBumpedLaneForHydration(
784
case RetryLane2:
785
case RetryLane3:
786
case RetryLane4:
778
- case RetryLane5:
787
lane = TransitionHydrationLane;
788
break;
789
case IdleLane:
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+6
-9
@@ -141,7 +141,7 @@ import {
141
NoTimestamp,
142
claimNextTransitionLane,
143
claimNextRetryLane,
144
- includesSomeLane,
144
+ includesSyncLane,
145
isSubsetOfLanes,
146
mergeLanes,
147
removeLanes,
@@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
918
// TODO: Temporary until we confirm this warning is not fired.
919
if (
920
existingCallbackNode == null &&
921
- existingCallbackPriority !== SyncLane
921
+ !includesSyncLane(existingCallbackPriority)
922
) {
923
console.error(
924
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
936
937
// Schedule a new callback.
938
let newCallbackNode;
939
- if (newCallbackPriority === SyncLane) {
939
+ if (includesSyncLane(newCallbackPriority)) {
940
// Special case: Sync React callbacks are scheduled on a special
941
// internal queue
942
if (root.tag === LegacyRoot) {
@@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) {
1480
flushPassiveEffects();
1481
1482
let lanes = getNextLanes(root, NoLanes);
1483
- if (!includesSomeLane(lanes, SyncLane)) {
1483
+ if (!includesSyncLane(lanes)) {
1484
// There's no remaining sync work left.
1485
ensureRootIsScheduled(root, now());
1486
return null;
@@ -2930,16 +2930,13 @@ function commitRootImpl(
2930
// TODO: We can optimize this by not scheduling the callback earlier. Since we
2931
// currently schedule the callback in multiple places, will wait until those
2932
// are consolidated.
2933
- if (
2934
- includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
2935
- root.tag !== LegacyRoot
2936
- ) {
2933
+ if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
2934
flushPassiveEffects();
2935
}
2936
2937
// Read this again, since a passive effect might have updated it
2938
remainingLanes = root.pendingLanes;
2942
- if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
2939
+ if (includesSyncLane(remainingLanes)) {
2940
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
2941
markNestedUpdateScheduled();
2942
}
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+6
-9
@@ -141,7 +141,7 @@ import {
141
NoTimestamp,
142
claimNextTransitionLane,
143
claimNextRetryLane,
144
- includesSomeLane,
144
+ includesSyncLane,
145
isSubsetOfLanes,
146
mergeLanes,
147
removeLanes,
@@ -918,7 +918,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
918
// TODO: Temporary until we confirm this warning is not fired.
919
if (
920
existingCallbackNode == null &&
921
- existingCallbackPriority !== SyncLane
921
+ !includesSyncLane(existingCallbackPriority)
922
) {
923
console.error(
924
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -936,7 +936,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
936
937
// Schedule a new callback.
938
let newCallbackNode;
939
- if (newCallbackPriority === SyncLane) {
939
+ if (includesSyncLane(newCallbackPriority)) {
940
// Special case: Sync React callbacks are scheduled on a special
941
// internal queue
942
if (root.tag === LegacyRoot) {
@@ -1480,7 +1480,7 @@ function performSyncWorkOnRoot(root) {
1480
flushPassiveEffects();
1481
1482
let lanes = getNextLanes(root, NoLanes);
1483
- if (!includesSomeLane(lanes, SyncLane)) {
1483
+ if (!includesSyncLane(lanes)) {
1484
// There's no remaining sync work left.
1485
ensureRootIsScheduled(root, now());
1486
return null;
@@ -2930,16 +2930,13 @@ function commitRootImpl(
2930
// TODO: We can optimize this by not scheduling the callback earlier. Since we
2931
// currently schedule the callback in multiple places, will wait until those
2932
// are consolidated.
2933
- if (
2934
- includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
2935
- root.tag !== LegacyRoot
2936
- ) {
2933
+ if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
2934
flushPassiveEffects();
2935
}
2936
2937
// Read this again, since a passive effect might have updated it
2938
remainingLanes = root.pendingLanes;
2942
- if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
2939
+ if (includesSyncLane(remainingLanes)) {
2940
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
2941
markNestedUpdateScheduled();
2942
}
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+9
-8
@@ -16,8 +16,9 @@ describe('DebugTracing', () => {
16
17
let logs;
18
19
- const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
20
- const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
19
+ const SYNC_LANE_STRING = '0b0000000000000000000000000000010';
20
+ const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
21
+ const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
22
23
global.IS_REACT_ACT_ENVIRONMENT = true;
24
@@ -87,9 +88,9 @@ describe('DebugTracing', () => {
88
);
89
90
expect(logs).toEqual([
90
- 'group: ⚛️ render (0b0000000000000000000000000000001)',
91
+ `group: ⚛️ render (${SYNC_LANE_STRING})`,
92
'log: ⚛️ Example suspended',
92
- 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
93
+ `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
94
]);
95
96
logs.splice(0);
@@ -121,9 +122,9 @@ describe('DebugTracing', () => {
122
);
123
124
expect(logs).toEqual([
124
- 'group: ⚛️ render (0b0000000000000000000000000000001)',
125
+ `group: ⚛️ render (${SYNC_LANE_STRING})`,
126
'log: <Wrapper/>',
126
- 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
127
+ `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
128
]);
129
130
logs.splice(0);
@@ -237,7 +238,7 @@ describe('DebugTracing', () => {
238
expect(logs).toEqual([
239
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
240
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
240
- 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
241
+ `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
242
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
243
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
244
]);
@@ -295,7 +296,7 @@ describe('DebugTracing', () => {
296
expect(logs).toEqual([
297
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
298
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
298
- 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
299
+ `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
300
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
301
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
302
]);