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

Resubmit Add HydrationSyncLane (#25878)

Depends on #25876 Resubmit #25711 again(previously reverted in #25812), and added the fix for unwinding in selective hydration during a hydration on the sync lane.

Tianyu Yao committed Dec 15, 2022 at 12:23 UTC fabef7a6b71798fe2477720e59d090a0e74e0009
6 files changed +543 -398
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+220 -254
@@ -126,37 +126,35 @@ describe('Timeline profiler', () => {
126 setPerformanceMock(null);
127 });
128
129 - // @reactVersion >=18.0
129 it('should mark sync render without suspends or state updates', () => {
130 renderHelper(<div />);
131
132 expect(clearedMarks).toMatchInlineSnapshot(`
133 Array [
135 - "--schedule-render-1",
136 - "--render-start-1",
134 + "--schedule-render-2",
135 + "--render-start-2",
136 "--render-stop",
138 - "--commit-start-1",
137 + "--commit-start-2",
138 "--react-version-<filtered-version>",
139 "--profiler-version-1",
140 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
141 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
143 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
144 - "--layout-effects-start-1",
142 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
143 + "--layout-effects-start-2",
144 "--layout-effects-stop",
145 "--commit-stop",
146 ]
147 `);
148 });
149
151 - // @reactVersion >=18.0
150 it('should mark concurrent render without suspends or state updates', () => {
151 renderRootHelper(<div />);
152
153 expect(clearedMarks).toMatchInlineSnapshot(`
156 - Array [
157 - "--schedule-render-16",
158 - ]
159 - `);
154 + Array [
155 + "--schedule-render-32",
156 + ]
157 + `);
158
159 clearPendingMarks();
160
@@ -164,22 +162,21 @@ describe('Timeline profiler', () => {
162
163 expect(clearedMarks).toMatchInlineSnapshot(`
164 Array [
167 - "--render-start-16",
165 + "--render-start-32",
166 "--render-stop",
169 - "--commit-start-16",
167 + "--commit-start-32",
168 "--react-version-<filtered-version>",
169 "--profiler-version-1",
170 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
171 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
174 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
175 - "--layout-effects-start-16",
172 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
173 + "--layout-effects-start-32",
174 "--layout-effects-stop",
175 "--commit-stop",
176 ]
177 `);
178 });
179
182 - // @reactVersion >=18.0
180 it('should mark render yields', async () => {
181 function Bar() {
182 Scheduler.unstable_yieldValue('Bar');
@@ -199,17 +196,16 @@ describe('Timeline profiler', () => {
196 expect(Scheduler).toFlushAndYieldThrough(['Foo']);
197
198 expect(clearedMarks).toMatchInlineSnapshot(`
202 - Array [
203 - "--schedule-render-64",
204 - "--render-start-64",
205 - "--component-render-start-Foo",
206 - "--component-render-stop",
207 - "--render-yield",
208 - ]
209 - `);
199 + Array [
200 + "--schedule-render-128",
201 + "--render-start-128",
202 + "--component-render-start-Foo",
203 + "--component-render-stop",
204 + "--render-yield",
205 + ]
206 + `);
207 });
208
212 - // @reactVersion >=18.0
209 it('should mark sync render with suspense that resolves', async () => {
210 const fakeSuspensePromise = Promise.resolve(true);
211 function Example() {
@@ -224,19 +220,19 @@ describe('Timeline profiler', () => {
220
221 expect(clearedMarks).toMatchInlineSnapshot(`
222 Array [
227 - "--schedule-render-1",
228 - "--render-start-1",
223 + "--schedule-render-2",
224 + "--render-start-2",
225 "--component-render-start-Example",
226 "--component-render-stop",
231 - "--suspense-suspend-0-Example-mount-1-",
227 + "--suspense-suspend-0-Example-mount-2-",
228 "--render-stop",
233 - "--commit-start-1",
229 + "--commit-start-2",
230 "--react-version-<filtered-version>",
231 "--profiler-version-1",
232 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
233 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
238 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
239 - "--layout-effects-start-1",
234 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
235 + "--layout-effects-start-2",
236 "--layout-effects-stop",
237 "--commit-stop",
238 ]
@@ -252,7 +248,6 @@ describe('Timeline profiler', () => {
248 `);
249 });
250
255 - // @reactVersion >=18.0
251 it('should mark sync render with suspense that rejects', async () => {
252 const fakeSuspensePromise = Promise.reject(new Error('error'));
253 function Example() {
@@ -267,19 +262,19 @@ describe('Timeline profiler', () => {
262
263 expect(clearedMarks).toMatchInlineSnapshot(`
264 Array [
270 - "--schedule-render-1",
271 - "--render-start-1",
265 + "--schedule-render-2",
266 + "--render-start-2",
267 "--component-render-start-Example",
268 "--component-render-stop",
274 - "--suspense-suspend-0-Example-mount-1-",
269 + "--suspense-suspend-0-Example-mount-2-",
270 "--render-stop",
276 - "--commit-start-1",
271 + "--commit-start-2",
272 "--react-version-<filtered-version>",
273 "--profiler-version-1",
274 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
275 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
281 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
282 - "--layout-effects-start-1",
276 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
277 + "--layout-effects-start-2",
278 "--layout-effects-stop",
279 "--commit-stop",
280 ]
@@ -291,7 +286,6 @@ describe('Timeline profiler', () => {
286 expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
287 });
288
294 - // @reactVersion >=18.0
289 it('should mark concurrent render with suspense that resolves', async () => {
290 const fakeSuspensePromise = Promise.resolve(true);
291 function Example() {
@@ -305,10 +299,10 @@ describe('Timeline profiler', () => {
299 );
300
301 expect(clearedMarks).toMatchInlineSnapshot(`
308 - Array [
309 - "--schedule-render-16",
310 - ]
311 - `);
302 + Array [
303 + "--schedule-render-32",
304 + ]
305 + `);
306
307 clearPendingMarks();
308
@@ -316,18 +310,18 @@ describe('Timeline profiler', () => {
310
311 expect(clearedMarks).toMatchInlineSnapshot(`
312 Array [
319 - "--render-start-16",
313 + "--render-start-32",
314 "--component-render-start-Example",
315 "--component-render-stop",
322 - "--suspense-suspend-0-Example-mount-16-",
316 + "--suspense-suspend-0-Example-mount-32-",
317 "--render-stop",
324 - "--commit-start-16",
318 + "--commit-start-32",
319 "--react-version-<filtered-version>",
320 "--profiler-version-1",
321 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
322 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
329 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
330 - "--layout-effects-start-16",
323 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
324 + "--layout-effects-start-32",
325 "--layout-effects-stop",
326 "--commit-stop",
327 ]
@@ -343,7 +337,6 @@ describe('Timeline profiler', () => {
337 `);
338 });
339
346 - // @reactVersion >=18.0
340 it('should mark concurrent render with suspense that rejects', async () => {
341 const fakeSuspensePromise = Promise.reject(new Error('error'));
342 function Example() {
@@ -357,10 +350,10 @@ describe('Timeline profiler', () => {
350 );
351
352 expect(clearedMarks).toMatchInlineSnapshot(`
360 - Array [
361 - "--schedule-render-16",
362 - ]
363 - `);
353 + Array [
354 + "--schedule-render-32",
355 + ]
356 + `);
357
358 clearPendingMarks();
359
@@ -368,18 +361,18 @@ describe('Timeline profiler', () => {
361
362 expect(clearedMarks).toMatchInlineSnapshot(`
363 Array [
371 - "--render-start-16",
364 + "--render-start-32",
365 "--component-render-start-Example",
366 "--component-render-stop",
374 - "--suspense-suspend-0-Example-mount-16-",
367 + "--suspense-suspend-0-Example-mount-32-",
368 "--render-stop",
376 - "--commit-start-16",
369 + "--commit-start-32",
370 "--react-version-<filtered-version>",
371 "--profiler-version-1",
372 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
373 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
381 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
382 - "--layout-effects-start-16",
374 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
375 + "--layout-effects-start-32",
376 "--layout-effects-stop",
377 "--commit-stop",
378 ]
@@ -395,7 +388,6 @@ describe('Timeline profiler', () => {
388 `);
389 });
390
398 - // @reactVersion >=18.0
391 it('should mark cascading class component state updates', () => {
392 class Example extends React.Component {
393 state = {didMount: false};
@@ -410,10 +402,10 @@ describe('Timeline profiler', () => {
402 renderRootHelper(<Example />);
403
404 expect(clearedMarks).toMatchInlineSnapshot(`
413 - Array [
414 - "--schedule-render-16",
415 - ]
416 - `);
405 + Array [
406 + "--schedule-render-32",
407 + ]
408 + `);
409
410 clearPendingMarks();
411
@@ -421,36 +413,35 @@ describe('Timeline profiler', () => {
413
414 expect(clearedMarks).toMatchInlineSnapshot(`
415 Array [
424 - "--render-start-16",
416 + "--render-start-32",
417 "--component-render-start-Example",
418 "--component-render-stop",
419 "--render-stop",
428 - "--commit-start-16",
420 + "--commit-start-32",
421 "--react-version-<filtered-version>",
422 "--profiler-version-1",
423 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
424 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
433 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
434 - "--layout-effects-start-16",
435 - "--schedule-state-update-1-Example",
425 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
426 + "--layout-effects-start-32",
427 + "--schedule-state-update-2-Example",
428 "--layout-effects-stop",
437 - "--render-start-1",
429 + "--render-start-2",
430 "--component-render-start-Example",
431 "--component-render-stop",
432 "--render-stop",
441 - "--commit-start-1",
433 + "--commit-start-2",
434 "--react-version-<filtered-version>",
435 "--profiler-version-1",
436 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
437 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
446 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
438 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
439 "--commit-stop",
440 "--commit-stop",
441 ]
442 `);
443 });
444
453 - // @reactVersion >=18.0
445 it('should mark cascading class component force updates', () => {
446 class Example extends React.Component {
447 componentDidMount() {
@@ -464,10 +455,10 @@ describe('Timeline profiler', () => {
455 renderRootHelper(<Example />);
456
457 expect(clearedMarks).toMatchInlineSnapshot(`
467 - Array [
468 - "--schedule-render-16",
469 - ]
470 - `);
458 + Array [
459 + "--schedule-render-32",
460 + ]
461 + `);
462
463 clearPendingMarks();
464
@@ -475,36 +466,35 @@ describe('Timeline profiler', () => {
466
467 expect(clearedMarks).toMatchInlineSnapshot(`
468 Array [
478 - "--render-start-16",
469 + "--render-start-32",
470 "--component-render-start-Example",
471 "--component-render-stop",
472 "--render-stop",
482 - "--commit-start-16",
473 + "--commit-start-32",
474 "--react-version-<filtered-version>",
475 "--profiler-version-1",
476 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
477 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
487 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
488 - "--layout-effects-start-16",
489 - "--schedule-forced-update-1-Example",
478 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
479 + "--layout-effects-start-32",
480 + "--schedule-forced-update-2-Example",
481 "--layout-effects-stop",
491 - "--render-start-1",
482 + "--render-start-2",
483 "--component-render-start-Example",
484 "--component-render-stop",
485 "--render-stop",
495 - "--commit-start-1",
486 + "--commit-start-2",
487 "--react-version-<filtered-version>",
488 "--profiler-version-1",
489 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
490 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
500 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
491 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
492 "--commit-stop",
493 "--commit-stop",
494 ]
495 `);
496 });
497
507 - // @reactVersion >=18.0
498 it('should mark render phase state updates for class component', () => {
499 class Example extends React.Component {
500 state = {didRender: false};
@@ -519,10 +509,10 @@ describe('Timeline profiler', () => {
509 renderRootHelper(<Example />);
510
511 expect(clearedMarks).toMatchInlineSnapshot(`
522 - Array [
523 - "--schedule-render-16",
524 - ]
525 - `);
512 + Array [
513 + "--schedule-render-32",
514 + ]
515 + `);
516
517 clearPendingMarks();
518
@@ -540,25 +530,24 @@ describe('Timeline profiler', () => {
530
531 expect(clearedMarks).toMatchInlineSnapshot(`
532 Array [
543 - "--render-start-16",
533 + "--render-start-32",
534 "--component-render-start-Example",
545 - "--schedule-state-update-16-Example",
535 + "--schedule-state-update-32-Example",
536 "--component-render-stop",
537 "--render-stop",
548 - "--commit-start-16",
538 + "--commit-start-32",
539 "--react-version-<filtered-version>",
540 "--profiler-version-1",
541 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
542 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
553 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
554 - "--layout-effects-start-16",
543 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
544 + "--layout-effects-start-32",
545 "--layout-effects-stop",
546 "--commit-stop",
547 ]
548 `);
549 });
550
561 - // @reactVersion >=18.0
551 it('should mark render phase force updates for class component', () => {
552 let forced = false;
553 class Example extends React.Component {
@@ -574,10 +563,10 @@ describe('Timeline profiler', () => {
563 renderRootHelper(<Example />);
564
565 expect(clearedMarks).toMatchInlineSnapshot(`
577 - Array [
578 - "--schedule-render-16",
579 - ]
580 - `);
566 + Array [
567 + "--schedule-render-32",
568 + ]
569 + `);
570
571 clearPendingMarks();
572
@@ -595,25 +584,24 @@ describe('Timeline profiler', () => {
584
585 expect(clearedMarks).toMatchInlineSnapshot(`
586 Array [
598 - "--render-start-16",
587 + "--render-start-32",
588 "--component-render-start-Example",
600 - "--schedule-forced-update-16-Example",
589 + "--schedule-forced-update-32-Example",
590 "--component-render-stop",
591 "--render-stop",
603 - "--commit-start-16",
592 + "--commit-start-32",
593 "--react-version-<filtered-version>",
594 "--profiler-version-1",
595 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
596 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
608 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
609 - "--layout-effects-start-16",
597 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
598 + "--layout-effects-start-32",
599 "--layout-effects-stop",
600 "--commit-stop",
601 ]
602 `);
603 });
604
616 - // @reactVersion >=18.0
605 it('should mark cascading layout updates', () => {
606 function Example() {
607 const [didMount, setDidMount] = React.useState(false);
@@ -626,10 +614,10 @@ describe('Timeline profiler', () => {
614 renderRootHelper(<Example />);
615
616 expect(clearedMarks).toMatchInlineSnapshot(`
629 - Array [
630 - "--schedule-render-16",
631 - ]
632 - `);
617 + Array [
618 + "--schedule-render-32",
619 + ]
620 + `);
621
622 clearPendingMarks();
623
@@ -637,38 +625,37 @@ describe('Timeline profiler', () => {
625
626 expect(clearedMarks).toMatchInlineSnapshot(`
627 Array [
640 - "--render-start-16",
628 + "--render-start-32",
629 "--component-render-start-Example",
630 "--component-render-stop",
631 "--render-stop",
644 - "--commit-start-16",
632 + "--commit-start-32",
633 "--react-version-<filtered-version>",
634 "--profiler-version-1",
635 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
636 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
649 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
650 - "--layout-effects-start-16",
637 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
638 + "--layout-effects-start-32",
639 "--component-layout-effect-mount-start-Example",
652 - "--schedule-state-update-1-Example",
640 + "--schedule-state-update-2-Example",
641 "--component-layout-effect-mount-stop",
642 "--layout-effects-stop",
655 - "--render-start-1",
643 + "--render-start-2",
644 "--component-render-start-Example",
645 "--component-render-stop",
646 "--render-stop",
659 - "--commit-start-1",
647 + "--commit-start-2",
648 "--react-version-<filtered-version>",
649 "--profiler-version-1",
650 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
651 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
664 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
652 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
653 "--commit-stop",
654 "--commit-stop",
655 ]
656 `);
657 });
658
671 - // @reactVersion >=18.0
659 it('should mark cascading passive updates', () => {
660 function Example() {
661 const [didMount, setDidMount] = React.useState(false);
@@ -684,41 +671,40 @@ describe('Timeline profiler', () => {
671
672 expect(clearedMarks).toMatchInlineSnapshot(`
673 Array [
687 - "--schedule-render-16",
688 - "--render-start-16",
674 + "--schedule-render-32",
675 + "--render-start-32",
676 "--component-render-start-Example",
677 "--component-render-stop",
678 "--render-stop",
692 - "--commit-start-16",
679 + "--commit-start-32",
680 "--react-version-<filtered-version>",
681 "--profiler-version-1",
682 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
683 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
697 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
698 - "--layout-effects-start-16",
684 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
685 + "--layout-effects-start-32",
686 "--layout-effects-stop",
687 "--commit-stop",
701 - "--passive-effects-start-16",
688 + "--passive-effects-start-32",
689 "--component-passive-effect-mount-start-Example",
703 - "--schedule-state-update-16-Example",
690 + "--schedule-state-update-32-Example",
691 "--component-passive-effect-mount-stop",
692 "--passive-effects-stop",
706 - "--render-start-16",
693 + "--render-start-32",
694 "--component-render-start-Example",
695 "--component-render-stop",
696 "--render-stop",
710 - "--commit-start-16",
697 + "--commit-start-32",
698 "--react-version-<filtered-version>",
699 "--profiler-version-1",
700 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
701 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
715 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
702 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
703 "--commit-stop",
704 ]
705 `);
706 });
707
721 - // @reactVersion >=18.0
708 it('should mark render phase updates', () => {
709 function Example() {
710 const [didRender, setDidRender] = React.useState(false);
@@ -734,26 +720,25 @@ describe('Timeline profiler', () => {
720
721 expect(clearedMarks).toMatchInlineSnapshot(`
722 Array [
737 - "--schedule-render-16",
738 - "--render-start-16",
723 + "--schedule-render-32",
724 + "--render-start-32",
725 "--component-render-start-Example",
740 - "--schedule-state-update-16-Example",
726 + "--schedule-state-update-32-Example",
727 "--component-render-stop",
728 "--render-stop",
743 - "--commit-start-16",
729 + "--commit-start-32",
730 "--react-version-<filtered-version>",
731 "--profiler-version-1",
732 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
733 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
748 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
749 - "--layout-effects-start-16",
734 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
735 + "--layout-effects-start-32",
736 "--layout-effects-stop",
737 "--commit-stop",
738 ]
739 `);
740 });
741
756 - // @reactVersion >=18.0
742 it('should mark sync render that throws', async () => {
743 spyOn(console, 'error');
744
@@ -782,8 +767,8 @@ describe('Timeline profiler', () => {
767
768 expect(clearedMarks).toMatchInlineSnapshot(`
769 Array [
785 - "--schedule-render-1",
786 - "--render-start-1",
770 + "--schedule-render-2",
771 + "--render-start-2",
772 "--component-render-start-ErrorBoundary",
773 "--component-render-stop",
774 "--component-render-start-ExampleThatThrows",
@@ -791,32 +776,31 @@ describe('Timeline profiler', () => {
776 "--component-render-stop",
777 "--error-ExampleThatThrows-mount-Expected error",
778 "--render-stop",
794 - "--commit-start-1",
779 + "--commit-start-2",
780 "--react-version-<filtered-version>",
781 "--profiler-version-1",
782 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
783 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
799 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
800 - "--layout-effects-start-1",
801 - "--schedule-state-update-1-ErrorBoundary",
784 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
785 + "--layout-effects-start-2",
786 + "--schedule-state-update-2-ErrorBoundary",
787 "--layout-effects-stop",
788 "--commit-stop",
804 - "--render-start-1",
789 + "--render-start-2",
790 "--component-render-start-ErrorBoundary",
791 "--component-render-stop",
792 "--render-stop",
808 - "--commit-start-1",
793 + "--commit-start-2",
794 "--react-version-<filtered-version>",
795 "--profiler-version-1",
796 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
797 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
813 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
798 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
799 "--commit-stop",
800 ]
801 `);
802 });
803
819 - // @reactVersion >=18.0
804 it('should mark concurrent render that throws', async () => {
805 spyOn(console, 'error');
806
@@ -845,10 +829,10 @@ describe('Timeline profiler', () => {
829 );
830
831 expect(clearedMarks).toMatchInlineSnapshot(`
848 - Array [
849 - "--schedule-render-16",
850 - ]
851 - `);
832 + Array [
833 + "--schedule-render-32",
834 + ]
835 + `);
836
837 clearPendingMarks();
838
@@ -856,7 +840,7 @@ describe('Timeline profiler', () => {
840
841 expect(clearedMarks).toMatchInlineSnapshot(`
842 Array [
859 - "--render-start-16",
843 + "--render-start-32",
844 "--component-render-start-ErrorBoundary",
845 "--component-render-stop",
846 "--component-render-start-ExampleThatThrows",
@@ -864,7 +848,7 @@ describe('Timeline profiler', () => {
848 "--component-render-stop",
849 "--error-ExampleThatThrows-mount-Expected error",
850 "--render-stop",
867 - "--render-start-16",
851 + "--render-start-32",
852 "--component-render-start-ErrorBoundary",
853 "--component-render-stop",
854 "--component-render-start-ExampleThatThrows",
@@ -872,32 +856,31 @@ describe('Timeline profiler', () => {
856 "--component-render-stop",
857 "--error-ExampleThatThrows-mount-Expected error",
858 "--render-stop",
875 - "--commit-start-16",
859 + "--commit-start-32",
860 "--react-version-<filtered-version>",
861 "--profiler-version-1",
862 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
863 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
880 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
881 - "--layout-effects-start-16",
882 - "--schedule-state-update-1-ErrorBoundary",
864 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
865 + "--layout-effects-start-32",
866 + "--schedule-state-update-2-ErrorBoundary",
867 "--layout-effects-stop",
884 - "--render-start-1",
868 + "--render-start-2",
869 "--component-render-start-ErrorBoundary",
870 "--component-render-stop",
871 "--render-stop",
888 - "--commit-start-1",
872 + "--commit-start-2",
873 "--react-version-<filtered-version>",
874 "--profiler-version-1",
875 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
876 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
893 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
877 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
878 "--commit-stop",
879 "--commit-stop",
880 ]
881 `);
882 });
883
900 - // @reactVersion >=18.0
884 it('should mark passive and layout effects', async () => {
885 function ComponentWithEffects() {
886 React.useLayoutEffect(() => {
@@ -947,18 +930,18 @@ describe('Timeline profiler', () => {
930
931 expect(clearedMarks).toMatchInlineSnapshot(`
932 Array [
950 - "--schedule-render-16",
951 - "--render-start-16",
933 + "--schedule-render-32",
934 + "--render-start-32",
935 "--component-render-start-ComponentWithEffects",
936 "--component-render-stop",
937 "--render-stop",
955 - "--commit-start-16",
938 + "--commit-start-32",
939 "--react-version-<filtered-version>",
940 "--profiler-version-1",
941 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
942 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
960 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
961 - "--layout-effects-start-16",
943 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
944 + "--layout-effects-start-32",
945 "--component-layout-effect-mount-start-ComponentWithEffects",
946 "--component-layout-effect-mount-stop",
947 "--component-layout-effect-mount-start-ComponentWithEffects",
@@ -977,17 +960,17 @@ describe('Timeline profiler', () => {
960 ]);
961
962 expect(clearedMarks).toMatchInlineSnapshot(`
980 - Array [
981 - "--passive-effects-start-16",
982 - "--component-passive-effect-mount-start-ComponentWithEffects",
983 - "--component-passive-effect-mount-stop",
984 - "--component-passive-effect-mount-start-ComponentWithEffects",
985 - "--component-passive-effect-mount-stop",
986 - "--component-passive-effect-mount-start-ComponentWithEffects",
987 - "--component-passive-effect-mount-stop",
988 - "--passive-effects-stop",
989 - ]
990 - `);
963 + Array [
964 + "--passive-effects-start-32",
965 + "--component-passive-effect-mount-start-ComponentWithEffects",
966 + "--component-passive-effect-mount-stop",
967 + "--component-passive-effect-mount-start-ComponentWithEffects",
968 + "--component-passive-effect-mount-stop",
969 + "--component-passive-effect-mount-start-ComponentWithEffects",
970 + "--component-passive-effect-mount-stop",
971 + "--passive-effects-stop",
972 + ]
973 + `);
974
975 clearPendingMarks();
976
@@ -1005,22 +988,22 @@ describe('Timeline profiler', () => {
988
989 expect(clearedMarks).toMatchInlineSnapshot(`
990 Array [
1008 - "--schedule-render-1",
1009 - "--render-start-1",
991 + "--schedule-render-2",
992 + "--render-start-2",
993 "--render-stop",
1011 - "--commit-start-1",
994 + "--commit-start-2",
995 "--react-version-<filtered-version>",
996 "--profiler-version-1",
997 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
998 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1016 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
999 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1000 "--component-layout-effect-unmount-start-ComponentWithEffects",
1001 "--component-layout-effect-unmount-stop",
1002 "--component-layout-effect-unmount-start-ComponentWithEffects",
1003 "--component-layout-effect-unmount-stop",
1021 - "--layout-effects-start-1",
1004 + "--layout-effects-start-2",
1005 "--layout-effects-stop",
1023 - "--passive-effects-start-1",
1006 + "--passive-effects-start-2",
1007 "--component-passive-effect-unmount-start-ComponentWithEffects",
1008 "--component-passive-effect-unmount-stop",
1009 "--component-passive-effect-unmount-start-ComponentWithEffects",
@@ -1034,39 +1017,36 @@ describe('Timeline profiler', () => {
1017 });
1018
1019 describe('lane labels', () => {
1037 - // @reactVersion >=18.0
1020 it('regression test SyncLane', () => {
1021 renderHelper(<div />);
1022
1023 expect(clearedMarks).toMatchInlineSnapshot(`
1024 Array [
1043 - "--schedule-render-1",
1044 - "--render-start-1",
1025 + "--schedule-render-2",
1026 + "--render-start-2",
1027 "--render-stop",
1046 - "--commit-start-1",
1028 + "--commit-start-2",
1029 "--react-version-<filtered-version>",
1030 "--profiler-version-1",
1031 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1032 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1051 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1052 - "--layout-effects-start-1",
1033 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1034 + "--layout-effects-start-2",
1035 "--layout-effects-stop",
1036 "--commit-stop",
1037 ]
1038 `);
1039 });
1040
1059 - // @reactVersion >=18.0
1041 it('regression test DefaultLane', () => {
1042 renderRootHelper(<div />);
1043 expect(clearedMarks).toMatchInlineSnapshot(`
1063 - Array [
1064 - "--schedule-render-16",
1065 - ]
1066 - `);
1044 + Array [
1045 + "--schedule-render-32",
1046 + ]
1047 + `);
1048 });
1049
1069 - // @reactVersion >=18.0
1050 it('regression test InputDiscreteLane', async () => {
1051 const targetRef = React.createRef(null);
1052
@@ -1090,25 +1070,24 @@ describe('Timeline profiler', () => {
1070
1071 expect(clearedMarks).toMatchInlineSnapshot(`
1072 Array [
1093 - "--schedule-state-update-1-App",
1094 - "--render-start-1",
1073 + "--schedule-state-update-2-App",
1074 + "--render-start-2",
1075 "--component-render-start-App",
1076 "--component-render-stop",
1077 "--render-stop",
1098 - "--commit-start-1",
1078 + "--commit-start-2",
1079 "--react-version-<filtered-version>",
1080 "--profiler-version-1",
1081 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1082 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1103 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1104 - "--layout-effects-start-1",
1083 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1084 + "--layout-effects-start-2",
1085 "--layout-effects-stop",
1086 "--commit-stop",
1087 ]
1088 `);
1089 });
1090
1111 - // @reactVersion >=18.0
1091 it('regression test InputContinuousLane', async () => {
1092 const targetRef = React.createRef(null);
1093
@@ -1131,18 +1110,18 @@ describe('Timeline profiler', () => {
1110
1111 expect(clearedMarks).toMatchInlineSnapshot(`
1112 Array [
1134 - "--schedule-state-update-4-App",
1135 - "--render-start-4",
1113 + "--schedule-state-update-8-App",
1114 + "--render-start-8",
1115 "--component-render-start-App",
1116 "--component-render-stop",
1117 "--render-stop",
1139 - "--commit-start-4",
1118 + "--commit-start-8",
1119 "--react-version-<filtered-version>",
1120 "--profiler-version-1",
1121 "--react-internal-module-start- at filtered (<anonymous>:0:0)",
1122 "--react-internal-module-stop- at filtered (<anonymous>:1:1)",
1144 - "--react-lane-labels-Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1145 - "--layout-effects-start-4",
1123 + "--react-lane-labels-SyncHydrationLane,Sync,InputContinuousHydration,InputContinuous,DefaultHydration,Default,TransitionHydration,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Transition,Retry,Retry,Retry,Retry,SelectiveHydration,IdleHydration,Idle,Offscreen",
1124 + "--layout-effects-start-8",
1125 "--layout-effects-stop",
1126 "--commit-stop",
1127 ]
@@ -1205,7 +1184,6 @@ describe('Timeline profiler', () => {
1184 utils.act(() => store.profilerStore.startProfiling());
1185 });
1186
1208 - // @reactVersion >=18.0
1187 it('should mark sync render without suspends or state updates', () => {
1188 renderHelper(<div />);
1189
@@ -1213,7 +1191,7 @@ describe('Timeline profiler', () => {
1191 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1192 Array [
1193 Object {
1216 - "lanes": "0b0000000000000000000000000000001",
1194 + "lanes": "0b0000000000000000000000000000010",
1195 "timestamp": 10,
1196 "type": "schedule-render",
1197 "warning": null,
@@ -1222,7 +1200,6 @@ describe('Timeline profiler', () => {
1200 `);
1201 });
1202
1225 - // @reactVersion >=18.0
1203 it('should mark concurrent render without suspends or state updates', () => {
1204 utils.act(() => renderRootHelper(<div />));
1205
@@ -1230,7 +1207,7 @@ describe('Timeline profiler', () => {
1207 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1208 Array [
1209 Object {
1233 - "lanes": "0b0000000000000000000000000010000",
1210 + "lanes": "0b0000000000000000000000000100000",
1211 "timestamp": 10,
1212 "type": "schedule-render",
1213 "warning": null,
@@ -1239,7 +1216,6 @@ describe('Timeline profiler', () => {
1216 `);
1217 });
1218
1242 - // @reactVersion >=18.0
1219 it('should mark concurrent render without suspends or state updates', () => {
1220 let updaterFn;
1221
@@ -1272,7 +1248,7 @@ describe('Timeline profiler', () => {
1248 "componentName": "Example",
1249 "componentStack": "
1250 in Example (at **)",
1275 - "lanes": "0b0000000000000000000000000000100",
1251 + "lanes": "0b0000000000000000000000000001000",
1252 "timestamp": 10,
1253 "type": "schedule-state-update",
1254 "warning": null,
@@ -1281,7 +1257,7 @@ describe('Timeline profiler', () => {
1257 "componentName": "Example",
1258 "componentStack": "
1259 in Example (at **)",
1284 - "lanes": "0b0000000000000000000000001000000",
1260 + "lanes": "0b0000000000000000000000010000000",
1261 "timestamp": 10,
1262 "type": "schedule-state-update",
1263 "warning": null,
@@ -1290,7 +1266,7 @@ describe('Timeline profiler', () => {
1266 "componentName": "Example",
1267 "componentStack": "
1268 in Example (at **)",
1293 - "lanes": "0b0000000000000000000000001000000",
1269 + "lanes": "0b0000000000000000000000010000000",
1270 "timestamp": 10,
1271 "type": "schedule-state-update",
1272 "warning": null,
@@ -1299,7 +1275,7 @@ describe('Timeline profiler', () => {
1275 "componentName": "Example",
1276 "componentStack": "
1277 in Example (at **)",
1302 - "lanes": "0b0000000000000000000000000010000",
1278 + "lanes": "0b0000000000000000000000000100000",
1279 "timestamp": 10,
1280 "type": "schedule-state-update",
1281 "warning": null,
@@ -1586,7 +1562,6 @@ describe('Timeline profiler', () => {
1562 expect(timelineData.componentMeasures).toHaveLength(2);
1563 });
1564
1589 - // @reactVersion >=18.0
1565 it('should mark cascading class component state updates', () => {
1566 class Example extends React.Component {
1567 state = {didMount: false};
@@ -1629,7 +1604,7 @@ describe('Timeline profiler', () => {
1604 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1605 Array [
1606 Object {
1632 - "lanes": "0b0000000000000000000000000010000",
1607 + "lanes": "0b0000000000000000000000000100000",
1608 "timestamp": 10,
1609 "type": "schedule-render",
1610 "warning": null,
@@ -1638,7 +1613,7 @@ describe('Timeline profiler', () => {
1613 "componentName": "Example",
1614 "componentStack": "
1615 in Example (at **)",
1641 - "lanes": "0b0000000000000000000000000000001",
1616 + "lanes": "0b0000000000000000000000000000010",
1617 "timestamp": 20,
1618 "type": "schedule-state-update",
1619 "warning": null,
@@ -1647,7 +1622,6 @@ describe('Timeline profiler', () => {
1622 `);
1623 });
1624
1650 - // @reactVersion >=18.0
1625 it('should mark cascading class component force updates', () => {
1626 let forced = false;
1627 class Example extends React.Component {
@@ -1689,14 +1663,14 @@ describe('Timeline profiler', () => {
1663 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1664 Array [
1665 Object {
1692 - "lanes": "0b0000000000000000000000000010000",
1666 + "lanes": "0b0000000000000000000000000100000",
1667 "timestamp": 10,
1668 "type": "schedule-render",
1669 "warning": null,
1670 },
1671 Object {
1672 "componentName": "Example",
1699 - "lanes": "0b0000000000000000000000000000001",
1673 + "lanes": "0b0000000000000000000000000000010",
1674 "timestamp": 20,
1675 "type": "schedule-force-update",
1676 "warning": null,
@@ -1705,7 +1679,6 @@ describe('Timeline profiler', () => {
1679 `);
1680 });
1681
1708 - // @reactVersion >=18.0
1682 it('should mark render phase state updates for class component', () => {
1683 class Example extends React.Component {
1684 state = {didRender: false};
@@ -1758,7 +1731,7 @@ describe('Timeline profiler', () => {
1731 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1732 Array [
1733 Object {
1761 - "lanes": "0b0000000000000000000000000010000",
1734 + "lanes": "0b0000000000000000000000000100000",
1735 "timestamp": 10,
1736 "type": "schedule-render",
1737 "warning": null,
@@ -1767,7 +1740,7 @@ describe('Timeline profiler', () => {
1740 "componentName": "Example",
1741 "componentStack": "
1742 in Example (at **)",
1770 - "lanes": "0b0000000000000000000000000010000",
1743 + "lanes": "0b0000000000000000000000000100000",
1744 "timestamp": 10,
1745 "type": "schedule-state-update",
1746 "warning": null,
@@ -1776,7 +1749,6 @@ describe('Timeline profiler', () => {
1749 `);
1750 });
1751
1779 - // @reactVersion >=18.0
1752 it('should mark render phase force updates for class component', () => {
1753 let forced = false;
1754 class Example extends React.Component {
@@ -1828,14 +1800,14 @@ describe('Timeline profiler', () => {
1800 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1801 Array [
1802 Object {
1831 - "lanes": "0b0000000000000000000000000010000",
1803 + "lanes": "0b0000000000000000000000000100000",
1804 "timestamp": 10,
1805 "type": "schedule-render",
1806 "warning": null,
1807 },
1808 Object {
1809 "componentName": "Example",
1838 - "lanes": "0b0000000000000000000000000010000",
1810 + "lanes": "0b0000000000000000000000000100000",
1811 "timestamp": 20,
1812 "type": "schedule-force-update",
1813 "warning": null,
@@ -1844,7 +1816,6 @@ describe('Timeline profiler', () => {
1816 `);
1817 });
1818
1847 - // @reactVersion >=18.0
1819 it('should mark cascading layout updates', () => {
1820 function Example() {
1821 const [didMount, setDidMount] = React.useState(false);
@@ -1891,7 +1862,7 @@ describe('Timeline profiler', () => {
1862 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1863 Array [
1864 Object {
1894 - "lanes": "0b0000000000000000000000000010000",
1865 + "lanes": "0b0000000000000000000000000100000",
1866 "timestamp": 10,
1867 "type": "schedule-render",
1868 "warning": null,
@@ -1900,7 +1871,7 @@ describe('Timeline profiler', () => {
1871 "componentName": "Example",
1872 "componentStack": "
1873 in Example (at **)",
1903 - "lanes": "0b0000000000000000000000000000001",
1874 + "lanes": "0b0000000000000000000000000000010",
1875 "timestamp": 21,
1876 "type": "schedule-state-update",
1877 "warning": null,
@@ -1909,7 +1880,6 @@ describe('Timeline profiler', () => {
1880 `);
1881 });
1882
1912 - // @reactVersion >=18.0
1883 it('should mark cascading passive updates', () => {
1884 function Example() {
1885 const [didMount, setDidMount] = React.useState(false);
@@ -1955,7 +1925,7 @@ describe('Timeline profiler', () => {
1925 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1926 Array [
1927 Object {
1958 - "lanes": "0b0000000000000000000000000010000",
1928 + "lanes": "0b0000000000000000000000000100000",
1929 "timestamp": 10,
1930 "type": "schedule-render",
1931 "warning": null,
@@ -1964,7 +1934,7 @@ describe('Timeline profiler', () => {
1934 "componentName": "Example",
1935 "componentStack": "
1936 in Example (at **)",
1967 - "lanes": "0b0000000000000000000000000010000",
1937 + "lanes": "0b0000000000000000000000000100000",
1938 "timestamp": 21,
1939 "type": "schedule-state-update",
1940 "warning": null,
@@ -1973,7 +1943,6 @@ describe('Timeline profiler', () => {
1943 `);
1944 });
1945
1976 - // @reactVersion >=18.0
1946 it('should mark render phase updates', () => {
1947 function Example() {
1948 const [didRender, setDidRender] = React.useState(false);
@@ -2005,7 +1974,7 @@ describe('Timeline profiler', () => {
1974 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1975 Array [
1976 Object {
2008 - "lanes": "0b0000000000000000000000000010000",
1977 + "lanes": "0b0000000000000000000000000100000",
1978 "timestamp": 10,
1979 "type": "schedule-render",
1980 "warning": null,
@@ -2014,7 +1983,7 @@ describe('Timeline profiler', () => {
1983 "componentName": "Example",
1984 "componentStack": "
1985 in Example (at **)",
2017 - "lanes": "0b0000000000000000000000000010000",
1986 + "lanes": "0b0000000000000000000000000100000",
1987 "timestamp": 20,
1988 "type": "schedule-state-update",
1989 "warning": null,
@@ -2023,7 +1992,6 @@ describe('Timeline profiler', () => {
1992 `);
1993 });
1994
2026 - // @reactVersion >=18.0
1995 it('should mark sync render that throws', async () => {
1996 spyOn(console, 'error');
1997
@@ -2090,7 +2058,7 @@ describe('Timeline profiler', () => {
2058 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2059 Array [
2060 Object {
2093 - "lanes": "0b0000000000000000000000000000001",
2061 + "lanes": "0b0000000000000000000000000000010",
2062 "timestamp": 10,
2063 "type": "schedule-render",
2064 "warning": null,
@@ -2099,7 +2067,7 @@ describe('Timeline profiler', () => {
2067 "componentName": "ErrorBoundary",
2068 "componentStack": "
2069 in ErrorBoundary (at **)",
2102 - "lanes": "0b0000000000000000000000000000001",
2070 + "lanes": "0b0000000000000000000000000000010",
2071 "timestamp": 20,
2072 "type": "schedule-state-update",
2073 "warning": null,
@@ -2119,7 +2087,6 @@ describe('Timeline profiler', () => {
2087 `);
2088 });
2089
2122 - // @reactVersion >=18.0
2090 it('should mark concurrent render that throws', async () => {
2091 spyOn(console, 'error');
2092
@@ -2204,7 +2171,7 @@ describe('Timeline profiler', () => {
2171 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2172 Array [
2173 Object {
2207 - "lanes": "0b0000000000000000000000000010000",
2174 + "lanes": "0b0000000000000000000000000100000",
2175 "timestamp": 10,
2176 "type": "schedule-render",
2177 "warning": null,
@@ -2213,7 +2180,7 @@ describe('Timeline profiler', () => {
2180 "componentName": "ErrorBoundary",
2181 "componentStack": "
2182 in ErrorBoundary (at **)",
2216 - "lanes": "0b0000000000000000000000000000001",
2183 + "lanes": "0b0000000000000000000000000000010",
2184 "timestamp": 30,
2185 "type": "schedule-state-update",
2186 "warning": null,
@@ -2240,7 +2207,6 @@ describe('Timeline profiler', () => {
2207 `);
2208 });
2209
2243 - // @reactVersion >=18.0
2210 it('should mark passive and layout effects', async () => {
2211 function ComponentWithEffects() {
2212 React.useLayoutEffect(() => {
@@ -2395,7 +2361,7 @@ describe('Timeline profiler', () => {
2361 "batchUID": 1,
2362 "depth": 0,
2363 "duration": 0,
2398 - "lanes": "0b0000000000000000000000000010000",
2364 + "lanes": "0b0000000000000000000000000100000",
2365 "timestamp": 10,
2366 "type": "render-idle",
2367 },
@@ -2403,7 +2369,7 @@ describe('Timeline profiler', () => {
2369 "batchUID": 1,
2370 "depth": 0,
2371 "duration": 0,
2406 - "lanes": "0b0000000000000000000000000010000",
2372 + "lanes": "0b0000000000000000000000000100000",
2373 "timestamp": 10,
2374 "type": "render",
2375 },
@@ -2411,7 +2377,7 @@ describe('Timeline profiler', () => {
2377 "batchUID": 1,
2378 "depth": 0,
2379 "duration": 0,
2414 - "lanes": "0b0000000000000000000000000010000",
2380 + "lanes": "0b0000000000000000000000000100000",
2381 "timestamp": 10,
2382 "type": "commit",
2383 },
@@ -2419,7 +2385,7 @@ describe('Timeline profiler', () => {
2385 "batchUID": 1,
2386 "depth": 1,
2387 "duration": 0,
2422 - "lanes": "0b0000000000000000000000000010000",
2388 + "lanes": "0b0000000000000000000000000100000",
2389 "timestamp": 10,
2390 "type": "layout-effects",
2391 },
@@ -2427,7 +2393,7 @@ describe('Timeline profiler', () => {
2393 "batchUID": 1,
2394 "depth": 0,
2395 "duration": 0,
2430 - "lanes": "0b0000000000000000000000000010000",
2396 + "lanes": "0b0000000000000000000000000100000",
2397 "timestamp": 10,
2398 "type": "passive-effects",
2399 },
@@ -2437,7 +2403,7 @@ describe('Timeline profiler', () => {
2403 "batchUID": 2,
2404 "depth": 0,
2405 "duration": 0,
2440 - "lanes": "0b0000000000000000000000000000001",
2406 + "lanes": "0b0000000000000000000000000000010",
2407 "timestamp": 10,
2408 "type": "render-idle",
2409 },
@@ -2445,7 +2411,7 @@ describe('Timeline profiler', () => {
2411 "batchUID": 2,
2412 "depth": 0,
2413 "duration": 0,
2448 - "lanes": "0b0000000000000000000000000000001",
2414 + "lanes": "0b0000000000000000000000000000010",
2415 "timestamp": 10,
2416 "type": "render",
2417 },
@@ -2453,7 +2419,7 @@ describe('Timeline profiler', () => {
2419 "batchUID": 2,
2420 "depth": 0,
2421 "duration": 0,
2456 - "lanes": "0b0000000000000000000000000000001",
2422 + "lanes": "0b0000000000000000000000000000010",
2423 "timestamp": 10,
2424 "type": "commit",
2425 },
@@ -2461,7 +2427,7 @@ describe('Timeline profiler', () => {
2427 "batchUID": 2,
2428 "depth": 1,
2429 "duration": 0,
2464 - "lanes": "0b0000000000000000000000000000001",
2430 + "lanes": "0b0000000000000000000000000000010",
2431 "timestamp": 10,
2432 "type": "layout-effects",
2433 },
@@ -2469,7 +2435,7 @@ describe('Timeline profiler', () => {
2435 "batchUID": 2,
2436 "depth": 1,
2437 "duration": 0,
2472 - "lanes": "0b0000000000000000000000000000001",
2438 + "lanes": "0b0000000000000000000000000000010",
2439 "timestamp": 10,
2440 "type": "passive-effects",
2441 },
@@ -2505,7 +2471,7 @@ describe('Timeline profiler', () => {
2471 expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2472 Array [
2473 Object {
2508 - "lanes": "0b0000000000000000000000000010000",
2474 + "lanes": "0b0000000000000000000000000100000",
2475 "timestamp": 10,
2476 "type": "schedule-render",
2477 "warning": null,
@@ -2515,7 +2481,7 @@ describe('Timeline profiler', () => {
2481 "componentStack": "
2482 in Child (at **)
2483 in CommponentWithChildren (at **)",
2518 - "lanes": "0b0000000000000000000000000010000",
2484 + "lanes": "0b0000000000000000000000000100000",
2485 "timestamp": 10,
2486 "type": "schedule-state-update",
2487 "warning": null,
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+86 -90
@@ -613,7 +613,6 @@ describe('Timeline profiler', () => {
613 `);
614 });
615
616 - // @reactVersion >= 18.0
616 it('should process a sample legacy render sequence', async () => {
617 utils.legacyRender(<div />, document.createElement('div'));
618
@@ -629,7 +628,7 @@ describe('Timeline profiler', () => {
628 "batchUID": 0,
629 "depth": 0,
630 "duration": 0.01,
632 - "lanes": "0b0000000000000000000000000000000",
631 + "lanes": "0b0000000000000000000000000000001",
632 "timestamp": 0.006,
633 "type": "render-idle",
634 },
@@ -637,7 +636,7 @@ describe('Timeline profiler', () => {
636 "batchUID": 0,
637 "depth": 0,
638 "duration": 0.001,
640 - "lanes": "0b0000000000000000000000000000000",
639 + "lanes": "0b0000000000000000000000000000001",
640 "timestamp": 0.006,
641 "type": "render",
642 },
@@ -645,7 +644,7 @@ describe('Timeline profiler', () => {
644 "batchUID": 0,
645 "depth": 0,
646 "duration": 0.008,
648 - "lanes": "0b0000000000000000000000000000000",
647 + "lanes": "0b0000000000000000000000000000001",
648 "timestamp": 0.008,
649 "type": "commit",
650 },
@@ -653,7 +652,7 @@ describe('Timeline profiler', () => {
652 "batchUID": 0,
653 "depth": 1,
654 "duration": 0.001,
656 - "lanes": "0b0000000000000000000000000000000",
655 + "lanes": "0b0000000000000000000000000000001",
656 "timestamp": 0.014,
657 "type": "layout-effects",
658 },
@@ -714,12 +713,13 @@ describe('Timeline profiler', () => {
713 30 => "Offscreen",
714 },
715 "laneToReactMeasureMap": Map {
717 - 0 => Array [
716 + 0 => Array [],
717 + 1 => Array [
718 Object {
719 "batchUID": 0,
720 "depth": 0,
721 "duration": 0.01,
722 - "lanes": "0b0000000000000000000000000000000",
722 + "lanes": "0b0000000000000000000000000000001",
723 "timestamp": 0.006,
724 "type": "render-idle",
725 },
@@ -727,7 +727,7 @@ describe('Timeline profiler', () => {
727 "batchUID": 0,
728 "depth": 0,
729 "duration": 0.001,
730 - "lanes": "0b0000000000000000000000000000000",
730 + "lanes": "0b0000000000000000000000000000001",
731 "timestamp": 0.006,
732 "type": "render",
733 },
@@ -735,7 +735,7 @@ describe('Timeline profiler', () => {
735 "batchUID": 0,
736 "depth": 0,
737 "duration": 0.008,
738 - "lanes": "0b0000000000000000000000000000000",
738 + "lanes": "0b0000000000000000000000000000001",
739 "timestamp": 0.008,
740 "type": "commit",
741 },
@@ -743,12 +743,11 @@ describe('Timeline profiler', () => {
743 "batchUID": 0,
744 "depth": 1,
745 "duration": 0.001,
746 - "lanes": "0b0000000000000000000000000000000",
746 + "lanes": "0b0000000000000000000000000000001",
747 "timestamp": 0.014,
748 "type": "layout-effects",
749 },
750 ],
751 - 1 => Array [],
751 2 => Array [],
752 3 => Array [],
753 4 => Array [],
@@ -785,7 +784,7 @@ describe('Timeline profiler', () => {
784 "reactVersion": "<filtered-version>",
785 "schedulingEvents": Array [
786 Object {
788 - "lanes": "0b0000000000000000000000000000000",
787 + "lanes": "0b0000000000000000000000000000001",
788 "timestamp": 0.005,
789 "type": "schedule-render",
790 "warning": null,
@@ -800,7 +799,6 @@ describe('Timeline profiler', () => {
799 `);
800 });
801
803 - // @reactVersion >= 18.0
802 it('should process a sample createRoot render sequence', async () => {
803 function App() {
804 const [didMount, setDidMount] = React.useState(false);
@@ -827,7 +825,7 @@ describe('Timeline profiler', () => {
825 "batchUID": 0,
826 "depth": 0,
827 "duration": 0.012,
830 - "lanes": "0b0000000000000000000000000000100",
828 + "lanes": "0b0000000000000000000000000000101",
829 "timestamp": 0.006,
830 "type": "render-idle",
831 },
@@ -835,7 +833,7 @@ describe('Timeline profiler', () => {
833 "batchUID": 0,
834 "depth": 0,
835 "duration": 0.003,
838 - "lanes": "0b0000000000000000000000000000100",
836 + "lanes": "0b0000000000000000000000000000101",
837 "timestamp": 0.006,
838 "type": "render",
839 },
@@ -843,7 +841,7 @@ describe('Timeline profiler', () => {
841 "batchUID": 0,
842 "depth": 0,
843 "duration": 0.008,
846 - "lanes": "0b0000000000000000000000000000100",
844 + "lanes": "0b0000000000000000000000000000101",
845 "timestamp": 0.01,
846 "type": "commit",
847 },
@@ -851,7 +849,7 @@ describe('Timeline profiler', () => {
849 "batchUID": 0,
850 "depth": 1,
851 "duration": 0.001,
854 - "lanes": "0b0000000000000000000000000000100",
852 + "lanes": "0b0000000000000000000000000000101",
853 "timestamp": 0.016,
854 "type": "layout-effects",
855 },
@@ -859,7 +857,7 @@ describe('Timeline profiler', () => {
857 "batchUID": 0,
858 "depth": 0,
859 "duration": 0.004,
862 - "lanes": "0b0000000000000000000000000000100",
860 + "lanes": "0b0000000000000000000000000000101",
861 "timestamp": 0.019,
862 "type": "passive-effects",
863 },
@@ -869,7 +867,7 @@ describe('Timeline profiler', () => {
867 "batchUID": 1,
868 "depth": 0,
869 "duration": 0.012,
872 - "lanes": "0b0000000000000000000000000000100",
870 + "lanes": "0b0000000000000000000000000000101",
871 "timestamp": 0.024,
872 "type": "render-idle",
873 },
@@ -877,7 +875,7 @@ describe('Timeline profiler', () => {
875 "batchUID": 1,
876 "depth": 0,
877 "duration": 0.003,
880 - "lanes": "0b0000000000000000000000000000100",
878 + "lanes": "0b0000000000000000000000000000101",
879 "timestamp": 0.024,
880 "type": "render",
881 },
@@ -885,7 +883,7 @@ describe('Timeline profiler', () => {
883 "batchUID": 1,
884 "depth": 0,
885 "duration": 0.008,
888 - "lanes": "0b0000000000000000000000000000100",
886 + "lanes": "0b0000000000000000000000000000101",
887 "timestamp": 0.028,
888 "type": "commit",
889 },
@@ -893,7 +891,7 @@ describe('Timeline profiler', () => {
891 "batchUID": 1,
892 "depth": 1,
893 "duration": 0.001,
896 - "lanes": "0b0000000000000000000000000000100",
894 + "lanes": "0b0000000000000000000000000000101",
895 "timestamp": 0.034,
896 "type": "layout-effects",
897 },
@@ -901,7 +899,7 @@ describe('Timeline profiler', () => {
899 "batchUID": 1,
900 "depth": 0,
901 "duration": 0.003,
904 - "lanes": "0b0000000000000000000000000000100",
902 + "lanes": "0b0000000000000000000000000000101",
903 "timestamp": 0.037,
904 "type": "passive-effects",
905 },
@@ -995,12 +993,13 @@ describe('Timeline profiler', () => {
993 1 => Array [],
994 2 => Array [],
995 3 => Array [],
998 - 4 => Array [
996 + 4 => Array [],
997 + 5 => Array [
998 Object {
999 "batchUID": 0,
1000 "depth": 0,
1001 "duration": 0.012,
1003 - "lanes": "0b0000000000000000000000000000100",
1002 + "lanes": "0b0000000000000000000000000000101",
1003 "timestamp": 0.006,
1004 "type": "render-idle",
1005 },
@@ -1008,7 +1007,7 @@ describe('Timeline profiler', () => {
1007 "batchUID": 0,
1008 "depth": 0,
1009 "duration": 0.003,
1011 - "lanes": "0b0000000000000000000000000000100",
1010 + "lanes": "0b0000000000000000000000000000101",
1011 "timestamp": 0.006,
1012 "type": "render",
1013 },
@@ -1016,7 +1015,7 @@ describe('Timeline profiler', () => {
1015 "batchUID": 0,
1016 "depth": 0,
1017 "duration": 0.008,
1019 - "lanes": "0b0000000000000000000000000000100",
1018 + "lanes": "0b0000000000000000000000000000101",
1019 "timestamp": 0.01,
1020 "type": "commit",
1021 },
@@ -1024,7 +1023,7 @@ describe('Timeline profiler', () => {
1023 "batchUID": 0,
1024 "depth": 1,
1025 "duration": 0.001,
1027 - "lanes": "0b0000000000000000000000000000100",
1026 + "lanes": "0b0000000000000000000000000000101",
1027 "timestamp": 0.016,
1028 "type": "layout-effects",
1029 },
@@ -1032,7 +1031,7 @@ describe('Timeline profiler', () => {
1031 "batchUID": 0,
1032 "depth": 0,
1033 "duration": 0.004,
1035 - "lanes": "0b0000000000000000000000000000100",
1034 + "lanes": "0b0000000000000000000000000000101",
1035 "timestamp": 0.019,
1036 "type": "passive-effects",
1037 },
@@ -1040,7 +1039,7 @@ describe('Timeline profiler', () => {
1039 "batchUID": 1,
1040 "depth": 0,
1041 "duration": 0.012,
1043 - "lanes": "0b0000000000000000000000000000100",
1042 + "lanes": "0b0000000000000000000000000000101",
1043 "timestamp": 0.024,
1044 "type": "render-idle",
1045 },
@@ -1048,7 +1047,7 @@ describe('Timeline profiler', () => {
1047 "batchUID": 1,
1048 "depth": 0,
1049 "duration": 0.003,
1051 - "lanes": "0b0000000000000000000000000000100",
1050 + "lanes": "0b0000000000000000000000000000101",
1051 "timestamp": 0.024,
1052 "type": "render",
1053 },
@@ -1056,7 +1055,7 @@ describe('Timeline profiler', () => {
1055 "batchUID": 1,
1056 "depth": 0,
1057 "duration": 0.008,
1059 - "lanes": "0b0000000000000000000000000000100",
1058 + "lanes": "0b0000000000000000000000000000101",
1059 "timestamp": 0.028,
1060 "type": "commit",
1061 },
@@ -1064,7 +1063,7 @@ describe('Timeline profiler', () => {
1063 "batchUID": 1,
1064 "depth": 1,
1065 "duration": 0.001,
1067 - "lanes": "0b0000000000000000000000000000100",
1066 + "lanes": "0b0000000000000000000000000000101",
1067 "timestamp": 0.034,
1068 "type": "layout-effects",
1069 },
@@ -1072,12 +1071,11 @@ describe('Timeline profiler', () => {
1071 "batchUID": 1,
1072 "depth": 0,
1073 "duration": 0.003,
1075 - "lanes": "0b0000000000000000000000000000100",
1074 + "lanes": "0b0000000000000000000000000000101",
1075 "timestamp": 0.037,
1076 "type": "passive-effects",
1077 },
1078 ],
1080 - 5 => Array [],
1079 6 => Array [],
1080 7 => Array [],
1081 8 => Array [],
@@ -1110,14 +1108,14 @@ describe('Timeline profiler', () => {
1108 "reactVersion": "<filtered-version>",
1109 "schedulingEvents": Array [
1110 Object {
1113 - "lanes": "0b0000000000000000000000000000100",
1111 + "lanes": "0b0000000000000000000000000000101",
1112 "timestamp": 0.005,
1113 "type": "schedule-render",
1114 "warning": null,
1115 },
1116 Object {
1117 "componentName": "App",
1120 - "lanes": "0b0000000000000000000000000000100",
1118 + "lanes": "0b0000000000000000000000000000101",
1119 "timestamp": 0.021,
1120 "type": "schedule-state-update",
1121 "warning": null,
@@ -1947,7 +1945,6 @@ describe('Timeline profiler', () => {
1945 global.IS_REACT_ACT_ENVIRONMENT = true;
1946 });
1947
1950 - // @reactVersion >= 18.0
1948 it('should process a sample legacy render sequence', async () => {
1949 utils.legacyRender(<div />, document.createElement('div'));
1950 utils.act(() => store.profilerStore.stopProfiling());
@@ -1963,7 +1960,7 @@ describe('Timeline profiler', () => {
1960 "batchUID": 1,
1961 "depth": 0,
1962 "duration": 0,
1966 - "lanes": "0b0000000000000000000000000000001",
1963 + "lanes": "0b0000000000000000000000000000010",
1964 "timestamp": 10,
1965 "type": "render-idle",
1966 },
@@ -1971,7 +1968,7 @@ describe('Timeline profiler', () => {
1968 "batchUID": 1,
1969 "depth": 0,
1970 "duration": 0,
1974 - "lanes": "0b0000000000000000000000000000001",
1971 + "lanes": "0b0000000000000000000000000000010",
1972 "timestamp": 10,
1973 "type": "render",
1974 },
@@ -1979,7 +1976,7 @@ describe('Timeline profiler', () => {
1976 "batchUID": 1,
1977 "depth": 0,
1978 "duration": 0,
1982 - "lanes": "0b0000000000000000000000000000001",
1979 + "lanes": "0b0000000000000000000000000000010",
1980 "timestamp": 10,
1981 "type": "commit",
1982 },
@@ -1987,7 +1984,7 @@ describe('Timeline profiler', () => {
1984 "batchUID": 1,
1985 "depth": 1,
1986 "duration": 0,
1990 - "lanes": "0b0000000000000000000000000000001",
1987 + "lanes": "0b0000000000000000000000000000010",
1988 "timestamp": 10,
1989 "type": "layout-effects",
1990 },
@@ -1998,13 +1995,13 @@ describe('Timeline profiler', () => {
1995 "flamechart": Array [],
1996 "internalModuleSourceToRanges": Map {},
1997 "laneToLabelMap": Map {
2001 - 1 => "Sync",
2002 - 2 => "InputContinuousHydration",
2003 - 4 => "InputContinuous",
2004 - 8 => "DefaultHydration",
2005 - 16 => "Default",
2006 - 32 => "TransitionHydration",
2007 - 64 => "Transition",
1998 + 1 => "SyncHydrationLane",
1999 + 2 => "Sync",
2000 + 4 => "InputContinuousHydration",
2001 + 8 => "InputContinuous",
2002 + 16 => "DefaultHydration",
2003 + 32 => "Default",
2004 + 64 => "TransitionHydration",
2005 128 => "Transition",
2006 256 => "Transition",
2007 512 => "Transition",
@@ -2020,7 +2017,7 @@ describe('Timeline profiler', () => {
2017 524288 => "Transition",
2018 1048576 => "Transition",
2019 2097152 => "Transition",
2023 - 4194304 => "Retry",
2020 + 4194304 => "Transition",
2021 8388608 => "Retry",
2022 16777216 => "Retry",
2023 33554432 => "Retry",
@@ -2031,12 +2028,13 @@ describe('Timeline profiler', () => {
2028 1073741824 => "Offscreen",
2029 },
2030 "laneToReactMeasureMap": Map {
2034 - 1 => Array [
2031 + 1 => Array [],
2032 + 2 => Array [
2033 Object {
2034 "batchUID": 1,
2035 "depth": 0,
2036 "duration": 0,
2039 - "lanes": "0b0000000000000000000000000000001",
2037 + "lanes": "0b0000000000000000000000000000010",
2038 "timestamp": 10,
2039 "type": "render-idle",
2040 },
@@ -2044,7 +2042,7 @@ describe('Timeline profiler', () => {
2042 "batchUID": 1,
2043 "depth": 0,
2044 "duration": 0,
2047 - "lanes": "0b0000000000000000000000000000001",
2045 + "lanes": "0b0000000000000000000000000000010",
2046 "timestamp": 10,
2047 "type": "render",
2048 },
@@ -2052,7 +2050,7 @@ describe('Timeline profiler', () => {
2050 "batchUID": 1,
2051 "depth": 0,
2052 "duration": 0,
2055 - "lanes": "0b0000000000000000000000000000001",
2053 + "lanes": "0b0000000000000000000000000000010",
2054 "timestamp": 10,
2055 "type": "commit",
2056 },
@@ -2060,12 +2058,11 @@ describe('Timeline profiler', () => {
2058 "batchUID": 1,
2059 "depth": 1,
2060 "duration": 0,
2063 - "lanes": "0b0000000000000000000000000000001",
2061 + "lanes": "0b0000000000000000000000000000010",
2062 "timestamp": 10,
2063 "type": "layout-effects",
2064 },
2065 ],
2068 - 2 => Array [],
2066 4 => Array [],
2067 8 => Array [],
2068 16 => Array [],
@@ -2102,7 +2099,7 @@ describe('Timeline profiler', () => {
2099 "reactVersion": "<filtered-version>",
2100 "schedulingEvents": Array [
2101 Object {
2105 - "lanes": "0b0000000000000000000000000000001",
2102 + "lanes": "0b0000000000000000000000000000010",
2103 "timestamp": 10,
2104 "type": "schedule-render",
2105 "warning": null,
@@ -2117,7 +2114,6 @@ describe('Timeline profiler', () => {
2114 `);
2115 });
2116
2120 - // @reactVersion >= 18.0
2117 it('should process a sample createRoot render sequence', async () => {
2118 function App() {
2119 const [didMount, setDidMount] = React.useState(false);
@@ -2153,7 +2149,7 @@ describe('Timeline profiler', () => {
2149 "batchUID": 1,
2150 "depth": 0,
2151 "duration": 0,
2156 - "lanes": "0b0000000000000000000000000010000",
2152 + "lanes": "0b0000000000000000000000000100000",
2153 "timestamp": 10,
2154 "type": "render-idle",
2155 },
@@ -2161,7 +2157,7 @@ describe('Timeline profiler', () => {
2157 "batchUID": 1,
2158 "depth": 0,
2159 "duration": 0,
2164 - "lanes": "0b0000000000000000000000000010000",
2160 + "lanes": "0b0000000000000000000000000100000",
2161 "timestamp": 10,
2162 "type": "render",
2163 },
@@ -2169,7 +2165,7 @@ describe('Timeline profiler', () => {
2165 "batchUID": 1,
2166 "depth": 0,
2167 "duration": 0,
2172 - "lanes": "0b0000000000000000000000000010000",
2168 + "lanes": "0b0000000000000000000000000100000",
2169 "timestamp": 10,
2170 "type": "commit",
2171 },
@@ -2177,7 +2173,7 @@ describe('Timeline profiler', () => {
2173 "batchUID": 1,
2174 "depth": 1,
2175 "duration": 0,
2180 - "lanes": "0b0000000000000000000000000010000",
2176 + "lanes": "0b0000000000000000000000000100000",
2177 "timestamp": 10,
2178 "type": "layout-effects",
2179 },
@@ -2185,7 +2181,7 @@ describe('Timeline profiler', () => {
2181 "batchUID": 1,
2182 "depth": 0,
2183 "duration": 0,
2188 - "lanes": "0b0000000000000000000000000010000",
2184 + "lanes": "0b0000000000000000000000000100000",
2185 "timestamp": 10,
2186 "type": "passive-effects",
2187 },
@@ -2195,7 +2191,7 @@ describe('Timeline profiler', () => {
2191 "batchUID": 2,
2192 "depth": 0,
2193 "duration": 0,
2198 - "lanes": "0b0000000000000000000000000010000",
2194 + "lanes": "0b0000000000000000000000000100000",
2195 "timestamp": 10,
2196 "type": "render-idle",
2197 },
@@ -2203,7 +2199,7 @@ describe('Timeline profiler', () => {
2199 "batchUID": 2,
2200 "depth": 0,
2201 "duration": 0,
2206 - "lanes": "0b0000000000000000000000000010000",
2202 + "lanes": "0b0000000000000000000000000100000",
2203 "timestamp": 10,
2204 "type": "render",
2205 },
@@ -2211,7 +2207,7 @@ describe('Timeline profiler', () => {
2207 "batchUID": 2,
2208 "depth": 0,
2209 "duration": 0,
2214 - "lanes": "0b0000000000000000000000000010000",
2210 + "lanes": "0b0000000000000000000000000100000",
2211 "timestamp": 10,
2212 "type": "commit",
2213 },
@@ -2219,7 +2215,7 @@ describe('Timeline profiler', () => {
2215 "batchUID": 2,
2216 "depth": 1,
2217 "duration": 0,
2222 - "lanes": "0b0000000000000000000000000010000",
2218 + "lanes": "0b0000000000000000000000000100000",
2219 "timestamp": 10,
2220 "type": "layout-effects",
2221 },
@@ -2227,7 +2223,7 @@ describe('Timeline profiler', () => {
2223 "batchUID": 2,
2224 "depth": 0,
2225 "duration": 0,
2230 - "lanes": "0b0000000000000000000000000010000",
2226 + "lanes": "0b0000000000000000000000000100000",
2227 "timestamp": 10,
2228 "type": "passive-effects",
2229 },
@@ -2267,13 +2263,13 @@ describe('Timeline profiler', () => {
2263 "flamechart": Array [],
2264 "internalModuleSourceToRanges": Map {},
2265 "laneToLabelMap": Map {
2270 - 1 => "Sync",
2271 - 2 => "InputContinuousHydration",
2272 - 4 => "InputContinuous",
2273 - 8 => "DefaultHydration",
2274 - 16 => "Default",
2275 - 32 => "TransitionHydration",
2276 - 64 => "Transition",
2266 + 1 => "SyncHydrationLane",
2267 + 2 => "Sync",
2268 + 4 => "InputContinuousHydration",
2269 + 8 => "InputContinuous",
2270 + 16 => "DefaultHydration",
2271 + 32 => "Default",
2272 + 64 => "TransitionHydration",
2273 128 => "Transition",
2274 256 => "Transition",
2275 512 => "Transition",
@@ -2289,7 +2285,7 @@ describe('Timeline profiler', () => {
2285 524288 => "Transition",
2286 1048576 => "Transition",
2287 2097152 => "Transition",
2292 - 4194304 => "Retry",
2288 + 4194304 => "Transition",
2289 8388608 => "Retry",
2290 16777216 => "Retry",
2291 33554432 => "Retry",
@@ -2304,12 +2300,13 @@ describe('Timeline profiler', () => {
2300 2 => Array [],
2301 4 => Array [],
2302 8 => Array [],
2307 - 16 => Array [
2303 + 16 => Array [],
2304 + 32 => Array [
2305 Object {
2306 "batchUID": 1,
2307 "depth": 0,
2308 "duration": 0,
2312 - "lanes": "0b0000000000000000000000000010000",
2309 + "lanes": "0b0000000000000000000000000100000",
2310 "timestamp": 10,
2311 "type": "render-idle",
2312 },
@@ -2317,7 +2314,7 @@ describe('Timeline profiler', () => {
2314 "batchUID": 1,
2315 "depth": 0,
2316 "duration": 0,
2320 - "lanes": "0b0000000000000000000000000010000",
2317 + "lanes": "0b0000000000000000000000000100000",
2318 "timestamp": 10,
2319 "type": "render",
2320 },
@@ -2325,7 +2322,7 @@ describe('Timeline profiler', () => {
2322 "batchUID": 1,
2323 "depth": 0,
2324 "duration": 0,
2328 - "lanes": "0b0000000000000000000000000010000",
2325 + "lanes": "0b0000000000000000000000000100000",
2326 "timestamp": 10,
2327 "type": "commit",
2328 },
@@ -2333,7 +2330,7 @@ describe('Timeline profiler', () => {
2330 "batchUID": 1,
2331 "depth": 1,
2332 "duration": 0,
2336 - "lanes": "0b0000000000000000000000000010000",
2333 + "lanes": "0b0000000000000000000000000100000",
2334 "timestamp": 10,
2335 "type": "layout-effects",
2336 },
@@ -2341,7 +2338,7 @@ describe('Timeline profiler', () => {
2338 "batchUID": 1,
2339 "depth": 0,
2340 "duration": 0,
2344 - "lanes": "0b0000000000000000000000000010000",
2341 + "lanes": "0b0000000000000000000000000100000",
2342 "timestamp": 10,
2343 "type": "passive-effects",
2344 },
@@ -2349,7 +2346,7 @@ describe('Timeline profiler', () => {
2346 "batchUID": 2,
2347 "depth": 0,
2348 "duration": 0,
2352 - "lanes": "0b0000000000000000000000000010000",
2349 + "lanes": "0b0000000000000000000000000100000",
2350 "timestamp": 10,
2351 "type": "render-idle",
2352 },
@@ -2357,7 +2354,7 @@ describe('Timeline profiler', () => {
2354 "batchUID": 2,
2355 "depth": 0,
2356 "duration": 0,
2360 - "lanes": "0b0000000000000000000000000010000",
2357 + "lanes": "0b0000000000000000000000000100000",
2358 "timestamp": 10,
2359 "type": "render",
2360 },
@@ -2365,7 +2362,7 @@ describe('Timeline profiler', () => {
2362 "batchUID": 2,
2363 "depth": 0,
2364 "duration": 0,
2368 - "lanes": "0b0000000000000000000000000010000",
2365 + "lanes": "0b0000000000000000000000000100000",
2366 "timestamp": 10,
2367 "type": "commit",
2368 },
@@ -2373,7 +2370,7 @@ describe('Timeline profiler', () => {
2370 "batchUID": 2,
2371 "depth": 1,
2372 "duration": 0,
2376 - "lanes": "0b0000000000000000000000000010000",
2373 + "lanes": "0b0000000000000000000000000100000",
2374 "timestamp": 10,
2375 "type": "layout-effects",
2376 },
@@ -2381,12 +2378,11 @@ describe('Timeline profiler', () => {
2378 "batchUID": 2,
2379 "depth": 0,
2380 "duration": 0,
2384 - "lanes": "0b0000000000000000000000000010000",
2381 + "lanes": "0b0000000000000000000000000100000",
2382 "timestamp": 10,
2383 "type": "passive-effects",
2384 },
2385 ],
2389 - 32 => Array [],
2386 64 => Array [],
2387 128 => Array [],
2388 256 => Array [],
@@ -2419,7 +2415,7 @@ describe('Timeline profiler', () => {
2415 "reactVersion": "<filtered-version>",
2416 "schedulingEvents": Array [
2417 Object {
2422 - "lanes": "0b0000000000000000000000000010000",
2418 + "lanes": "0b0000000000000000000000000100000",
2419 "timestamp": 10,
2420 "type": "schedule-render",
2421 "warning": null,
@@ -2428,7 +2424,7 @@ describe('Timeline profiler', () => {
2424 "componentName": "App",
2425 "componentStack": "
2426 in App (at **)",
2431 - "lanes": "0b0000000000000000000000000010000",
2427 + "lanes": "0b0000000000000000000000000100000",
2428 "timestamp": 10,
2429 "type": "schedule-state-update",
2430 "warning": null,
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+177
@@ -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 () => {
@@ -1771,6 +1786,106 @@ describe('ReactDOMServerSelectiveHydration', () => {
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 +
1889 // @gate experimental || www
1890 it('regression test: can unwind context on selective hydration interruption', async () => {
1891 const Context = React.createContext('DefaultContext');
@@ -1838,4 +1953,66 @@ describe('ReactDOMServerSelectiveHydration', () => {
1953 ]);
1954 });
1955 });
1956 +
1957 + it('regression test: can unwind context on selective hydration interruption for sync updates', async () => {
1958 + const Context = React.createContext('DefaultContext');
1959 +
1960 + function ContextReader(props) {
1961 + const value = React.useContext(Context);
1962 + Scheduler.unstable_yieldValue(value);
1963 + return null;
1964 + }
1965 +
1966 + function Child({text}) {
1967 + Scheduler.unstable_yieldValue(text);
1968 + return <span>{text}</span>;
1969 + }
1970 + const ChildWithBoundary = React.memo(function({text}) {
1971 + return (
1972 + <Suspense fallback="Loading...">
1973 + <Child text={text} />
1974 + </Suspense>
1975 + );
1976 + });
1977 +
1978 + function App({a}) {
1979 + Scheduler.unstable_yieldValue('App');
1980 + React.useEffect(() => {
1981 + Scheduler.unstable_yieldValue('Commit');
1982 + });
1983 + return (
1984 + <>
1985 + <Context.Provider value="SiblingContext">
1986 + <ChildWithBoundary text={a} />
1987 + </Context.Provider>
1988 + <ContextReader />
1989 + </>
1990 + );
1991 + }
1992 + const finalHTML = ReactDOMServer.renderToString(<App a="A" />);
1993 + expect(Scheduler).toHaveYielded(['App', 'A', 'DefaultContext']);
1994 + const container = document.createElement('div');
1995 + container.innerHTML = finalHTML;
1996 +
1997 + await act(async () => {
1998 + const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
1999 + expect(Scheduler).toFlushAndYieldThrough([
2000 + 'App',
2001 + 'DefaultContext',
2002 + 'Commit',
2003 + ]);
2004 +
2005 + ReactDOM.flushSync(() => {
2006 + root.render(<App a="AA" />);
2007 + });
2008 + expect(Scheduler).toHaveYielded([
2009 + 'App',
2010 + 'A',
2011 + 'App',
2012 + 'AA',
2013 + 'DefaultContext',
2014 + 'Commit',
2015 + ]);
2016 + });
2017 + });
2018 });
packages/react-reconciler/src/ReactFiberLane.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.js
+6 -9
@@ -138,7 +138,7 @@ import {
138 NoTimestamp,
139 claimNextTransitionLane,
140 claimNextRetryLane,
141 - includesSomeLane,
141 + includesSyncLane,
142 isSubsetOfLanes,
143 mergeLanes,
144 removeLanes,
@@ -915,7 +915,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
915 // TODO: Temporary until we confirm this warning is not fired.
916 if (
917 existingCallbackNode == null &&
918 - existingCallbackPriority !== SyncLane
918 + !includesSyncLane(existingCallbackPriority)
919 ) {
920 console.error(
921 'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -933,7 +933,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
933
934 // Schedule a new callback.
935 let newCallbackNode;
936 - if (newCallbackPriority === SyncLane) {
936 + if (includesSyncLane(newCallbackPriority)) {
937 // Special case: Sync React callbacks are scheduled on a special
938 // internal queue
939 if (root.tag === LegacyRoot) {
@@ -1477,7 +1477,7 @@ function performSyncWorkOnRoot(root) {
1477 flushPassiveEffects();
1478
1479 let lanes = getNextLanes(root, NoLanes);
1480 - if (!includesSomeLane(lanes, SyncLane)) {
1480 + if (!includesSyncLane(lanes)) {
1481 // There's no remaining sync work left.
1482 ensureRootIsScheduled(root, now());
1483 return null;
@@ -2931,16 +2931,13 @@ function commitRootImpl(
2931 // TODO: We can optimize this by not scheduling the callback earlier. Since we
2932 // currently schedule the callback in multiple places, will wait until those
2933 // are consolidated.
2934 - if (
2935 - includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
2936 - root.tag !== LegacyRoot
2937 - ) {
2934 + if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
2935 flushPassiveEffects();
2936 }
2937
2938 // Read this again, since a passive effect might have updated it
2939 remainingLanes = root.pendingLanes;
2943 - if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
2940 + if (includesSyncLane(remainingLanes)) {
2941 if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
2942 markNestedUpdateScheduled();
2943 }
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 ]);