@samitouri / QOS-React-2 / commits / f31005d6ad

Add SyncHydrationLane (#25698)

<!-- 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 <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> For more context: https://github.com/facebook/react/pull/25692 Based on https://github.com/facebook/react/pull/25695. This PR adds the `SyncHydrationLane` so we rewind on sync updates during selective hydration. Also added tests for ContinuouseHydration and DefaultHydration lanes. ## 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. --> yarn test

Tianyu Yao committed Nov 17, 2022 at 12:14 UTC f31005d6ad5f48b586e1645226fcfe97cd112aa3
8 files changed +532 -406
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+220 -220
@@ -132,16 +132,16 @@ describe('Timeline profiler', () => {
132
133 expect(clearedMarks).toMatchInlineSnapshot(`
134 Array [
135 - "--schedule-render-1",
136 - "--render-start-1",
135 + "--schedule-render-2",
136 + "--render-start-2",
137 "--render-stop",
138 - "--commit-start-1",
138 + "--commit-start-2",
139 "--react-version-<filtered-version>",
140 "--profiler-version-1",
141 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
142 "--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",
143 + "--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",
144 + "--layout-effects-start-2",
145 "--layout-effects-stop",
146 "--commit-stop",
147 ]
@@ -153,10 +153,10 @@ describe('Timeline profiler', () => {
153 renderRootHelper(<div />);
154
155 expect(clearedMarks).toMatchInlineSnapshot(`
156 - Array [
157 - "--schedule-render-16",
158 - ]
159 - `);
156 + Array [
157 + "--schedule-render-32",
158 + ]
159 + `);
160
161 clearPendingMarks();
162
@@ -164,15 +164,15 @@ describe('Timeline profiler', () => {
164
165 expect(clearedMarks).toMatchInlineSnapshot(`
166 Array [
167 - "--render-start-16",
167 + "--render-start-32",
168 "--render-stop",
169 - "--commit-start-16",
169 + "--commit-start-32",
170 "--react-version-<filtered-version>",
171 "--profiler-version-1",
172 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
173 "--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",
174 + "--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",
175 + "--layout-effects-start-32",
176 "--layout-effects-stop",
177 "--commit-stop",
178 ]
@@ -199,14 +199,14 @@ describe('Timeline profiler', () => {
199 expect(Scheduler).toFlushAndYieldThrough(['Foo']);
200
201 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 - `);
202 + Array [
203 + "--schedule-render-128",
204 + "--render-start-128",
205 + "--component-render-start-Foo",
206 + "--component-render-stop",
207 + "--render-yield",
208 + ]
209 + `);
210 });
211
212 // @reactVersion >=18.0
@@ -224,19 +224,19 @@ describe('Timeline profiler', () => {
224
225 expect(clearedMarks).toMatchInlineSnapshot(`
226 Array [
227 - "--schedule-render-1",
228 - "--render-start-1",
227 + "--schedule-render-2",
228 + "--render-start-2",
229 "--component-render-start-Example",
230 "--component-render-stop",
231 - "--suspense-suspend-0-Example-mount-1-",
231 + "--suspense-suspend-0-Example-mount-2-",
232 "--render-stop",
233 - "--commit-start-1",
233 + "--commit-start-2",
234 "--react-version-<filtered-version>",
235 "--profiler-version-1",
236 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
237 "--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",
238 + "--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",
239 + "--layout-effects-start-2",
240 "--layout-effects-stop",
241 "--commit-stop",
242 ]
@@ -267,19 +267,19 @@ describe('Timeline profiler', () => {
267
268 expect(clearedMarks).toMatchInlineSnapshot(`
269 Array [
270 - "--schedule-render-1",
271 - "--render-start-1",
270 + "--schedule-render-2",
271 + "--render-start-2",
272 "--component-render-start-Example",
273 "--component-render-stop",
274 - "--suspense-suspend-0-Example-mount-1-",
274 + "--suspense-suspend-0-Example-mount-2-",
275 "--render-stop",
276 - "--commit-start-1",
276 + "--commit-start-2",
277 "--react-version-<filtered-version>",
278 "--profiler-version-1",
279 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
280 "--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",
281 + "--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",
282 + "--layout-effects-start-2",
283 "--layout-effects-stop",
284 "--commit-stop",
285 ]
@@ -305,10 +305,10 @@ describe('Timeline profiler', () => {
305 );
306
307 expect(clearedMarks).toMatchInlineSnapshot(`
308 - Array [
309 - "--schedule-render-16",
310 - ]
311 - `);
308 + Array [
309 + "--schedule-render-32",
310 + ]
311 + `);
312
313 clearPendingMarks();
314
@@ -316,18 +316,18 @@ describe('Timeline profiler', () => {
316
317 expect(clearedMarks).toMatchInlineSnapshot(`
318 Array [
319 - "--render-start-16",
319 + "--render-start-32",
320 "--component-render-start-Example",
321 "--component-render-stop",
322 - "--suspense-suspend-0-Example-mount-16-",
322 + "--suspense-suspend-0-Example-mount-32-",
323 "--render-stop",
324 - "--commit-start-16",
324 + "--commit-start-32",
325 "--react-version-<filtered-version>",
326 "--profiler-version-1",
327 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
328 "--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",
329 + "--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",
330 + "--layout-effects-start-32",
331 "--layout-effects-stop",
332 "--commit-stop",
333 ]
@@ -357,10 +357,10 @@ describe('Timeline profiler', () => {
357 );
358
359 expect(clearedMarks).toMatchInlineSnapshot(`
360 - Array [
361 - "--schedule-render-16",
362 - ]
363 - `);
360 + Array [
361 + "--schedule-render-32",
362 + ]
363 + `);
364
365 clearPendingMarks();
366
@@ -368,18 +368,18 @@ describe('Timeline profiler', () => {
368
369 expect(clearedMarks).toMatchInlineSnapshot(`
370 Array [
371 - "--render-start-16",
371 + "--render-start-32",
372 "--component-render-start-Example",
373 "--component-render-stop",
374 - "--suspense-suspend-0-Example-mount-16-",
374 + "--suspense-suspend-0-Example-mount-32-",
375 "--render-stop",
376 - "--commit-start-16",
376 + "--commit-start-32",
377 "--react-version-<filtered-version>",
378 "--profiler-version-1",
379 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
380 "--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",
381 + "--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",
382 + "--layout-effects-start-32",
383 "--layout-effects-stop",
384 "--commit-stop",
385 ]
@@ -410,10 +410,10 @@ describe('Timeline profiler', () => {
410 renderRootHelper(<Example />);
411
412 expect(clearedMarks).toMatchInlineSnapshot(`
413 - Array [
414 - "--schedule-render-16",
415 - ]
416 - `);
413 + Array [
414 + "--schedule-render-32",
415 + ]
416 + `);
417
418 clearPendingMarks();
419
@@ -421,29 +421,29 @@ describe('Timeline profiler', () => {
421
422 expect(clearedMarks).toMatchInlineSnapshot(`
423 Array [
424 - "--render-start-16",
424 + "--render-start-32",
425 "--component-render-start-Example",
426 "--component-render-stop",
427 "--render-stop",
428 - "--commit-start-16",
428 + "--commit-start-32",
429 "--react-version-<filtered-version>",
430 "--profiler-version-1",
431 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
432 "--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",
433 + "--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",
434 + "--layout-effects-start-32",
435 + "--schedule-state-update-2-Example",
436 "--layout-effects-stop",
437 - "--render-start-1",
437 + "--render-start-2",
438 "--component-render-start-Example",
439 "--component-render-stop",
440 "--render-stop",
441 - "--commit-start-1",
441 + "--commit-start-2",
442 "--react-version-<filtered-version>",
443 "--profiler-version-1",
444 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
445 "--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",
446 + "--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",
447 "--commit-stop",
448 "--commit-stop",
449 ]
@@ -464,10 +464,10 @@ describe('Timeline profiler', () => {
464 renderRootHelper(<Example />);
465
466 expect(clearedMarks).toMatchInlineSnapshot(`
467 - Array [
468 - "--schedule-render-16",
469 - ]
470 - `);
467 + Array [
468 + "--schedule-render-32",
469 + ]
470 + `);
471
472 clearPendingMarks();
473
@@ -475,29 +475,29 @@ describe('Timeline profiler', () => {
475
476 expect(clearedMarks).toMatchInlineSnapshot(`
477 Array [
478 - "--render-start-16",
478 + "--render-start-32",
479 "--component-render-start-Example",
480 "--component-render-stop",
481 "--render-stop",
482 - "--commit-start-16",
482 + "--commit-start-32",
483 "--react-version-<filtered-version>",
484 "--profiler-version-1",
485 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
486 "--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",
487 + "--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",
488 + "--layout-effects-start-32",
489 + "--schedule-forced-update-2-Example",
490 "--layout-effects-stop",
491 - "--render-start-1",
491 + "--render-start-2",
492 "--component-render-start-Example",
493 "--component-render-stop",
494 "--render-stop",
495 - "--commit-start-1",
495 + "--commit-start-2",
496 "--react-version-<filtered-version>",
497 "--profiler-version-1",
498 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
499 "--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",
500 + "--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",
501 "--commit-stop",
502 "--commit-stop",
503 ]
@@ -519,10 +519,10 @@ describe('Timeline profiler', () => {
519 renderRootHelper(<Example />);
520
521 expect(clearedMarks).toMatchInlineSnapshot(`
522 - Array [
523 - "--schedule-render-16",
524 - ]
525 - `);
522 + Array [
523 + "--schedule-render-32",
524 + ]
525 + `);
526
527 clearPendingMarks();
528
@@ -540,18 +540,18 @@ describe('Timeline profiler', () => {
540
541 expect(clearedMarks).toMatchInlineSnapshot(`
542 Array [
543 - "--render-start-16",
543 + "--render-start-32",
544 "--component-render-start-Example",
545 - "--schedule-state-update-16-Example",
545 + "--schedule-state-update-32-Example",
546 "--component-render-stop",
547 "--render-stop",
548 - "--commit-start-16",
548 + "--commit-start-32",
549 "--react-version-<filtered-version>",
550 "--profiler-version-1",
551 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
552 "--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",
553 + "--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",
554 + "--layout-effects-start-32",
555 "--layout-effects-stop",
556 "--commit-stop",
557 ]
@@ -574,10 +574,10 @@ describe('Timeline profiler', () => {
574 renderRootHelper(<Example />);
575
576 expect(clearedMarks).toMatchInlineSnapshot(`
577 - Array [
578 - "--schedule-render-16",
579 - ]
580 - `);
577 + Array [
578 + "--schedule-render-32",
579 + ]
580 + `);
581
582 clearPendingMarks();
583
@@ -595,18 +595,18 @@ describe('Timeline profiler', () => {
595
596 expect(clearedMarks).toMatchInlineSnapshot(`
597 Array [
598 - "--render-start-16",
598 + "--render-start-32",
599 "--component-render-start-Example",
600 - "--schedule-forced-update-16-Example",
600 + "--schedule-forced-update-32-Example",
601 "--component-render-stop",
602 "--render-stop",
603 - "--commit-start-16",
603 + "--commit-start-32",
604 "--react-version-<filtered-version>",
605 "--profiler-version-1",
606 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
607 "--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",
608 + "--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",
609 + "--layout-effects-start-32",
610 "--layout-effects-stop",
611 "--commit-stop",
612 ]
@@ -626,10 +626,10 @@ describe('Timeline profiler', () => {
626 renderRootHelper(<Example />);
627
628 expect(clearedMarks).toMatchInlineSnapshot(`
629 - Array [
630 - "--schedule-render-16",
631 - ]
632 - `);
629 + Array [
630 + "--schedule-render-32",
631 + ]
632 + `);
633
634 clearPendingMarks();
635
@@ -637,31 +637,31 @@ describe('Timeline profiler', () => {
637
638 expect(clearedMarks).toMatchInlineSnapshot(`
639 Array [
640 - "--render-start-16",
640 + "--render-start-32",
641 "--component-render-start-Example",
642 "--component-render-stop",
643 "--render-stop",
644 - "--commit-start-16",
644 + "--commit-start-32",
645 "--react-version-<filtered-version>",
646 "--profiler-version-1",
647 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
648 "--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",
649 + "--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",
650 + "--layout-effects-start-32",
651 "--component-layout-effect-mount-start-Example",
652 - "--schedule-state-update-1-Example",
652 + "--schedule-state-update-2-Example",
653 "--component-layout-effect-mount-stop",
654 "--layout-effects-stop",
655 - "--render-start-1",
655 + "--render-start-2",
656 "--component-render-start-Example",
657 "--component-render-stop",
658 "--render-stop",
659 - "--commit-start-1",
659 + "--commit-start-2",
660 "--react-version-<filtered-version>",
661 "--profiler-version-1",
662 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
663 "--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",
664 + "--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",
665 "--commit-stop",
666 "--commit-stop",
667 ]
@@ -684,35 +684,35 @@ describe('Timeline profiler', () => {
684
685 expect(clearedMarks).toMatchInlineSnapshot(`
686 Array [
687 - "--schedule-render-16",
688 - "--render-start-16",
687 + "--schedule-render-32",
688 + "--render-start-32",
689 "--component-render-start-Example",
690 "--component-render-stop",
691 "--render-stop",
692 - "--commit-start-16",
692 + "--commit-start-32",
693 "--react-version-<filtered-version>",
694 "--profiler-version-1",
695 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
696 "--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",
697 + "--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",
698 + "--layout-effects-start-32",
699 "--layout-effects-stop",
700 "--commit-stop",
701 - "--passive-effects-start-16",
701 + "--passive-effects-start-32",
702 "--component-passive-effect-mount-start-Example",
703 - "--schedule-state-update-16-Example",
703 + "--schedule-state-update-32-Example",
704 "--component-passive-effect-mount-stop",
705 "--passive-effects-stop",
706 - "--render-start-16",
706 + "--render-start-32",
707 "--component-render-start-Example",
708 "--component-render-stop",
709 "--render-stop",
710 - "--commit-start-16",
710 + "--commit-start-32",
711 "--react-version-<filtered-version>",
712 "--profiler-version-1",
713 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
714 "--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",
715 + "--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",
716 "--commit-stop",
717 ]
718 `);
@@ -734,19 +734,19 @@ describe('Timeline profiler', () => {
734
735 expect(clearedMarks).toMatchInlineSnapshot(`
736 Array [
737 - "--schedule-render-16",
738 - "--render-start-16",
737 + "--schedule-render-32",
738 + "--render-start-32",
739 "--component-render-start-Example",
740 - "--schedule-state-update-16-Example",
740 + "--schedule-state-update-32-Example",
741 "--component-render-stop",
742 "--render-stop",
743 - "--commit-start-16",
743 + "--commit-start-32",
744 "--react-version-<filtered-version>",
745 "--profiler-version-1",
746 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
747 "--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",
748 + "--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",
749 + "--layout-effects-start-32",
750 "--layout-effects-stop",
751 "--commit-stop",
752 ]
@@ -782,8 +782,8 @@ describe('Timeline profiler', () => {
782
783 expect(clearedMarks).toMatchInlineSnapshot(`
784 Array [
785 - "--schedule-render-1",
786 - "--render-start-1",
785 + "--schedule-render-2",
786 + "--render-start-2",
787 "--component-render-start-ErrorBoundary",
788 "--component-render-stop",
789 "--component-render-start-ExampleThatThrows",
@@ -791,26 +791,26 @@ describe('Timeline profiler', () => {
791 "--component-render-stop",
792 "--error-ExampleThatThrows-mount-Expected error",
793 "--render-stop",
794 - "--commit-start-1",
794 + "--commit-start-2",
795 "--react-version-<filtered-version>",
796 "--profiler-version-1",
797 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
798 "--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",
799 + "--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",
800 + "--layout-effects-start-2",
801 + "--schedule-state-update-2-ErrorBoundary",
802 "--layout-effects-stop",
803 "--commit-stop",
804 - "--render-start-1",
804 + "--render-start-2",
805 "--component-render-start-ErrorBoundary",
806 "--component-render-stop",
807 "--render-stop",
808 - "--commit-start-1",
808 + "--commit-start-2",
809 "--react-version-<filtered-version>",
810 "--profiler-version-1",
811 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
812 "--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",
813 + "--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",
814 "--commit-stop",
815 ]
816 `);
@@ -845,10 +845,10 @@ describe('Timeline profiler', () => {
845 );
846
847 expect(clearedMarks).toMatchInlineSnapshot(`
848 - Array [
849 - "--schedule-render-16",
850 - ]
851 - `);
848 + Array [
849 + "--schedule-render-32",
850 + ]
851 + `);
852
853 clearPendingMarks();
854
@@ -856,7 +856,7 @@ describe('Timeline profiler', () => {
856
857 expect(clearedMarks).toMatchInlineSnapshot(`
858 Array [
859 - "--render-start-16",
859 + "--render-start-32",
860 "--component-render-start-ErrorBoundary",
861 "--component-render-stop",
862 "--component-render-start-ExampleThatThrows",
@@ -864,7 +864,7 @@ describe('Timeline profiler', () => {
864 "--component-render-stop",
865 "--error-ExampleThatThrows-mount-Expected error",
866 "--render-stop",
867 - "--render-start-16",
867 + "--render-start-32",
868 "--component-render-start-ErrorBoundary",
869 "--component-render-stop",
870 "--component-render-start-ExampleThatThrows",
@@ -872,25 +872,25 @@ describe('Timeline profiler', () => {
872 "--component-render-stop",
873 "--error-ExampleThatThrows-mount-Expected error",
874 "--render-stop",
875 - "--commit-start-16",
875 + "--commit-start-32",
876 "--react-version-<filtered-version>",
877 "--profiler-version-1",
878 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
879 "--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",
880 + "--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",
881 + "--layout-effects-start-32",
882 + "--schedule-state-update-2-ErrorBoundary",
883 "--layout-effects-stop",
884 - "--render-start-1",
884 + "--render-start-2",
885 "--component-render-start-ErrorBoundary",
886 "--component-render-stop",
887 "--render-stop",
888 - "--commit-start-1",
888 + "--commit-start-2",
889 "--react-version-<filtered-version>",
890 "--profiler-version-1",
891 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
892 "--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",
893 + "--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",
894 "--commit-stop",
895 "--commit-stop",
896 ]
@@ -947,18 +947,18 @@ describe('Timeline profiler', () => {
947
948 expect(clearedMarks).toMatchInlineSnapshot(`
949 Array [
950 - "--schedule-render-16",
951 - "--render-start-16",
950 + "--schedule-render-32",
951 + "--render-start-32",
952 "--component-render-start-ComponentWithEffects",
953 "--component-render-stop",
954 "--render-stop",
955 - "--commit-start-16",
955 + "--commit-start-32",
956 "--react-version-<filtered-version>",
957 "--profiler-version-1",
958 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
959 "--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",
960 + "--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",
961 + "--layout-effects-start-32",
962 "--component-layout-effect-mount-start-ComponentWithEffects",
963 "--component-layout-effect-mount-stop",
964 "--component-layout-effect-mount-start-ComponentWithEffects",
@@ -977,17 +977,17 @@ describe('Timeline profiler', () => {
977 ]);
978
979 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 - `);
980 + Array [
981 + "--passive-effects-start-32",
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 + `);
991
992 clearPendingMarks();
993
@@ -1005,22 +1005,22 @@ describe('Timeline profiler', () => {
1005
1006 expect(clearedMarks).toMatchInlineSnapshot(`
1007 Array [
1008 - "--schedule-render-1",
1009 - "--render-start-1",
1008 + "--schedule-render-2",
1009 + "--render-start-2",
1010 "--render-stop",
1011 - "--commit-start-1",
1011 + "--commit-start-2",
1012 "--react-version-<filtered-version>",
1013 "--profiler-version-1",
1014 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1015 "--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",
1016 + "--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",
1017 "--component-layout-effect-unmount-start-ComponentWithEffects",
1018 "--component-layout-effect-unmount-stop",
1019 "--component-layout-effect-unmount-start-ComponentWithEffects",
1020 "--component-layout-effect-unmount-stop",
1021 - "--layout-effects-start-1",
1021 + "--layout-effects-start-2",
1022 "--layout-effects-stop",
1023 - "--passive-effects-start-1",
1023 + "--passive-effects-start-2",
1024 "--component-passive-effect-unmount-start-ComponentWithEffects",
1025 "--component-passive-effect-unmount-stop",
1026 "--component-passive-effect-unmount-start-ComponentWithEffects",
@@ -1040,16 +1040,16 @@ describe('Timeline profiler', () => {
1040
1041 expect(clearedMarks).toMatchInlineSnapshot(`
1042 Array [
1043 - "--schedule-render-1",
1044 - "--render-start-1",
1043 + "--schedule-render-2",
1044 + "--render-start-2",
1045 "--render-stop",
1046 - "--commit-start-1",
1046 + "--commit-start-2",
1047 "--react-version-<filtered-version>",
1048 "--profiler-version-1",
1049 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1050 "--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",
1051 + "--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",
1052 + "--layout-effects-start-2",
1053 "--layout-effects-stop",
1054 "--commit-stop",
1055 ]
@@ -1060,10 +1060,10 @@ describe('Timeline profiler', () => {
1060 it('regression test DefaultLane', () => {
1061 renderRootHelper(<div />);
1062 expect(clearedMarks).toMatchInlineSnapshot(`
1063 - Array [
1064 - "--schedule-render-16",
1065 - ]
1066 - `);
1063 + Array [
1064 + "--schedule-render-32",
1065 + ]
1066 + `);
1067 });
1068
1069 // @reactVersion >=18.0
@@ -1090,18 +1090,18 @@ describe('Timeline profiler', () => {
1090
1091 expect(clearedMarks).toMatchInlineSnapshot(`
1092 Array [
1093 - "--schedule-state-update-1-App",
1094 - "--render-start-1",
1093 + "--schedule-state-update-2-App",
1094 + "--render-start-2",
1095 "--component-render-start-App",
1096 "--component-render-stop",
1097 "--render-stop",
1098 - "--commit-start-1",
1098 + "--commit-start-2",
1099 "--react-version-<filtered-version>",
1100 "--profiler-version-1",
1101 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1102 "--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",
1103 + "--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",
1104 + "--layout-effects-start-2",
1105 "--layout-effects-stop",
1106 "--commit-stop",
1107 ]
@@ -1131,18 +1131,18 @@ describe('Timeline profiler', () => {
1131
1132 expect(clearedMarks).toMatchInlineSnapshot(`
1133 Array [
1134 - "--schedule-state-update-4-App",
1135 - "--render-start-4",
1134 + "--schedule-state-update-8-App",
1135 + "--render-start-8",
1136 "--component-render-start-App",
1137 "--component-render-stop",
1138 "--render-stop",
1139 - "--commit-start-4",
1139 + "--commit-start-8",
1140 "--react-version-<filtered-version>",
1141 "--profiler-version-1",
1142 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1143 "--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",
1144 + "--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",
1145 + "--layout-effects-start-8",
1146 "--layout-effects-stop",
1147 "--commit-stop",
1148 ]
@@ -1213,7 +1213,7 @@ describe('Timeline profiler', () => {
1213 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1214 Array [
1215 Object {
1216 - "lanes": "0b0000000000000000000000000000001",
1216 + "lanes": "0b0000000000000000000000000000010",
1217 "timestamp": 10,
1218 "type": "schedule-render",
1219 "warning": null,
@@ -1230,7 +1230,7 @@ describe('Timeline profiler', () => {
1230 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1231 Array [
1232 Object {
1233 - "lanes": "0b0000000000000000000000000010000",
1233 + "lanes": "0b0000000000000000000000000100000",
1234 "timestamp": 10,
1235 "type": "schedule-render",
1236 "warning": null,
@@ -1272,7 +1272,7 @@ describe('Timeline profiler', () => {
1272 "componentName": "Example",
1273 "componentStack": "
1274 in Example (at **)",
1275 - "lanes": "0b0000000000000000000000000000100",
1275 + "lanes": "0b0000000000000000000000000001000",
1276 "timestamp": 10,
1277 "type": "schedule-state-update",
1278 "warning": null,
@@ -1281,7 +1281,7 @@ describe('Timeline profiler', () => {
1281 "componentName": "Example",
1282 "componentStack": "
1283 in Example (at **)",
1284 - "lanes": "0b0000000000000000000000001000000",
1284 + "lanes": "0b0000000000000000000000010000000",
1285 "timestamp": 10,
1286 "type": "schedule-state-update",
1287 "warning": null,
@@ -1290,7 +1290,7 @@ describe('Timeline profiler', () => {
1290 "componentName": "Example",
1291 "componentStack": "
1292 in Example (at **)",
1293 - "lanes": "0b0000000000000000000000001000000",
1293 + "lanes": "0b0000000000000000000000010000000",
1294 "timestamp": 10,
1295 "type": "schedule-state-update",
1296 "warning": null,
@@ -1299,7 +1299,7 @@ describe('Timeline profiler', () => {
1299 "componentName": "Example",
1300 "componentStack": "
1301 in Example (at **)",
1302 - "lanes": "0b0000000000000000000000000010000",
1302 + "lanes": "0b0000000000000000000000000100000",
1303 "timestamp": 10,
1304 "type": "schedule-state-update",
1305 "warning": null,
@@ -1629,7 +1629,7 @@ describe('Timeline profiler', () => {
1629 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1630 Array [
1631 Object {
1632 - "lanes": "0b0000000000000000000000000010000",
1632 + "lanes": "0b0000000000000000000000000100000",
1633 "timestamp": 10,
1634 "type": "schedule-render",
1635 "warning": null,
@@ -1638,7 +1638,7 @@ describe('Timeline profiler', () => {
1638 "componentName": "Example",
1639 "componentStack": "
1640 in Example (at **)",
1641 - "lanes": "0b0000000000000000000000000000001",
1641 + "lanes": "0b0000000000000000000000000000010",
1642 "timestamp": 20,
1643 "type": "schedule-state-update",
1644 "warning": null,
@@ -1689,14 +1689,14 @@ describe('Timeline profiler', () => {
1689 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1690 Array [
1691 Object {
1692 - "lanes": "0b0000000000000000000000000010000",
1692 + "lanes": "0b0000000000000000000000000100000",
1693 "timestamp": 10,
1694 "type": "schedule-render",
1695 "warning": null,
1696 },
1697 Object {
1698 "componentName": "Example",
1699 - "lanes": "0b0000000000000000000000000000001",
1699 + "lanes": "0b0000000000000000000000000000010",
1700 "timestamp": 20,
1701 "type": "schedule-force-update",
1702 "warning": null,
@@ -1758,7 +1758,7 @@ describe('Timeline profiler', () => {
1758 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1759 Array [
1760 Object {
1761 - "lanes": "0b0000000000000000000000000010000",
1761 + "lanes": "0b0000000000000000000000000100000",
1762 "timestamp": 10,
1763 "type": "schedule-render",
1764 "warning": null,
@@ -1767,7 +1767,7 @@ describe('Timeline profiler', () => {
1767 "componentName": "Example",
1768 "componentStack": "
1769 in Example (at **)",
1770 - "lanes": "0b0000000000000000000000000010000",
1770 + "lanes": "0b0000000000000000000000000100000",
1771 "timestamp": 10,
1772 "type": "schedule-state-update",
1773 "warning": null,
@@ -1828,14 +1828,14 @@ describe('Timeline profiler', () => {
1828 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1829 Array [
1830 Object {
1831 - "lanes": "0b0000000000000000000000000010000",
1831 + "lanes": "0b0000000000000000000000000100000",
1832 "timestamp": 10,
1833 "type": "schedule-render",
1834 "warning": null,
1835 },
1836 Object {
1837 "componentName": "Example",
1838 - "lanes": "0b0000000000000000000000000010000",
1838 + "lanes": "0b0000000000000000000000000100000",
1839 "timestamp": 20,
1840 "type": "schedule-force-update",
1841 "warning": null,
@@ -1891,7 +1891,7 @@ describe('Timeline profiler', () => {
1891 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1892 Array [
1893 Object {
1894 - "lanes": "0b0000000000000000000000000010000",
1894 + "lanes": "0b0000000000000000000000000100000",
1895 "timestamp": 10,
1896 "type": "schedule-render",
1897 "warning": null,
@@ -1900,7 +1900,7 @@ describe('Timeline profiler', () => {
1900 "componentName": "Example",
1901 "componentStack": "
1902 in Example (at **)",
1903 - "lanes": "0b0000000000000000000000000000001",
1903 + "lanes": "0b0000000000000000000000000000010",
1904 "timestamp": 21,
1905 "type": "schedule-state-update",
1906 "warning": null,
@@ -1955,7 +1955,7 @@ describe('Timeline profiler', () => {
1955 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1956 Array [
1957 Object {
1958 - "lanes": "0b0000000000000000000000000010000",
1958 + "lanes": "0b0000000000000000000000000100000",
1959 "timestamp": 10,
1960 "type": "schedule-render",
1961 "warning": null,
@@ -1964,7 +1964,7 @@ describe('Timeline profiler', () => {
1964 "componentName": "Example",
1965 "componentStack": "
1966 in Example (at **)",
1967 - "lanes": "0b0000000000000000000000000010000",
1967 + "lanes": "0b0000000000000000000000000100000",
1968 "timestamp": 21,
1969 "type": "schedule-state-update",
1970 "warning": null,
@@ -2005,7 +2005,7 @@ describe('Timeline profiler', () => {
2005 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2006 Array [
2007 Object {
2008 - "lanes": "0b0000000000000000000000000010000",
2008 + "lanes": "0b0000000000000000000000000100000",
2009 "timestamp": 10,
2010 "type": "schedule-render",
2011 "warning": null,
@@ -2014,7 +2014,7 @@ describe('Timeline profiler', () => {
2014 "componentName": "Example",
2015 "componentStack": "
2016 in Example (at **)",
2017 - "lanes": "0b0000000000000000000000000010000",
2017 + "lanes": "0b0000000000000000000000000100000",
2018 "timestamp": 20,
2019 "type": "schedule-state-update",
2020 "warning": null,
@@ -2090,7 +2090,7 @@ describe('Timeline profiler', () => {
2090 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2091 Array [
2092 Object {
2093 - "lanes": "0b0000000000000000000000000000001",
2093 + "lanes": "0b0000000000000000000000000000010",
2094 "timestamp": 10,
2095 "type": "schedule-render",
2096 "warning": null,
@@ -2099,7 +2099,7 @@ describe('Timeline profiler', () => {
2099 "componentName": "ErrorBoundary",
2100 "componentStack": "
2101 in ErrorBoundary (at **)",
2102 - "lanes": "0b0000000000000000000000000000001",
2102 + "lanes": "0b0000000000000000000000000000010",
2103 "timestamp": 20,
2104 "type": "schedule-state-update",
2105 "warning": null,
@@ -2204,7 +2204,7 @@ describe('Timeline profiler', () => {
2204 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2205 Array [
2206 Object {
2207 - "lanes": "0b0000000000000000000000000010000",
2207 + "lanes": "0b0000000000000000000000000100000",
2208 "timestamp": 10,
2209 "type": "schedule-render",
2210 "warning": null,
@@ -2213,7 +2213,7 @@ describe('Timeline profiler', () => {
2213 "componentName": "ErrorBoundary",
2214 "componentStack": "
2215 in ErrorBoundary (at **)",
2216 - "lanes": "0b0000000000000000000000000000001",
2216 + "lanes": "0b0000000000000000000000000000010",
2217 "timestamp": 30,
2218 "type": "schedule-state-update",
2219 "warning": null,
@@ -2395,7 +2395,7 @@ describe('Timeline profiler', () => {
2395 "batchUID": 1,
2396 "depth": 0,
2397 "duration": 0,
2398 - "lanes": "0b0000000000000000000000000010000",
2398 + "lanes": "0b0000000000000000000000000100000",
2399 "timestamp": 10,
2400 "type": "render-idle",
2401 },
@@ -2403,7 +2403,7 @@ describe('Timeline profiler', () => {
2403 "batchUID": 1,
2404 "depth": 0,
2405 "duration": 0,
2406 - "lanes": "0b0000000000000000000000000010000",
2406 + "lanes": "0b0000000000000000000000000100000",
2407 "timestamp": 10,
2408 "type": "render",
2409 },
@@ -2411,7 +2411,7 @@ describe('Timeline profiler', () => {
2411 "batchUID": 1,
2412 "depth": 0,
2413 "duration": 0,
2414 - "lanes": "0b0000000000000000000000000010000",
2414 + "lanes": "0b0000000000000000000000000100000",
2415 "timestamp": 10,
2416 "type": "commit",
2417 },
@@ -2419,7 +2419,7 @@ describe('Timeline profiler', () => {
2419 "batchUID": 1,
2420 "depth": 1,
2421 "duration": 0,
2422 - "lanes": "0b0000000000000000000000000010000",
2422 + "lanes": "0b0000000000000000000000000100000",
2423 "timestamp": 10,
2424 "type": "layout-effects",
2425 },
@@ -2427,7 +2427,7 @@ describe('Timeline profiler', () => {
2427 "batchUID": 1,
2428 "depth": 0,
2429 "duration": 0,
2430 - "lanes": "0b0000000000000000000000000010000",
2430 + "lanes": "0b0000000000000000000000000100000",
2431 "timestamp": 10,
2432 "type": "passive-effects",
2433 },
@@ -2437,7 +2437,7 @@ describe('Timeline profiler', () => {
2437 "batchUID": 2,
2438 "depth": 0,
2439 "duration": 0,
2440 - "lanes": "0b0000000000000000000000000000001",
2440 + "lanes": "0b0000000000000000000000000000010",
2441 "timestamp": 10,
2442 "type": "render-idle",
2443 },
@@ -2445,7 +2445,7 @@ describe('Timeline profiler', () => {
2445 "batchUID": 2,
2446 "depth": 0,
2447 "duration": 0,
2448 - "lanes": "0b0000000000000000000000000000001",
2448 + "lanes": "0b0000000000000000000000000000010",
2449 "timestamp": 10,
2450 "type": "render",
2451 },
@@ -2453,7 +2453,7 @@ describe('Timeline profiler', () => {
2453 "batchUID": 2,
2454 "depth": 0,
2455 "duration": 0,
2456 - "lanes": "0b0000000000000000000000000000001",
2456 + "lanes": "0b0000000000000000000000000000010",
2457 "timestamp": 10,
2458 "type": "commit",
2459 },
@@ -2461,7 +2461,7 @@ describe('Timeline profiler', () => {
2461 "batchUID": 2,
2462 "depth": 1,
2463 "duration": 0,
2464 - "lanes": "0b0000000000000000000000000000001",
2464 + "lanes": "0b0000000000000000000000000000010",
2465 "timestamp": 10,
2466 "type": "layout-effects",
2467 },
@@ -2469,7 +2469,7 @@ describe('Timeline profiler', () => {
2469 "batchUID": 2,
2470 "depth": 1,
2471 "duration": 0,
2472 - "lanes": "0b0000000000000000000000000000001",
2472 + "lanes": "0b0000000000000000000000000000010",
2473 "timestamp": 10,
2474 "type": "passive-effects",
2475 },
@@ -2505,7 +2505,7 @@ describe('Timeline profiler', () => {
2505 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2506 Array [
2507 Object {
2508 - "lanes": "0b0000000000000000000000000010000",
2508 + "lanes": "0b0000000000000000000000000100000",
2509 "timestamp": 10,
2510 "type": "schedule-render",
2511 "warning": null,
@@ -2515,7 +2515,7 @@ describe('Timeline profiler', () => {
2515 "componentStack": "
2516 in Child (at **)
2517 in CommponentWithChildren (at **)",
2518 - "lanes": "0b0000000000000000000000000010000",
2518 + "lanes": "0b0000000000000000000000000100000",
2519 "timestamp": 10,
2520 "type": "schedule-state-update",
2521 "warning": null,
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+86 -86
@@ -629,7 +629,7 @@ describe('Timeline profiler', () => {
629 "batchUID": 0,
630 "depth": 0,
631 "duration": 0.01,
632 - "lanes": "0b0000000000000000000000000000000",
632 + "lanes": "0b0000000000000000000000000000001",
633 "timestamp": 0.006,
634 "type": "render-idle",
635 },
@@ -637,7 +637,7 @@ describe('Timeline profiler', () => {
637 "batchUID": 0,
638 "depth": 0,
639 "duration": 0.001,
640 - "lanes": "0b0000000000000000000000000000000",
640 + "lanes": "0b0000000000000000000000000000001",
641 "timestamp": 0.006,
642 "type": "render",
643 },
@@ -645,7 +645,7 @@ describe('Timeline profiler', () => {
645 "batchUID": 0,
646 "depth": 0,
647 "duration": 0.008,
648 - "lanes": "0b0000000000000000000000000000000",
648 + "lanes": "0b0000000000000000000000000000001",
649 "timestamp": 0.008,
650 "type": "commit",
651 },
@@ -653,7 +653,7 @@ describe('Timeline profiler', () => {
653 "batchUID": 0,
654 "depth": 1,
655 "duration": 0.001,
656 - "lanes": "0b0000000000000000000000000000000",
656 + "lanes": "0b0000000000000000000000000000001",
657 "timestamp": 0.014,
658 "type": "layout-effects",
659 },
@@ -714,12 +714,13 @@ describe('Timeline profiler', () => {
714 30 => "Offscreen",
715 },
716 "laneToReactMeasureMap": Map {
717 - 0 => Array [
717 + 0 => Array [],
718 + 1 => Array [
719 Object {
720 "batchUID": 0,
721 "depth": 0,
722 "duration": 0.01,
722 - "lanes": "0b0000000000000000000000000000000",
723 + "lanes": "0b0000000000000000000000000000001",
724 "timestamp": 0.006,
725 "type": "render-idle",
726 },
@@ -727,7 +728,7 @@ describe('Timeline profiler', () => {
728 "batchUID": 0,
729 "depth": 0,
730 "duration": 0.001,
730 - "lanes": "0b0000000000000000000000000000000",
731 + "lanes": "0b0000000000000000000000000000001",
732 "timestamp": 0.006,
733 "type": "render",
734 },
@@ -735,7 +736,7 @@ describe('Timeline profiler', () => {
736 "batchUID": 0,
737 "depth": 0,
738 "duration": 0.008,
738 - "lanes": "0b0000000000000000000000000000000",
739 + "lanes": "0b0000000000000000000000000000001",
740 "timestamp": 0.008,
741 "type": "commit",
742 },
@@ -743,12 +744,11 @@ describe('Timeline profiler', () => {
744 "batchUID": 0,
745 "depth": 1,
746 "duration": 0.001,
746 - "lanes": "0b0000000000000000000000000000000",
747 + "lanes": "0b0000000000000000000000000000001",
748 "timestamp": 0.014,
749 "type": "layout-effects",
750 },
751 ],
751 - 1 => Array [],
752 2 => Array [],
753 3 => Array [],
754 4 => Array [],
@@ -785,7 +785,7 @@ describe('Timeline profiler', () => {
785 "reactVersion": "<filtered-version>",
786 "schedulingEvents": Array [
787 Object {
788 - "lanes": "0b0000000000000000000000000000000",
788 + "lanes": "0b0000000000000000000000000000001",
789 "timestamp": 0.005,
790 "type": "schedule-render",
791 "warning": null,
@@ -827,7 +827,7 @@ describe('Timeline profiler', () => {
827 "batchUID": 0,
828 "depth": 0,
829 "duration": 0.012,
830 - "lanes": "0b0000000000000000000000000000100",
830 + "lanes": "0b0000000000000000000000000000101",
831 "timestamp": 0.006,
832 "type": "render-idle",
833 },
@@ -835,7 +835,7 @@ describe('Timeline profiler', () => {
835 "batchUID": 0,
836 "depth": 0,
837 "duration": 0.003,
838 - "lanes": "0b0000000000000000000000000000100",
838 + "lanes": "0b0000000000000000000000000000101",
839 "timestamp": 0.006,
840 "type": "render",
841 },
@@ -843,7 +843,7 @@ describe('Timeline profiler', () => {
843 "batchUID": 0,
844 "depth": 0,
845 "duration": 0.008,
846 - "lanes": "0b0000000000000000000000000000100",
846 + "lanes": "0b0000000000000000000000000000101",
847 "timestamp": 0.01,
848 "type": "commit",
849 },
@@ -851,7 +851,7 @@ describe('Timeline profiler', () => {
851 "batchUID": 0,
852 "depth": 1,
853 "duration": 0.001,
854 - "lanes": "0b0000000000000000000000000000100",
854 + "lanes": "0b0000000000000000000000000000101",
855 "timestamp": 0.016,
856 "type": "layout-effects",
857 },
@@ -859,7 +859,7 @@ describe('Timeline profiler', () => {
859 "batchUID": 0,
860 "depth": 0,
861 "duration": 0.004,
862 - "lanes": "0b0000000000000000000000000000100",
862 + "lanes": "0b0000000000000000000000000000101",
863 "timestamp": 0.019,
864 "type": "passive-effects",
865 },
@@ -869,7 +869,7 @@ describe('Timeline profiler', () => {
869 "batchUID": 1,
870 "depth": 0,
871 "duration": 0.012,
872 - "lanes": "0b0000000000000000000000000000100",
872 + "lanes": "0b0000000000000000000000000000101",
873 "timestamp": 0.024,
874 "type": "render-idle",
875 },
@@ -877,7 +877,7 @@ describe('Timeline profiler', () => {
877 "batchUID": 1,
878 "depth": 0,
879 "duration": 0.003,
880 - "lanes": "0b0000000000000000000000000000100",
880 + "lanes": "0b0000000000000000000000000000101",
881 "timestamp": 0.024,
882 "type": "render",
883 },
@@ -885,7 +885,7 @@ describe('Timeline profiler', () => {
885 "batchUID": 1,
886 "depth": 0,
887 "duration": 0.008,
888 - "lanes": "0b0000000000000000000000000000100",
888 + "lanes": "0b0000000000000000000000000000101",
889 "timestamp": 0.028,
890 "type": "commit",
891 },
@@ -893,7 +893,7 @@ describe('Timeline profiler', () => {
893 "batchUID": 1,
894 "depth": 1,
895 "duration": 0.001,
896 - "lanes": "0b0000000000000000000000000000100",
896 + "lanes": "0b0000000000000000000000000000101",
897 "timestamp": 0.034,
898 "type": "layout-effects",
899 },
@@ -901,7 +901,7 @@ describe('Timeline profiler', () => {
901 "batchUID": 1,
902 "depth": 0,
903 "duration": 0.003,
904 - "lanes": "0b0000000000000000000000000000100",
904 + "lanes": "0b0000000000000000000000000000101",
905 "timestamp": 0.037,
906 "type": "passive-effects",
907 },
@@ -995,12 +995,13 @@ describe('Timeline profiler', () => {
995 1 => Array [],
996 2 => Array [],
997 3 => Array [],
998 - 4 => Array [
998 + 4 => Array [],
999 + 5 => Array [
1000 Object {
1001 "batchUID": 0,
1002 "depth": 0,
1003 "duration": 0.012,
1003 - "lanes": "0b0000000000000000000000000000100",
1004 + "lanes": "0b0000000000000000000000000000101",
1005 "timestamp": 0.006,
1006 "type": "render-idle",
1007 },
@@ -1008,7 +1009,7 @@ describe('Timeline profiler', () => {
1009 "batchUID": 0,
1010 "depth": 0,
1011 "duration": 0.003,
1011 - "lanes": "0b0000000000000000000000000000100",
1012 + "lanes": "0b0000000000000000000000000000101",
1013 "timestamp": 0.006,
1014 "type": "render",
1015 },
@@ -1016,7 +1017,7 @@ describe('Timeline profiler', () => {
1017 "batchUID": 0,
1018 "depth": 0,
1019 "duration": 0.008,
1019 - "lanes": "0b0000000000000000000000000000100",
1020 + "lanes": "0b0000000000000000000000000000101",
1021 "timestamp": 0.01,
1022 "type": "commit",
1023 },
@@ -1024,7 +1025,7 @@ describe('Timeline profiler', () => {
1025 "batchUID": 0,
1026 "depth": 1,
1027 "duration": 0.001,
1027 - "lanes": "0b0000000000000000000000000000100",
1028 + "lanes": "0b0000000000000000000000000000101",
1029 "timestamp": 0.016,
1030 "type": "layout-effects",
1031 },
@@ -1032,7 +1033,7 @@ describe('Timeline profiler', () => {
1033 "batchUID": 0,
1034 "depth": 0,
1035 "duration": 0.004,
1035 - "lanes": "0b0000000000000000000000000000100",
1036 + "lanes": "0b0000000000000000000000000000101",
1037 "timestamp": 0.019,
1038 "type": "passive-effects",
1039 },
@@ -1040,7 +1041,7 @@ describe('Timeline profiler', () => {
1041 "batchUID": 1,
1042 "depth": 0,
1043 "duration": 0.012,
1043 - "lanes": "0b0000000000000000000000000000100",
1044 + "lanes": "0b0000000000000000000000000000101",
1045 "timestamp": 0.024,
1046 "type": "render-idle",
1047 },
@@ -1048,7 +1049,7 @@ describe('Timeline profiler', () => {
1049 "batchUID": 1,
1050 "depth": 0,
1051 "duration": 0.003,
1051 - "lanes": "0b0000000000000000000000000000100",
1052 + "lanes": "0b0000000000000000000000000000101",
1053 "timestamp": 0.024,
1054 "type": "render",
1055 },
@@ -1056,7 +1057,7 @@ describe('Timeline profiler', () => {
1057 "batchUID": 1,
1058 "depth": 0,
1059 "duration": 0.008,
1059 - "lanes": "0b0000000000000000000000000000100",
1060 + "lanes": "0b0000000000000000000000000000101",
1061 "timestamp": 0.028,
1062 "type": "commit",
1063 },
@@ -1064,7 +1065,7 @@ describe('Timeline profiler', () => {
1065 "batchUID": 1,
1066 "depth": 1,
1067 "duration": 0.001,
1067 - "lanes": "0b0000000000000000000000000000100",
1068 + "lanes": "0b0000000000000000000000000000101",
1069 "timestamp": 0.034,
1070 "type": "layout-effects",
1071 },
@@ -1072,12 +1073,11 @@ describe('Timeline profiler', () => {
1073 "batchUID": 1,
1074 "depth": 0,
1075 "duration": 0.003,
1075 - "lanes": "0b0000000000000000000000000000100",
1076 + "lanes": "0b0000000000000000000000000000101",
1077 "timestamp": 0.037,
1078 "type": "passive-effects",
1079 },
1080 ],
1080 - 5 => Array [],
1081 6 => Array [],
1082 7 => Array [],
1083 8 => Array [],
@@ -1110,14 +1110,14 @@ describe('Timeline profiler', () => {
1110 "reactVersion": "<filtered-version>",
1111 "schedulingEvents": Array [
1112 Object {
1113 - "lanes": "0b0000000000000000000000000000100",
1113 + "lanes": "0b0000000000000000000000000000101",
1114 "timestamp": 0.005,
1115 "type": "schedule-render",
1116 "warning": null,
1117 },
1118 Object {
1119 "componentName": "App",
1120 - "lanes": "0b0000000000000000000000000000100",
1120 + "lanes": "0b0000000000000000000000000000101",
1121 "timestamp": 0.021,
1122 "type": "schedule-state-update",
1123 "warning": null,
@@ -1963,7 +1963,7 @@ describe('Timeline profiler', () => {
1963 "batchUID": 1,
1964 "depth": 0,
1965 "duration": 0,
1966 - "lanes": "0b0000000000000000000000000000001",
1966 + "lanes": "0b0000000000000000000000000000010",
1967 "timestamp": 10,
1968 "type": "render-idle",
1969 },
@@ -1971,7 +1971,7 @@ describe('Timeline profiler', () => {
1971 "batchUID": 1,
1972 "depth": 0,
1973 "duration": 0,
1974 - "lanes": "0b0000000000000000000000000000001",
1974 + "lanes": "0b0000000000000000000000000000010",
1975 "timestamp": 10,
1976 "type": "render",
1977 },
@@ -1979,7 +1979,7 @@ describe('Timeline profiler', () => {
1979 "batchUID": 1,
1980 "depth": 0,
1981 "duration": 0,
1982 - "lanes": "0b0000000000000000000000000000001",
1982 + "lanes": "0b0000000000000000000000000000010",
1983 "timestamp": 10,
1984 "type": "commit",
1985 },
@@ -1987,7 +1987,7 @@ describe('Timeline profiler', () => {
1987 "batchUID": 1,
1988 "depth": 1,
1989 "duration": 0,
1990 - "lanes": "0b0000000000000000000000000000001",
1990 + "lanes": "0b0000000000000000000000000000010",
1991 "timestamp": 10,
1992 "type": "layout-effects",
1993 },
@@ -1998,13 +1998,13 @@ describe('Timeline profiler', () => {
1998 "flamechart": Array [],
1999 "internalModuleSourceToRanges": Map {},
2000 "laneToLabelMap": Map {
2001 - 1 => "Sync",
2002 - 2 => "InputContinuousHydration",
2003 - 4 => "InputContinuous",
2004 - 8 => "DefaultHydration",
2005 - 16 => "Default",
2006 - 32 => "TransitionHydration",
2007 - 64 => "Transition",
2001 + 1 => "SyncHydrationLane",
2002 + 2 => "Sync",
2003 + 4 => "InputContinuousHydration",
2004 + 8 => "InputContinuous",
2005 + 16 => "DefaultHydration",
2006 + 32 => "Default",
2007 + 64 => "TransitionHydration",
2008 128 => "Transition",
2009 256 => "Transition",
2010 512 => "Transition",
@@ -2020,7 +2020,7 @@ describe('Timeline profiler', () => {
2020 524288 => "Transition",
2021 1048576 => "Transition",
2022 2097152 => "Transition",
2023 - 4194304 => "Retry",
2023 + 4194304 => "Transition",
2024 8388608 => "Retry",
2025 16777216 => "Retry",
2026 33554432 => "Retry",
@@ -2031,12 +2031,13 @@ describe('Timeline profiler', () => {
2031 1073741824 => "Offscreen",
2032 },
2033 "laneToReactMeasureMap": Map {
2034 - 1 => Array [
2034 + 1 => Array [],
2035 + 2 => Array [
2036 Object {
2037 "batchUID": 1,
2038 "depth": 0,
2039 "duration": 0,
2039 - "lanes": "0b0000000000000000000000000000001",
2040 + "lanes": "0b0000000000000000000000000000010",
2041 "timestamp": 10,
2042 "type": "render-idle",
2043 },
@@ -2044,7 +2045,7 @@ describe('Timeline profiler', () => {
2045 "batchUID": 1,
2046 "depth": 0,
2047 "duration": 0,
2047 - "lanes": "0b0000000000000000000000000000001",
2048 + "lanes": "0b0000000000000000000000000000010",
2049 "timestamp": 10,
2050 "type": "render",
2051 },
@@ -2052,7 +2053,7 @@ describe('Timeline profiler', () => {
2053 "batchUID": 1,
2054 "depth": 0,
2055 "duration": 0,
2055 - "lanes": "0b0000000000000000000000000000001",
2056 + "lanes": "0b0000000000000000000000000000010",
2057 "timestamp": 10,
2058 "type": "commit",
2059 },
@@ -2060,12 +2061,11 @@ describe('Timeline profiler', () => {
2061 "batchUID": 1,
2062 "depth": 1,
2063 "duration": 0,
2063 - "lanes": "0b0000000000000000000000000000001",
2064 + "lanes": "0b0000000000000000000000000000010",
2065 "timestamp": 10,
2066 "type": "layout-effects",
2067 },
2068 ],
2068 - 2 => Array [],
2069 4 => Array [],
2070 8 => Array [],
2071 16 => Array [],
@@ -2102,7 +2102,7 @@ describe('Timeline profiler', () => {
2102 "reactVersion": "<filtered-version>",
2103 "schedulingEvents": Array [
2104 Object {
2105 - "lanes": "0b0000000000000000000000000000001",
2105 + "lanes": "0b0000000000000000000000000000010",
2106 "timestamp": 10,
2107 "type": "schedule-render",
2108 "warning": null,
@@ -2153,7 +2153,7 @@ describe('Timeline profiler', () => {
2153 "batchUID": 1,
2154 "depth": 0,
2155 "duration": 0,
2156 - "lanes": "0b0000000000000000000000000010000",
2156 + "lanes": "0b0000000000000000000000000100000",
2157 "timestamp": 10,
2158 "type": "render-idle",
2159 },
@@ -2161,7 +2161,7 @@ describe('Timeline profiler', () => {
2161 "batchUID": 1,
2162 "depth": 0,
2163 "duration": 0,
2164 - "lanes": "0b0000000000000000000000000010000",
2164 + "lanes": "0b0000000000000000000000000100000",
2165 "timestamp": 10,
2166 "type": "render",
2167 },
@@ -2169,7 +2169,7 @@ describe('Timeline profiler', () => {
2169 "batchUID": 1,
2170 "depth": 0,
2171 "duration": 0,
2172 - "lanes": "0b0000000000000000000000000010000",
2172 + "lanes": "0b0000000000000000000000000100000",
2173 "timestamp": 10,
2174 "type": "commit",
2175 },
@@ -2177,7 +2177,7 @@ describe('Timeline profiler', () => {
2177 "batchUID": 1,
2178 "depth": 1,
2179 "duration": 0,
2180 - "lanes": "0b0000000000000000000000000010000",
2180 + "lanes": "0b0000000000000000000000000100000",
2181 "timestamp": 10,
2182 "type": "layout-effects",
2183 },
@@ -2185,7 +2185,7 @@ describe('Timeline profiler', () => {
2185 "batchUID": 1,
2186 "depth": 0,
2187 "duration": 0,
2188 - "lanes": "0b0000000000000000000000000010000",
2188 + "lanes": "0b0000000000000000000000000100000",
2189 "timestamp": 10,
2190 "type": "passive-effects",
2191 },
@@ -2195,7 +2195,7 @@ describe('Timeline profiler', () => {
2195 "batchUID": 2,
2196 "depth": 0,
2197 "duration": 0,
2198 - "lanes": "0b0000000000000000000000000010000",
2198 + "lanes": "0b0000000000000000000000000100000",
2199 "timestamp": 10,
2200 "type": "render-idle",
2201 },
@@ -2203,7 +2203,7 @@ describe('Timeline profiler', () => {
2203 "batchUID": 2,
2204 "depth": 0,
2205 "duration": 0,
2206 - "lanes": "0b0000000000000000000000000010000",
2206 + "lanes": "0b0000000000000000000000000100000",
2207 "timestamp": 10,
2208 "type": "render",
2209 },
@@ -2211,7 +2211,7 @@ describe('Timeline profiler', () => {
2211 "batchUID": 2,
2212 "depth": 0,
2213 "duration": 0,
2214 - "lanes": "0b0000000000000000000000000010000",
2214 + "lanes": "0b0000000000000000000000000100000",
2215 "timestamp": 10,
2216 "type": "commit",
2217 },
@@ -2219,7 +2219,7 @@ describe('Timeline profiler', () => {
2219 "batchUID": 2,
2220 "depth": 1,
2221 "duration": 0,
2222 - "lanes": "0b0000000000000000000000000010000",
2222 + "lanes": "0b0000000000000000000000000100000",
2223 "timestamp": 10,
2224 "type": "layout-effects",
2225 },
@@ -2227,7 +2227,7 @@ describe('Timeline profiler', () => {
2227 "batchUID": 2,
2228 "depth": 0,
2229 "duration": 0,
2230 - "lanes": "0b0000000000000000000000000010000",
2230 + "lanes": "0b0000000000000000000000000100000",
2231 "timestamp": 10,
2232 "type": "passive-effects",
2233 },
@@ -2267,13 +2267,13 @@ describe('Timeline profiler', () => {
2267 "flamechart": Array [],
2268 "internalModuleSourceToRanges": Map {},
2269 "laneToLabelMap": Map {
2270 - 1 => "Sync",
2271 - 2 => "InputContinuousHydration",
2272 - 4 => "InputContinuous",
2273 - 8 => "DefaultHydration",
2274 - 16 => "Default",
2275 - 32 => "TransitionHydration",
2276 - 64 => "Transition",
2270 + 1 => "SyncHydrationLane",
2271 + 2 => "Sync",
2272 + 4 => "InputContinuousHydration",
2273 + 8 => "InputContinuous",
2274 + 16 => "DefaultHydration",
2275 + 32 => "Default",
2276 + 64 => "TransitionHydration",
2277 128 => "Transition",
2278 256 => "Transition",
2279 512 => "Transition",
@@ -2289,7 +2289,7 @@ describe('Timeline profiler', () => {
2289 524288 => "Transition",
2290 1048576 => "Transition",
2291 2097152 => "Transition",
2292 - 4194304 => "Retry",
2292 + 4194304 => "Transition",
2293 8388608 => "Retry",
2294 16777216 => "Retry",
2295 33554432 => "Retry",
@@ -2304,12 +2304,13 @@ describe('Timeline profiler', () => {
2304 2 => Array [],
2305 4 => Array [],
2306 8 => Array [],
2307 - 16 => Array [
2307 + 16 => Array [],
2308 + 32 => Array [
2309 Object {
2310 "batchUID": 1,
2311 "depth": 0,
2312 "duration": 0,
2312 - "lanes": "0b0000000000000000000000000010000",
2313 + "lanes": "0b0000000000000000000000000100000",
2314 "timestamp": 10,
2315 "type": "render-idle",
2316 },
@@ -2317,7 +2318,7 @@ describe('Timeline profiler', () => {
2318 "batchUID": 1,
2319 "depth": 0,
2320 "duration": 0,
2320 - "lanes": "0b0000000000000000000000000010000",
2321 + "lanes": "0b0000000000000000000000000100000",
2322 "timestamp": 10,
2323 "type": "render",
2324 },
@@ -2325,7 +2326,7 @@ describe('Timeline profiler', () => {
2326 "batchUID": 1,
2327 "depth": 0,
2328 "duration": 0,
2328 - "lanes": "0b0000000000000000000000000010000",
2329 + "lanes": "0b0000000000000000000000000100000",
2330 "timestamp": 10,
2331 "type": "commit",
2332 },
@@ -2333,7 +2334,7 @@ describe('Timeline profiler', () => {
2334 "batchUID": 1,
2335 "depth": 1,
2336 "duration": 0,
2336 - "lanes": "0b0000000000000000000000000010000",
2337 + "lanes": "0b0000000000000000000000000100000",
2338 "timestamp": 10,
2339 "type": "layout-effects",
2340 },
@@ -2341,7 +2342,7 @@ describe('Timeline profiler', () => {
2342 "batchUID": 1,
2343 "depth": 0,
2344 "duration": 0,
2344 - "lanes": "0b0000000000000000000000000010000",
2345 + "lanes": "0b0000000000000000000000000100000",
2346 "timestamp": 10,
2347 "type": "passive-effects",
2348 },
@@ -2349,7 +2350,7 @@ describe('Timeline profiler', () => {
2350 "batchUID": 2,
2351 "depth": 0,
2352 "duration": 0,
2352 - "lanes": "0b0000000000000000000000000010000",
2353 + "lanes": "0b0000000000000000000000000100000",
2354 "timestamp": 10,
2355 "type": "render-idle",
2356 },
@@ -2357,7 +2358,7 @@ describe('Timeline profiler', () => {
2358 "batchUID": 2,
2359 "depth": 0,
2360 "duration": 0,
2360 - "lanes": "0b0000000000000000000000000010000",
2361 + "lanes": "0b0000000000000000000000000100000",
2362 "timestamp": 10,
2363 "type": "render",
2364 },
@@ -2365,7 +2366,7 @@ describe('Timeline profiler', () => {
2366 "batchUID": 2,
2367 "depth": 0,
2368 "duration": 0,
2368 - "lanes": "0b0000000000000000000000000010000",
2369 + "lanes": "0b0000000000000000000000000100000",
2370 "timestamp": 10,
2371 "type": "commit",
2372 },
@@ -2373,7 +2374,7 @@ describe('Timeline profiler', () => {
2374 "batchUID": 2,
2375 "depth": 1,
2376 "duration": 0,
2376 - "lanes": "0b0000000000000000000000000010000",
2377 + "lanes": "0b0000000000000000000000000100000",
2378 "timestamp": 10,
2379 "type": "layout-effects",
2380 },
@@ -2381,12 +2382,11 @@ describe('Timeline profiler', () => {
2382 "batchUID": 2,
2383 "depth": 0,
2384 "duration": 0,
2384 - "lanes": "0b0000000000000000000000000010000",
2385 + "lanes": "0b0000000000000000000000000100000",
2386 "timestamp": 10,
2387 "type": "passive-effects",
2388 },
2389 ],
2389 - 32 => Array [],
2390 64 => Array [],
2391 128 => Array [],
2392 256 => Array [],
@@ -2419,7 +2419,7 @@ describe('Timeline profiler', () => {
2419 "reactVersion": "<filtered-version>",
2420 "schedulingEvents": Array [
2421 Object {
2422 - "lanes": "0b0000000000000000000000000010000",
2422 + "lanes": "0b0000000000000000000000000100000",
2423 "timestamp": 10,
2424 "type": "schedule-render",
2425 "warning": null,
@@ -2428,7 +2428,7 @@ describe('Timeline profiler', () => {
2428 "componentName": "App",
2429 "componentStack": "
2430 in App (at **)",
2431 - "lanes": "0b0000000000000000000000000010000",
2431 + "lanes": "0b0000000000000000000000000100000",
2432 "timestamp": 10,
2433 "type": "schedule-state-update",
2434 "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 ]);