Revert recent hydration changes (#25812)
We're reverting the stack of changes that this code belongs to in order to unblock the sync to Meta's internal codebase. We will attempt to re-land once the sync is unblocked. I have not yet verified that this fixes the error that were reported internally. I will do that before landing.
Andrew Clark committed
Dec 5, 2022 at 16:10 UTC
d807eb52cfd999cfbcb19078a75b15f844e409bb
7 files changed
+416
-551
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+254
-220
@@ -126,35 +126,37 @@ describe('Timeline profiler', () => {
126
setPerformanceMock(null);
127
});
128
129
+ // @reactVersion >=18.0
130
it('should mark sync render without suspends or state updates', () => {
131
renderHelper(<div />);
132
133
expect(clearedMarks).toMatchInlineSnapshot(`
134
Array [
134
- "--schedule-render-2",
135
- "--render-start-2",
135
+ "--schedule-render-1",
136
+ "--render-start-1",
137
"--render-stop",
137
- "--commit-start-2",
138
+ "--commit-start-1",
139
"--react-version-<filtered-version>",
140
"--profiler-version-1",
141
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
142
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
145
"--layout-effects-stop",
146
"--commit-stop",
147
]
148
`);
149
});
150
151
+ // @reactVersion >=18.0
152
it('should mark concurrent render without suspends or state updates', () => {
153
renderRootHelper(<div />);
154
155
expect(clearedMarks).toMatchInlineSnapshot(`
154
- Array [
155
- "--schedule-render-32",
156
- ]
157
- `);
156
+ Array [
157
+ "--schedule-render-16",
158
+ ]
159
+ `);
160
161
clearPendingMarks();
162
@@ -162,21 +164,22 @@ describe('Timeline profiler', () => {
164
165
expect(clearedMarks).toMatchInlineSnapshot(`
166
Array [
165
- "--render-start-32",
167
+ "--render-start-16",
168
"--render-stop",
167
- "--commit-start-32",
169
+ "--commit-start-16",
170
"--react-version-<filtered-version>",
171
"--profiler-version-1",
172
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
173
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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
+ "--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",
176
"--layout-effects-stop",
177
"--commit-stop",
178
]
179
`);
180
});
181
182
+ // @reactVersion >=18.0
183
it('should mark render yields', async () => {
184
function Bar() {
185
Scheduler.unstable_yieldValue('Bar');
@@ -196,16 +199,17 @@ describe('Timeline profiler', () => {
199
expect(Scheduler).toFlushAndYieldThrough(['Foo']);
200
201
expect(clearedMarks).toMatchInlineSnapshot(`
199
- Array [
200
- "--schedule-render-128",
201
- "--render-start-128",
202
- "--component-render-start-Foo",
203
- "--component-render-stop",
204
- "--render-yield",
205
- ]
206
- `);
202
+ Array [
203
+ "--schedule-render-64",
204
+ "--render-start-64",
205
+ "--component-render-start-Foo",
206
+ "--component-render-stop",
207
+ "--render-yield",
208
+ ]
209
+ `);
210
});
211
212
+ // @reactVersion >=18.0
213
it('should mark sync render with suspense that resolves', async () => {
214
const fakeSuspensePromise = Promise.resolve(true);
215
function Example() {
@@ -220,19 +224,19 @@ describe('Timeline profiler', () => {
224
225
expect(clearedMarks).toMatchInlineSnapshot(`
226
Array [
223
- "--schedule-render-2",
224
- "--render-start-2",
227
+ "--schedule-render-1",
228
+ "--render-start-1",
229
"--component-render-start-Example",
230
"--component-render-stop",
227
- "--suspense-suspend-0-Example-mount-2-",
231
+ "--suspense-suspend-0-Example-mount-1-",
232
"--render-stop",
229
- "--commit-start-2",
233
+ "--commit-start-1",
234
"--react-version-<filtered-version>",
235
"--profiler-version-1",
236
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
237
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
240
"--layout-effects-stop",
241
"--commit-stop",
242
]
@@ -248,6 +252,7 @@ describe('Timeline profiler', () => {
252
`);
253
});
254
255
+ // @reactVersion >=18.0
256
it('should mark sync render with suspense that rejects', async () => {
257
const fakeSuspensePromise = Promise.reject(new Error('error'));
258
function Example() {
@@ -262,19 +267,19 @@ describe('Timeline profiler', () => {
267
268
expect(clearedMarks).toMatchInlineSnapshot(`
269
Array [
265
- "--schedule-render-2",
266
- "--render-start-2",
270
+ "--schedule-render-1",
271
+ "--render-start-1",
272
"--component-render-start-Example",
273
"--component-render-stop",
269
- "--suspense-suspend-0-Example-mount-2-",
274
+ "--suspense-suspend-0-Example-mount-1-",
275
"--render-stop",
271
- "--commit-start-2",
276
+ "--commit-start-1",
277
"--react-version-<filtered-version>",
278
"--profiler-version-1",
279
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
280
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
283
"--layout-effects-stop",
284
"--commit-stop",
285
]
@@ -286,6 +291,7 @@ describe('Timeline profiler', () => {
291
expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
292
});
293
294
+ // @reactVersion >=18.0
295
it('should mark concurrent render with suspense that resolves', async () => {
296
const fakeSuspensePromise = Promise.resolve(true);
297
function Example() {
@@ -299,10 +305,10 @@ describe('Timeline profiler', () => {
305
);
306
307
expect(clearedMarks).toMatchInlineSnapshot(`
302
- Array [
303
- "--schedule-render-32",
304
- ]
305
- `);
308
+ Array [
309
+ "--schedule-render-16",
310
+ ]
311
+ `);
312
313
clearPendingMarks();
314
@@ -310,18 +316,18 @@ describe('Timeline profiler', () => {
316
317
expect(clearedMarks).toMatchInlineSnapshot(`
318
Array [
313
- "--render-start-32",
319
+ "--render-start-16",
320
"--component-render-start-Example",
321
"--component-render-stop",
316
- "--suspense-suspend-0-Example-mount-32-",
322
+ "--suspense-suspend-0-Example-mount-16-",
323
"--render-stop",
318
- "--commit-start-32",
324
+ "--commit-start-16",
325
"--react-version-<filtered-version>",
326
"--profiler-version-1",
327
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
328
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
331
"--layout-effects-stop",
332
"--commit-stop",
333
]
@@ -337,6 +343,7 @@ describe('Timeline profiler', () => {
343
`);
344
});
345
346
+ // @reactVersion >=18.0
347
it('should mark concurrent render with suspense that rejects', async () => {
348
const fakeSuspensePromise = Promise.reject(new Error('error'));
349
function Example() {
@@ -350,10 +357,10 @@ describe('Timeline profiler', () => {
357
);
358
359
expect(clearedMarks).toMatchInlineSnapshot(`
353
- Array [
354
- "--schedule-render-32",
355
- ]
356
- `);
360
+ Array [
361
+ "--schedule-render-16",
362
+ ]
363
+ `);
364
365
clearPendingMarks();
366
@@ -361,18 +368,18 @@ describe('Timeline profiler', () => {
368
369
expect(clearedMarks).toMatchInlineSnapshot(`
370
Array [
364
- "--render-start-32",
371
+ "--render-start-16",
372
"--component-render-start-Example",
373
"--component-render-stop",
367
- "--suspense-suspend-0-Example-mount-32-",
374
+ "--suspense-suspend-0-Example-mount-16-",
375
"--render-stop",
369
- "--commit-start-32",
376
+ "--commit-start-16",
377
"--react-version-<filtered-version>",
378
"--profiler-version-1",
379
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
380
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
383
"--layout-effects-stop",
384
"--commit-stop",
385
]
@@ -388,6 +395,7 @@ describe('Timeline profiler', () => {
395
`);
396
});
397
398
+ // @reactVersion >=18.0
399
it('should mark cascading class component state updates', () => {
400
class Example extends React.Component {
401
state = {didMount: false};
@@ -402,10 +410,10 @@ describe('Timeline profiler', () => {
410
renderRootHelper(<Example />);
411
412
expect(clearedMarks).toMatchInlineSnapshot(`
405
- Array [
406
- "--schedule-render-32",
407
- ]
408
- `);
413
+ Array [
414
+ "--schedule-render-16",
415
+ ]
416
+ `);
417
418
clearPendingMarks();
419
@@ -413,35 +421,36 @@ describe('Timeline profiler', () => {
421
422
expect(clearedMarks).toMatchInlineSnapshot(`
423
Array [
416
- "--render-start-32",
424
+ "--render-start-16",
425
"--component-render-start-Example",
426
"--component-render-stop",
427
"--render-stop",
420
- "--commit-start-32",
428
+ "--commit-start-16",
429
"--react-version-<filtered-version>",
430
"--profiler-version-1",
431
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
432
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
436
"--layout-effects-stop",
429
- "--render-start-2",
437
+ "--render-start-1",
438
"--component-render-start-Example",
439
"--component-render-stop",
440
"--render-stop",
433
- "--commit-start-2",
441
+ "--commit-start-1",
442
"--react-version-<filtered-version>",
443
"--profiler-version-1",
444
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
445
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
447
"--commit-stop",
448
"--commit-stop",
449
]
450
`);
451
});
452
453
+ // @reactVersion >=18.0
454
it('should mark cascading class component force updates', () => {
455
class Example extends React.Component {
456
componentDidMount() {
@@ -455,10 +464,10 @@ describe('Timeline profiler', () => {
464
renderRootHelper(<Example />);
465
466
expect(clearedMarks).toMatchInlineSnapshot(`
458
- Array [
459
- "--schedule-render-32",
460
- ]
461
- `);
467
+ Array [
468
+ "--schedule-render-16",
469
+ ]
470
+ `);
471
472
clearPendingMarks();
473
@@ -466,35 +475,36 @@ describe('Timeline profiler', () => {
475
476
expect(clearedMarks).toMatchInlineSnapshot(`
477
Array [
469
- "--render-start-32",
478
+ "--render-start-16",
479
"--component-render-start-Example",
480
"--component-render-stop",
481
"--render-stop",
473
- "--commit-start-32",
482
+ "--commit-start-16",
483
"--react-version-<filtered-version>",
484
"--profiler-version-1",
485
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
486
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
490
"--layout-effects-stop",
482
- "--render-start-2",
491
+ "--render-start-1",
492
"--component-render-start-Example",
493
"--component-render-stop",
494
"--render-stop",
486
- "--commit-start-2",
495
+ "--commit-start-1",
496
"--react-version-<filtered-version>",
497
"--profiler-version-1",
498
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
499
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
501
"--commit-stop",
502
"--commit-stop",
503
]
504
`);
505
});
506
507
+ // @reactVersion >=18.0
508
it('should mark render phase state updates for class component', () => {
509
class Example extends React.Component {
510
state = {didRender: false};
@@ -509,10 +519,10 @@ describe('Timeline profiler', () => {
519
renderRootHelper(<Example />);
520
521
expect(clearedMarks).toMatchInlineSnapshot(`
512
- Array [
513
- "--schedule-render-32",
514
- ]
515
- `);
522
+ Array [
523
+ "--schedule-render-16",
524
+ ]
525
+ `);
526
527
clearPendingMarks();
528
@@ -530,24 +540,25 @@ describe('Timeline profiler', () => {
540
541
expect(clearedMarks).toMatchInlineSnapshot(`
542
Array [
533
- "--render-start-32",
543
+ "--render-start-16",
544
"--component-render-start-Example",
535
- "--schedule-state-update-32-Example",
545
+ "--schedule-state-update-16-Example",
546
"--component-render-stop",
547
"--render-stop",
538
- "--commit-start-32",
548
+ "--commit-start-16",
549
"--react-version-<filtered-version>",
550
"--profiler-version-1",
551
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
552
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
555
"--layout-effects-stop",
556
"--commit-stop",
557
]
558
`);
559
});
560
561
+ // @reactVersion >=18.0
562
it('should mark render phase force updates for class component', () => {
563
let forced = false;
564
class Example extends React.Component {
@@ -563,10 +574,10 @@ describe('Timeline profiler', () => {
574
renderRootHelper(<Example />);
575
576
expect(clearedMarks).toMatchInlineSnapshot(`
566
- Array [
567
- "--schedule-render-32",
568
- ]
569
- `);
577
+ Array [
578
+ "--schedule-render-16",
579
+ ]
580
+ `);
581
582
clearPendingMarks();
583
@@ -584,24 +595,25 @@ describe('Timeline profiler', () => {
595
596
expect(clearedMarks).toMatchInlineSnapshot(`
597
Array [
587
- "--render-start-32",
598
+ "--render-start-16",
599
"--component-render-start-Example",
589
- "--schedule-forced-update-32-Example",
600
+ "--schedule-forced-update-16-Example",
601
"--component-render-stop",
602
"--render-stop",
592
- "--commit-start-32",
603
+ "--commit-start-16",
604
"--react-version-<filtered-version>",
605
"--profiler-version-1",
606
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
607
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
610
"--layout-effects-stop",
611
"--commit-stop",
612
]
613
`);
614
});
615
616
+ // @reactVersion >=18.0
617
it('should mark cascading layout updates', () => {
618
function Example() {
619
const [didMount, setDidMount] = React.useState(false);
@@ -614,10 +626,10 @@ describe('Timeline profiler', () => {
626
renderRootHelper(<Example />);
627
628
expect(clearedMarks).toMatchInlineSnapshot(`
617
- Array [
618
- "--schedule-render-32",
619
- ]
620
- `);
629
+ Array [
630
+ "--schedule-render-16",
631
+ ]
632
+ `);
633
634
clearPendingMarks();
635
@@ -625,37 +637,38 @@ describe('Timeline profiler', () => {
637
638
expect(clearedMarks).toMatchInlineSnapshot(`
639
Array [
628
- "--render-start-32",
640
+ "--render-start-16",
641
"--component-render-start-Example",
642
"--component-render-stop",
643
"--render-stop",
632
- "--commit-start-32",
644
+ "--commit-start-16",
645
"--react-version-<filtered-version>",
646
"--profiler-version-1",
647
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
648
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
651
"--component-layout-effect-mount-start-Example",
640
- "--schedule-state-update-2-Example",
652
+ "--schedule-state-update-1-Example",
653
"--component-layout-effect-mount-stop",
654
"--layout-effects-stop",
643
- "--render-start-2",
655
+ "--render-start-1",
656
"--component-render-start-Example",
657
"--component-render-stop",
658
"--render-stop",
647
- "--commit-start-2",
659
+ "--commit-start-1",
660
"--react-version-<filtered-version>",
661
"--profiler-version-1",
662
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
663
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
665
"--commit-stop",
666
"--commit-stop",
667
]
668
`);
669
});
670
671
+ // @reactVersion >=18.0
672
it('should mark cascading passive updates', () => {
673
function Example() {
674
const [didMount, setDidMount] = React.useState(false);
@@ -671,40 +684,41 @@ describe('Timeline profiler', () => {
684
685
expect(clearedMarks).toMatchInlineSnapshot(`
686
Array [
674
- "--schedule-render-32",
675
- "--render-start-32",
687
+ "--schedule-render-16",
688
+ "--render-start-16",
689
"--component-render-start-Example",
690
"--component-render-stop",
691
"--render-stop",
679
- "--commit-start-32",
692
+ "--commit-start-16",
693
"--react-version-<filtered-version>",
694
"--profiler-version-1",
695
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
696
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
699
"--layout-effects-stop",
700
"--commit-stop",
688
- "--passive-effects-start-32",
701
+ "--passive-effects-start-16",
702
"--component-passive-effect-mount-start-Example",
690
- "--schedule-state-update-32-Example",
703
+ "--schedule-state-update-16-Example",
704
"--component-passive-effect-mount-stop",
705
"--passive-effects-stop",
693
- "--render-start-32",
706
+ "--render-start-16",
707
"--component-render-start-Example",
708
"--component-render-stop",
709
"--render-stop",
697
- "--commit-start-32",
710
+ "--commit-start-16",
711
"--react-version-<filtered-version>",
712
"--profiler-version-1",
713
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
714
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
716
"--commit-stop",
717
]
718
`);
719
});
720
721
+ // @reactVersion >=18.0
722
it('should mark render phase updates', () => {
723
function Example() {
724
const [didRender, setDidRender] = React.useState(false);
@@ -720,25 +734,26 @@ describe('Timeline profiler', () => {
734
735
expect(clearedMarks).toMatchInlineSnapshot(`
736
Array [
723
- "--schedule-render-32",
724
- "--render-start-32",
737
+ "--schedule-render-16",
738
+ "--render-start-16",
739
"--component-render-start-Example",
726
- "--schedule-state-update-32-Example",
740
+ "--schedule-state-update-16-Example",
741
"--component-render-stop",
742
"--render-stop",
729
- "--commit-start-32",
743
+ "--commit-start-16",
744
"--react-version-<filtered-version>",
745
"--profiler-version-1",
746
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
747
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
750
"--layout-effects-stop",
751
"--commit-stop",
752
]
753
`);
754
});
755
756
+ // @reactVersion >=18.0
757
it('should mark sync render that throws', async () => {
758
spyOn(console, 'error');
759
@@ -767,8 +782,8 @@ describe('Timeline profiler', () => {
782
783
expect(clearedMarks).toMatchInlineSnapshot(`
784
Array [
770
- "--schedule-render-2",
771
- "--render-start-2",
785
+ "--schedule-render-1",
786
+ "--render-start-1",
787
"--component-render-start-ErrorBoundary",
788
"--component-render-stop",
789
"--component-render-start-ExampleThatThrows",
@@ -776,31 +791,32 @@ describe('Timeline profiler', () => {
791
"--component-render-stop",
792
"--error-ExampleThatThrows-mount-Expected error",
793
"--render-stop",
779
- "--commit-start-2",
794
+ "--commit-start-1",
795
"--react-version-<filtered-version>",
796
"--profiler-version-1",
797
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
798
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
802
"--layout-effects-stop",
803
"--commit-stop",
789
- "--render-start-2",
804
+ "--render-start-1",
805
"--component-render-start-ErrorBoundary",
806
"--component-render-stop",
807
"--render-stop",
793
- "--commit-start-2",
808
+ "--commit-start-1",
809
"--react-version-<filtered-version>",
810
"--profiler-version-1",
811
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
812
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
814
"--commit-stop",
815
]
816
`);
817
});
818
819
+ // @reactVersion >=18.0
820
it('should mark concurrent render that throws', async () => {
821
spyOn(console, 'error');
822
@@ -829,10 +845,10 @@ describe('Timeline profiler', () => {
845
);
846
847
expect(clearedMarks).toMatchInlineSnapshot(`
832
- Array [
833
- "--schedule-render-32",
834
- ]
835
- `);
848
+ Array [
849
+ "--schedule-render-16",
850
+ ]
851
+ `);
852
853
clearPendingMarks();
854
@@ -840,7 +856,7 @@ describe('Timeline profiler', () => {
856
857
expect(clearedMarks).toMatchInlineSnapshot(`
858
Array [
843
- "--render-start-32",
859
+ "--render-start-16",
860
"--component-render-start-ErrorBoundary",
861
"--component-render-stop",
862
"--component-render-start-ExampleThatThrows",
@@ -848,7 +864,7 @@ describe('Timeline profiler', () => {
864
"--component-render-stop",
865
"--error-ExampleThatThrows-mount-Expected error",
866
"--render-stop",
851
- "--render-start-32",
867
+ "--render-start-16",
868
"--component-render-start-ErrorBoundary",
869
"--component-render-stop",
870
"--component-render-start-ExampleThatThrows",
@@ -856,31 +872,32 @@ describe('Timeline profiler', () => {
872
"--component-render-stop",
873
"--error-ExampleThatThrows-mount-Expected error",
874
"--render-stop",
859
- "--commit-start-32",
875
+ "--commit-start-16",
876
"--react-version-<filtered-version>",
877
"--profiler-version-1",
878
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
879
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
883
"--layout-effects-stop",
868
- "--render-start-2",
884
+ "--render-start-1",
885
"--component-render-start-ErrorBoundary",
886
"--component-render-stop",
887
"--render-stop",
872
- "--commit-start-2",
888
+ "--commit-start-1",
889
"--react-version-<filtered-version>",
890
"--profiler-version-1",
891
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
892
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
894
"--commit-stop",
895
"--commit-stop",
896
]
897
`);
898
});
899
900
+ // @reactVersion >=18.0
901
it('should mark passive and layout effects', async () => {
902
function ComponentWithEffects() {
903
React.useLayoutEffect(() => {
@@ -930,18 +947,18 @@ describe('Timeline profiler', () => {
947
948
expect(clearedMarks).toMatchInlineSnapshot(`
949
Array [
933
- "--schedule-render-32",
934
- "--render-start-32",
950
+ "--schedule-render-16",
951
+ "--render-start-16",
952
"--component-render-start-ComponentWithEffects",
953
"--component-render-stop",
954
"--render-stop",
938
- "--commit-start-32",
955
+ "--commit-start-16",
956
"--react-version-<filtered-version>",
957
"--profiler-version-1",
958
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
959
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
962
"--component-layout-effect-mount-start-ComponentWithEffects",
963
"--component-layout-effect-mount-stop",
964
"--component-layout-effect-mount-start-ComponentWithEffects",
@@ -960,17 +977,17 @@ describe('Timeline profiler', () => {
977
]);
978
979
expect(clearedMarks).toMatchInlineSnapshot(`
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
- `);
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
+ `);
991
992
clearPendingMarks();
993
@@ -988,22 +1005,22 @@ describe('Timeline profiler', () => {
1005
1006
expect(clearedMarks).toMatchInlineSnapshot(`
1007
Array [
991
- "--schedule-render-2",
992
- "--render-start-2",
1008
+ "--schedule-render-1",
1009
+ "--render-start-1",
1010
"--render-stop",
994
- "--commit-start-2",
1011
+ "--commit-start-1",
1012
"--react-version-<filtered-version>",
1013
"--profiler-version-1",
1014
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1015
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
1017
"--component-layout-effect-unmount-start-ComponentWithEffects",
1018
"--component-layout-effect-unmount-stop",
1019
"--component-layout-effect-unmount-start-ComponentWithEffects",
1020
"--component-layout-effect-unmount-stop",
1004
- "--layout-effects-start-2",
1021
+ "--layout-effects-start-1",
1022
"--layout-effects-stop",
1006
- "--passive-effects-start-2",
1023
+ "--passive-effects-start-1",
1024
"--component-passive-effect-unmount-start-ComponentWithEffects",
1025
"--component-passive-effect-unmount-stop",
1026
"--component-passive-effect-unmount-start-ComponentWithEffects",
@@ -1017,36 +1034,39 @@ describe('Timeline profiler', () => {
1034
});
1035
1036
describe('lane labels', () => {
1037
+ // @reactVersion >=18.0
1038
it('regression test SyncLane', () => {
1039
renderHelper(<div />);
1040
1041
expect(clearedMarks).toMatchInlineSnapshot(`
1042
Array [
1025
- "--schedule-render-2",
1026
- "--render-start-2",
1043
+ "--schedule-render-1",
1044
+ "--render-start-1",
1045
"--render-stop",
1028
- "--commit-start-2",
1046
+ "--commit-start-1",
1047
"--react-version-<filtered-version>",
1048
"--profiler-version-1",
1049
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1050
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
1053
"--layout-effects-stop",
1054
"--commit-stop",
1055
]
1056
`);
1057
});
1058
1059
+ // @reactVersion >=18.0
1060
it('regression test DefaultLane', () => {
1061
renderRootHelper(<div />);
1062
expect(clearedMarks).toMatchInlineSnapshot(`
1044
- Array [
1045
- "--schedule-render-32",
1046
- ]
1047
- `);
1063
+ Array [
1064
+ "--schedule-render-16",
1065
+ ]
1066
+ `);
1067
});
1068
1069
+ // @reactVersion >=18.0
1070
it('regression test InputDiscreteLane', async () => {
1071
const targetRef = React.createRef(null);
1072
@@ -1070,24 +1090,25 @@ describe('Timeline profiler', () => {
1090
1091
expect(clearedMarks).toMatchInlineSnapshot(`
1092
Array [
1073
- "--schedule-state-update-2-App",
1074
- "--render-start-2",
1093
+ "--schedule-state-update-1-App",
1094
+ "--render-start-1",
1095
"--component-render-start-App",
1096
"--component-render-stop",
1097
"--render-stop",
1078
- "--commit-start-2",
1098
+ "--commit-start-1",
1099
"--react-version-<filtered-version>",
1100
"--profiler-version-1",
1101
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1102
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
1105
"--layout-effects-stop",
1106
"--commit-stop",
1107
]
1108
`);
1109
});
1110
1111
+ // @reactVersion >=18.0
1112
it('regression test InputContinuousLane', async () => {
1113
const targetRef = React.createRef(null);
1114
@@ -1110,18 +1131,18 @@ describe('Timeline profiler', () => {
1131
1132
expect(clearedMarks).toMatchInlineSnapshot(`
1133
Array [
1113
- "--schedule-state-update-8-App",
1114
- "--render-start-8",
1134
+ "--schedule-state-update-4-App",
1135
+ "--render-start-4",
1136
"--component-render-start-App",
1137
"--component-render-stop",
1138
"--render-stop",
1118
- "--commit-start-8",
1139
+ "--commit-start-4",
1140
"--react-version-<filtered-version>",
1141
"--profiler-version-1",
1142
"--react-internal-module-start- at filtered (<anonymous>:0:0)",
1143
"--react-internal-module-stop- at filtered (<anonymous>:1:1)",
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",
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",
1146
"--layout-effects-stop",
1147
"--commit-stop",
1148
]
@@ -1184,6 +1205,7 @@ describe('Timeline profiler', () => {
1205
utils.act(() => store.profilerStore.startProfiling());
1206
});
1207
1208
+ // @reactVersion >=18.0
1209
it('should mark sync render without suspends or state updates', () => {
1210
renderHelper(<div />);
1211
@@ -1191,7 +1213,7 @@ describe('Timeline profiler', () => {
1213
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1214
Array [
1215
Object {
1194
- "lanes": "0b0000000000000000000000000000010",
1216
+ "lanes": "0b0000000000000000000000000000001",
1217
"timestamp": 10,
1218
"type": "schedule-render",
1219
"warning": null,
@@ -1200,6 +1222,7 @@ describe('Timeline profiler', () => {
1222
`);
1223
});
1224
1225
+ // @reactVersion >=18.0
1226
it('should mark concurrent render without suspends or state updates', () => {
1227
utils.act(() => renderRootHelper(<div />));
1228
@@ -1207,7 +1230,7 @@ describe('Timeline profiler', () => {
1230
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1231
Array [
1232
Object {
1210
- "lanes": "0b0000000000000000000000000100000",
1233
+ "lanes": "0b0000000000000000000000000010000",
1234
"timestamp": 10,
1235
"type": "schedule-render",
1236
"warning": null,
@@ -1216,6 +1239,7 @@ describe('Timeline profiler', () => {
1239
`);
1240
});
1241
1242
+ // @reactVersion >=18.0
1243
it('should mark concurrent render without suspends or state updates', () => {
1244
let updaterFn;
1245
@@ -1248,7 +1272,7 @@ describe('Timeline profiler', () => {
1272
"componentName": "Example",
1273
"componentStack": "
1274
in Example (at **)",
1251
- "lanes": "0b0000000000000000000000000001000",
1275
+ "lanes": "0b0000000000000000000000000000100",
1276
"timestamp": 10,
1277
"type": "schedule-state-update",
1278
"warning": null,
@@ -1257,7 +1281,7 @@ describe('Timeline profiler', () => {
1281
"componentName": "Example",
1282
"componentStack": "
1283
in Example (at **)",
1260
- "lanes": "0b0000000000000000000000010000000",
1284
+ "lanes": "0b0000000000000000000000001000000",
1285
"timestamp": 10,
1286
"type": "schedule-state-update",
1287
"warning": null,
@@ -1266,7 +1290,7 @@ describe('Timeline profiler', () => {
1290
"componentName": "Example",
1291
"componentStack": "
1292
in Example (at **)",
1269
- "lanes": "0b0000000000000000000000010000000",
1293
+ "lanes": "0b0000000000000000000000001000000",
1294
"timestamp": 10,
1295
"type": "schedule-state-update",
1296
"warning": null,
@@ -1275,7 +1299,7 @@ describe('Timeline profiler', () => {
1299
"componentName": "Example",
1300
"componentStack": "
1301
in Example (at **)",
1278
- "lanes": "0b0000000000000000000000000100000",
1302
+ "lanes": "0b0000000000000000000000000010000",
1303
"timestamp": 10,
1304
"type": "schedule-state-update",
1305
"warning": null,
@@ -1562,6 +1586,7 @@ describe('Timeline profiler', () => {
1586
expect(timelineData.componentMeasures).toHaveLength(2);
1587
});
1588
1589
+ // @reactVersion >=18.0
1590
it('should mark cascading class component state updates', () => {
1591
class Example extends React.Component {
1592
state = {didMount: false};
@@ -1604,7 +1629,7 @@ describe('Timeline profiler', () => {
1629
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1630
Array [
1631
Object {
1607
- "lanes": "0b0000000000000000000000000100000",
1632
+ "lanes": "0b0000000000000000000000000010000",
1633
"timestamp": 10,
1634
"type": "schedule-render",
1635
"warning": null,
@@ -1613,7 +1638,7 @@ describe('Timeline profiler', () => {
1638
"componentName": "Example",
1639
"componentStack": "
1640
in Example (at **)",
1616
- "lanes": "0b0000000000000000000000000000010",
1641
+ "lanes": "0b0000000000000000000000000000001",
1642
"timestamp": 20,
1643
"type": "schedule-state-update",
1644
"warning": null,
@@ -1622,6 +1647,7 @@ describe('Timeline profiler', () => {
1647
`);
1648
});
1649
1650
+ // @reactVersion >=18.0
1651
it('should mark cascading class component force updates', () => {
1652
let forced = false;
1653
class Example extends React.Component {
@@ -1663,14 +1689,14 @@ describe('Timeline profiler', () => {
1689
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1690
Array [
1691
Object {
1666
- "lanes": "0b0000000000000000000000000100000",
1692
+ "lanes": "0b0000000000000000000000000010000",
1693
"timestamp": 10,
1694
"type": "schedule-render",
1695
"warning": null,
1696
},
1697
Object {
1698
"componentName": "Example",
1673
- "lanes": "0b0000000000000000000000000000010",
1699
+ "lanes": "0b0000000000000000000000000000001",
1700
"timestamp": 20,
1701
"type": "schedule-force-update",
1702
"warning": null,
@@ -1679,6 +1705,7 @@ describe('Timeline profiler', () => {
1705
`);
1706
});
1707
1708
+ // @reactVersion >=18.0
1709
it('should mark render phase state updates for class component', () => {
1710
class Example extends React.Component {
1711
state = {didRender: false};
@@ -1731,7 +1758,7 @@ describe('Timeline profiler', () => {
1758
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1759
Array [
1760
Object {
1734
- "lanes": "0b0000000000000000000000000100000",
1761
+ "lanes": "0b0000000000000000000000000010000",
1762
"timestamp": 10,
1763
"type": "schedule-render",
1764
"warning": null,
@@ -1740,7 +1767,7 @@ describe('Timeline profiler', () => {
1767
"componentName": "Example",
1768
"componentStack": "
1769
in Example (at **)",
1743
- "lanes": "0b0000000000000000000000000100000",
1770
+ "lanes": "0b0000000000000000000000000010000",
1771
"timestamp": 10,
1772
"type": "schedule-state-update",
1773
"warning": null,
@@ -1749,6 +1776,7 @@ describe('Timeline profiler', () => {
1776
`);
1777
});
1778
1779
+ // @reactVersion >=18.0
1780
it('should mark render phase force updates for class component', () => {
1781
let forced = false;
1782
class Example extends React.Component {
@@ -1800,14 +1828,14 @@ describe('Timeline profiler', () => {
1828
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1829
Array [
1830
Object {
1803
- "lanes": "0b0000000000000000000000000100000",
1831
+ "lanes": "0b0000000000000000000000000010000",
1832
"timestamp": 10,
1833
"type": "schedule-render",
1834
"warning": null,
1835
},
1836
Object {
1837
"componentName": "Example",
1810
- "lanes": "0b0000000000000000000000000100000",
1838
+ "lanes": "0b0000000000000000000000000010000",
1839
"timestamp": 20,
1840
"type": "schedule-force-update",
1841
"warning": null,
@@ -1816,6 +1844,7 @@ describe('Timeline profiler', () => {
1844
`);
1845
});
1846
1847
+ // @reactVersion >=18.0
1848
it('should mark cascading layout updates', () => {
1849
function Example() {
1850
const [didMount, setDidMount] = React.useState(false);
@@ -1862,7 +1891,7 @@ describe('Timeline profiler', () => {
1891
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1892
Array [
1893
Object {
1865
- "lanes": "0b0000000000000000000000000100000",
1894
+ "lanes": "0b0000000000000000000000000010000",
1895
"timestamp": 10,
1896
"type": "schedule-render",
1897
"warning": null,
@@ -1871,7 +1900,7 @@ describe('Timeline profiler', () => {
1900
"componentName": "Example",
1901
"componentStack": "
1902
in Example (at **)",
1874
- "lanes": "0b0000000000000000000000000000010",
1903
+ "lanes": "0b0000000000000000000000000000001",
1904
"timestamp": 21,
1905
"type": "schedule-state-update",
1906
"warning": null,
@@ -1880,6 +1909,7 @@ describe('Timeline profiler', () => {
1909
`);
1910
});
1911
1912
+ // @reactVersion >=18.0
1913
it('should mark cascading passive updates', () => {
1914
function Example() {
1915
const [didMount, setDidMount] = React.useState(false);
@@ -1925,7 +1955,7 @@ describe('Timeline profiler', () => {
1955
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
1956
Array [
1957
Object {
1928
- "lanes": "0b0000000000000000000000000100000",
1958
+ "lanes": "0b0000000000000000000000000010000",
1959
"timestamp": 10,
1960
"type": "schedule-render",
1961
"warning": null,
@@ -1934,7 +1964,7 @@ describe('Timeline profiler', () => {
1964
"componentName": "Example",
1965
"componentStack": "
1966
in Example (at **)",
1937
- "lanes": "0b0000000000000000000000000100000",
1967
+ "lanes": "0b0000000000000000000000000010000",
1968
"timestamp": 21,
1969
"type": "schedule-state-update",
1970
"warning": null,
@@ -1943,6 +1973,7 @@ describe('Timeline profiler', () => {
1973
`);
1974
});
1975
1976
+ // @reactVersion >=18.0
1977
it('should mark render phase updates', () => {
1978
function Example() {
1979
const [didRender, setDidRender] = React.useState(false);
@@ -1974,7 +2005,7 @@ describe('Timeline profiler', () => {
2005
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2006
Array [
2007
Object {
1977
- "lanes": "0b0000000000000000000000000100000",
2008
+ "lanes": "0b0000000000000000000000000010000",
2009
"timestamp": 10,
2010
"type": "schedule-render",
2011
"warning": null,
@@ -1983,7 +2014,7 @@ describe('Timeline profiler', () => {
2014
"componentName": "Example",
2015
"componentStack": "
2016
in Example (at **)",
1986
- "lanes": "0b0000000000000000000000000100000",
2017
+ "lanes": "0b0000000000000000000000000010000",
2018
"timestamp": 20,
2019
"type": "schedule-state-update",
2020
"warning": null,
@@ -1992,6 +2023,7 @@ describe('Timeline profiler', () => {
2023
`);
2024
});
2025
2026
+ // @reactVersion >=18.0
2027
it('should mark sync render that throws', async () => {
2028
spyOn(console, 'error');
2029
@@ -2058,7 +2090,7 @@ describe('Timeline profiler', () => {
2090
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2091
Array [
2092
Object {
2061
- "lanes": "0b0000000000000000000000000000010",
2093
+ "lanes": "0b0000000000000000000000000000001",
2094
"timestamp": 10,
2095
"type": "schedule-render",
2096
"warning": null,
@@ -2067,7 +2099,7 @@ describe('Timeline profiler', () => {
2099
"componentName": "ErrorBoundary",
2100
"componentStack": "
2101
in ErrorBoundary (at **)",
2070
- "lanes": "0b0000000000000000000000000000010",
2102
+ "lanes": "0b0000000000000000000000000000001",
2103
"timestamp": 20,
2104
"type": "schedule-state-update",
2105
"warning": null,
@@ -2087,6 +2119,7 @@ describe('Timeline profiler', () => {
2119
`);
2120
});
2121
2122
+ // @reactVersion >=18.0
2123
it('should mark concurrent render that throws', async () => {
2124
spyOn(console, 'error');
2125
@@ -2171,7 +2204,7 @@ describe('Timeline profiler', () => {
2204
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2205
Array [
2206
Object {
2174
- "lanes": "0b0000000000000000000000000100000",
2207
+ "lanes": "0b0000000000000000000000000010000",
2208
"timestamp": 10,
2209
"type": "schedule-render",
2210
"warning": null,
@@ -2180,7 +2213,7 @@ describe('Timeline profiler', () => {
2213
"componentName": "ErrorBoundary",
2214
"componentStack": "
2215
in ErrorBoundary (at **)",
2183
- "lanes": "0b0000000000000000000000000000010",
2216
+ "lanes": "0b0000000000000000000000000000001",
2217
"timestamp": 30,
2218
"type": "schedule-state-update",
2219
"warning": null,
@@ -2207,6 +2240,7 @@ describe('Timeline profiler', () => {
2240
`);
2241
});
2242
2243
+ // @reactVersion >=18.0
2244
it('should mark passive and layout effects', async () => {
2245
function ComponentWithEffects() {
2246
React.useLayoutEffect(() => {
@@ -2361,7 +2395,7 @@ describe('Timeline profiler', () => {
2395
"batchUID": 1,
2396
"depth": 0,
2397
"duration": 0,
2364
- "lanes": "0b0000000000000000000000000100000",
2398
+ "lanes": "0b0000000000000000000000000010000",
2399
"timestamp": 10,
2400
"type": "render-idle",
2401
},
@@ -2369,7 +2403,7 @@ describe('Timeline profiler', () => {
2403
"batchUID": 1,
2404
"depth": 0,
2405
"duration": 0,
2372
- "lanes": "0b0000000000000000000000000100000",
2406
+ "lanes": "0b0000000000000000000000000010000",
2407
"timestamp": 10,
2408
"type": "render",
2409
},
@@ -2377,7 +2411,7 @@ describe('Timeline profiler', () => {
2411
"batchUID": 1,
2412
"depth": 0,
2413
"duration": 0,
2380
- "lanes": "0b0000000000000000000000000100000",
2414
+ "lanes": "0b0000000000000000000000000010000",
2415
"timestamp": 10,
2416
"type": "commit",
2417
},
@@ -2385,7 +2419,7 @@ describe('Timeline profiler', () => {
2419
"batchUID": 1,
2420
"depth": 1,
2421
"duration": 0,
2388
- "lanes": "0b0000000000000000000000000100000",
2422
+ "lanes": "0b0000000000000000000000000010000",
2423
"timestamp": 10,
2424
"type": "layout-effects",
2425
},
@@ -2393,7 +2427,7 @@ describe('Timeline profiler', () => {
2427
"batchUID": 1,
2428
"depth": 0,
2429
"duration": 0,
2396
- "lanes": "0b0000000000000000000000000100000",
2430
+ "lanes": "0b0000000000000000000000000010000",
2431
"timestamp": 10,
2432
"type": "passive-effects",
2433
},
@@ -2403,7 +2437,7 @@ describe('Timeline profiler', () => {
2437
"batchUID": 2,
2438
"depth": 0,
2439
"duration": 0,
2406
- "lanes": "0b0000000000000000000000000000010",
2440
+ "lanes": "0b0000000000000000000000000000001",
2441
"timestamp": 10,
2442
"type": "render-idle",
2443
},
@@ -2411,7 +2445,7 @@ describe('Timeline profiler', () => {
2445
"batchUID": 2,
2446
"depth": 0,
2447
"duration": 0,
2414
- "lanes": "0b0000000000000000000000000000010",
2448
+ "lanes": "0b0000000000000000000000000000001",
2449
"timestamp": 10,
2450
"type": "render",
2451
},
@@ -2419,7 +2453,7 @@ describe('Timeline profiler', () => {
2453
"batchUID": 2,
2454
"depth": 0,
2455
"duration": 0,
2422
- "lanes": "0b0000000000000000000000000000010",
2456
+ "lanes": "0b0000000000000000000000000000001",
2457
"timestamp": 10,
2458
"type": "commit",
2459
},
@@ -2427,7 +2461,7 @@ describe('Timeline profiler', () => {
2461
"batchUID": 2,
2462
"depth": 1,
2463
"duration": 0,
2430
- "lanes": "0b0000000000000000000000000000010",
2464
+ "lanes": "0b0000000000000000000000000000001",
2465
"timestamp": 10,
2466
"type": "layout-effects",
2467
},
@@ -2435,7 +2469,7 @@ describe('Timeline profiler', () => {
2469
"batchUID": 2,
2470
"depth": 1,
2471
"duration": 0,
2438
- "lanes": "0b0000000000000000000000000000010",
2472
+ "lanes": "0b0000000000000000000000000000001",
2473
"timestamp": 10,
2474
"type": "passive-effects",
2475
},
@@ -2471,7 +2505,7 @@ describe('Timeline profiler', () => {
2505
expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
2506
Array [
2507
Object {
2474
- "lanes": "0b0000000000000000000000000100000",
2508
+ "lanes": "0b0000000000000000000000000010000",
2509
"timestamp": 10,
2510
"type": "schedule-render",
2511
"warning": null,
@@ -2481,7 +2515,7 @@ describe('Timeline profiler', () => {
2515
"componentStack": "
2516
in Child (at **)
2517
in CommponentWithChildren (at **)",
2484
- "lanes": "0b0000000000000000000000000100000",
2518
+ "lanes": "0b0000000000000000000000000010000",
2519
"timestamp": 10,
2520
"type": "schedule-state-update",
2521
"warning": null,
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+90
-86
@@ -613,6 +613,7 @@ describe('Timeline profiler', () => {
613
`);
614
});
615
616
+ // @reactVersion >= 18.0
617
it('should process a sample legacy render sequence', async () => {
618
utils.legacyRender(<div />, document.createElement('div'));
619
@@ -628,7 +629,7 @@ describe('Timeline profiler', () => {
629
"batchUID": 0,
630
"depth": 0,
631
"duration": 0.01,
631
- "lanes": "0b0000000000000000000000000000001",
632
+ "lanes": "0b0000000000000000000000000000000",
633
"timestamp": 0.006,
634
"type": "render-idle",
635
},
@@ -636,7 +637,7 @@ describe('Timeline profiler', () => {
637
"batchUID": 0,
638
"depth": 0,
639
"duration": 0.001,
639
- "lanes": "0b0000000000000000000000000000001",
640
+ "lanes": "0b0000000000000000000000000000000",
641
"timestamp": 0.006,
642
"type": "render",
643
},
@@ -644,7 +645,7 @@ describe('Timeline profiler', () => {
645
"batchUID": 0,
646
"depth": 0,
647
"duration": 0.008,
647
- "lanes": "0b0000000000000000000000000000001",
648
+ "lanes": "0b0000000000000000000000000000000",
649
"timestamp": 0.008,
650
"type": "commit",
651
},
@@ -652,7 +653,7 @@ describe('Timeline profiler', () => {
653
"batchUID": 0,
654
"depth": 1,
655
"duration": 0.001,
655
- "lanes": "0b0000000000000000000000000000001",
656
+ "lanes": "0b0000000000000000000000000000000",
657
"timestamp": 0.014,
658
"type": "layout-effects",
659
},
@@ -713,13 +714,12 @@ describe('Timeline profiler', () => {
714
30 => "Offscreen",
715
},
716
"laneToReactMeasureMap": Map {
716
- 0 => Array [],
717
- 1 => Array [
717
+ 0 => Array [
718
Object {
719
"batchUID": 0,
720
"depth": 0,
721
"duration": 0.01,
722
- "lanes": "0b0000000000000000000000000000001",
722
+ "lanes": "0b0000000000000000000000000000000",
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": "0b0000000000000000000000000000001",
730
+ "lanes": "0b0000000000000000000000000000000",
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": "0b0000000000000000000000000000001",
738
+ "lanes": "0b0000000000000000000000000000000",
739
"timestamp": 0.008,
740
"type": "commit",
741
},
@@ -743,11 +743,12 @@ describe('Timeline profiler', () => {
743
"batchUID": 0,
744
"depth": 1,
745
"duration": 0.001,
746
- "lanes": "0b0000000000000000000000000000001",
746
+ "lanes": "0b0000000000000000000000000000000",
747
"timestamp": 0.014,
748
"type": "layout-effects",
749
},
750
],
751
+ 1 => Array [],
752
2 => Array [],
753
3 => Array [],
754
4 => Array [],
@@ -784,7 +785,7 @@ describe('Timeline profiler', () => {
785
"reactVersion": "<filtered-version>",
786
"schedulingEvents": Array [
787
Object {
787
- "lanes": "0b0000000000000000000000000000001",
788
+ "lanes": "0b0000000000000000000000000000000",
789
"timestamp": 0.005,
790
"type": "schedule-render",
791
"warning": null,
@@ -799,6 +800,7 @@ describe('Timeline profiler', () => {
800
`);
801
});
802
803
+ // @reactVersion >= 18.0
804
it('should process a sample createRoot render sequence', async () => {
805
function App() {
806
const [didMount, setDidMount] = React.useState(false);
@@ -825,7 +827,7 @@ describe('Timeline profiler', () => {
827
"batchUID": 0,
828
"depth": 0,
829
"duration": 0.012,
828
- "lanes": "0b0000000000000000000000000000101",
830
+ "lanes": "0b0000000000000000000000000000100",
831
"timestamp": 0.006,
832
"type": "render-idle",
833
},
@@ -833,7 +835,7 @@ describe('Timeline profiler', () => {
835
"batchUID": 0,
836
"depth": 0,
837
"duration": 0.003,
836
- "lanes": "0b0000000000000000000000000000101",
838
+ "lanes": "0b0000000000000000000000000000100",
839
"timestamp": 0.006,
840
"type": "render",
841
},
@@ -841,7 +843,7 @@ describe('Timeline profiler', () => {
843
"batchUID": 0,
844
"depth": 0,
845
"duration": 0.008,
844
- "lanes": "0b0000000000000000000000000000101",
846
+ "lanes": "0b0000000000000000000000000000100",
847
"timestamp": 0.01,
848
"type": "commit",
849
},
@@ -849,7 +851,7 @@ describe('Timeline profiler', () => {
851
"batchUID": 0,
852
"depth": 1,
853
"duration": 0.001,
852
- "lanes": "0b0000000000000000000000000000101",
854
+ "lanes": "0b0000000000000000000000000000100",
855
"timestamp": 0.016,
856
"type": "layout-effects",
857
},
@@ -857,7 +859,7 @@ describe('Timeline profiler', () => {
859
"batchUID": 0,
860
"depth": 0,
861
"duration": 0.004,
860
- "lanes": "0b0000000000000000000000000000101",
862
+ "lanes": "0b0000000000000000000000000000100",
863
"timestamp": 0.019,
864
"type": "passive-effects",
865
},
@@ -867,7 +869,7 @@ describe('Timeline profiler', () => {
869
"batchUID": 1,
870
"depth": 0,
871
"duration": 0.012,
870
- "lanes": "0b0000000000000000000000000000101",
872
+ "lanes": "0b0000000000000000000000000000100",
873
"timestamp": 0.024,
874
"type": "render-idle",
875
},
@@ -875,7 +877,7 @@ describe('Timeline profiler', () => {
877
"batchUID": 1,
878
"depth": 0,
879
"duration": 0.003,
878
- "lanes": "0b0000000000000000000000000000101",
880
+ "lanes": "0b0000000000000000000000000000100",
881
"timestamp": 0.024,
882
"type": "render",
883
},
@@ -883,7 +885,7 @@ describe('Timeline profiler', () => {
885
"batchUID": 1,
886
"depth": 0,
887
"duration": 0.008,
886
- "lanes": "0b0000000000000000000000000000101",
888
+ "lanes": "0b0000000000000000000000000000100",
889
"timestamp": 0.028,
890
"type": "commit",
891
},
@@ -891,7 +893,7 @@ describe('Timeline profiler', () => {
893
"batchUID": 1,
894
"depth": 1,
895
"duration": 0.001,
894
- "lanes": "0b0000000000000000000000000000101",
896
+ "lanes": "0b0000000000000000000000000000100",
897
"timestamp": 0.034,
898
"type": "layout-effects",
899
},
@@ -899,7 +901,7 @@ describe('Timeline profiler', () => {
901
"batchUID": 1,
902
"depth": 0,
903
"duration": 0.003,
902
- "lanes": "0b0000000000000000000000000000101",
904
+ "lanes": "0b0000000000000000000000000000100",
905
"timestamp": 0.037,
906
"type": "passive-effects",
907
},
@@ -993,13 +995,12 @@ describe('Timeline profiler', () => {
995
1 => Array [],
996
2 => Array [],
997
3 => Array [],
996
- 4 => Array [],
997
- 5 => Array [
998
+ 4 => Array [
999
Object {
1000
"batchUID": 0,
1001
"depth": 0,
1002
"duration": 0.012,
1002
- "lanes": "0b0000000000000000000000000000101",
1003
+ "lanes": "0b0000000000000000000000000000100",
1004
"timestamp": 0.006,
1005
"type": "render-idle",
1006
},
@@ -1007,7 +1008,7 @@ describe('Timeline profiler', () => {
1008
"batchUID": 0,
1009
"depth": 0,
1010
"duration": 0.003,
1010
- "lanes": "0b0000000000000000000000000000101",
1011
+ "lanes": "0b0000000000000000000000000000100",
1012
"timestamp": 0.006,
1013
"type": "render",
1014
},
@@ -1015,7 +1016,7 @@ describe('Timeline profiler', () => {
1016
"batchUID": 0,
1017
"depth": 0,
1018
"duration": 0.008,
1018
- "lanes": "0b0000000000000000000000000000101",
1019
+ "lanes": "0b0000000000000000000000000000100",
1020
"timestamp": 0.01,
1021
"type": "commit",
1022
},
@@ -1023,7 +1024,7 @@ describe('Timeline profiler', () => {
1024
"batchUID": 0,
1025
"depth": 1,
1026
"duration": 0.001,
1026
- "lanes": "0b0000000000000000000000000000101",
1027
+ "lanes": "0b0000000000000000000000000000100",
1028
"timestamp": 0.016,
1029
"type": "layout-effects",
1030
},
@@ -1031,7 +1032,7 @@ describe('Timeline profiler', () => {
1032
"batchUID": 0,
1033
"depth": 0,
1034
"duration": 0.004,
1034
- "lanes": "0b0000000000000000000000000000101",
1035
+ "lanes": "0b0000000000000000000000000000100",
1036
"timestamp": 0.019,
1037
"type": "passive-effects",
1038
},
@@ -1039,7 +1040,7 @@ describe('Timeline profiler', () => {
1040
"batchUID": 1,
1041
"depth": 0,
1042
"duration": 0.012,
1042
- "lanes": "0b0000000000000000000000000000101",
1043
+ "lanes": "0b0000000000000000000000000000100",
1044
"timestamp": 0.024,
1045
"type": "render-idle",
1046
},
@@ -1047,7 +1048,7 @@ describe('Timeline profiler', () => {
1048
"batchUID": 1,
1049
"depth": 0,
1050
"duration": 0.003,
1050
- "lanes": "0b0000000000000000000000000000101",
1051
+ "lanes": "0b0000000000000000000000000000100",
1052
"timestamp": 0.024,
1053
"type": "render",
1054
},
@@ -1055,7 +1056,7 @@ describe('Timeline profiler', () => {
1056
"batchUID": 1,
1057
"depth": 0,
1058
"duration": 0.008,
1058
- "lanes": "0b0000000000000000000000000000101",
1059
+ "lanes": "0b0000000000000000000000000000100",
1060
"timestamp": 0.028,
1061
"type": "commit",
1062
},
@@ -1063,7 +1064,7 @@ describe('Timeline profiler', () => {
1064
"batchUID": 1,
1065
"depth": 1,
1066
"duration": 0.001,
1066
- "lanes": "0b0000000000000000000000000000101",
1067
+ "lanes": "0b0000000000000000000000000000100",
1068
"timestamp": 0.034,
1069
"type": "layout-effects",
1070
},
@@ -1071,11 +1072,12 @@ describe('Timeline profiler', () => {
1072
"batchUID": 1,
1073
"depth": 0,
1074
"duration": 0.003,
1074
- "lanes": "0b0000000000000000000000000000101",
1075
+ "lanes": "0b0000000000000000000000000000100",
1076
"timestamp": 0.037,
1077
"type": "passive-effects",
1078
},
1079
],
1080
+ 5 => Array [],
1081
6 => Array [],
1082
7 => Array [],
1083
8 => Array [],
@@ -1108,14 +1110,14 @@ describe('Timeline profiler', () => {
1110
"reactVersion": "<filtered-version>",
1111
"schedulingEvents": Array [
1112
Object {
1111
- "lanes": "0b0000000000000000000000000000101",
1113
+ "lanes": "0b0000000000000000000000000000100",
1114
"timestamp": 0.005,
1115
"type": "schedule-render",
1116
"warning": null,
1117
},
1118
Object {
1119
"componentName": "App",
1118
- "lanes": "0b0000000000000000000000000000101",
1120
+ "lanes": "0b0000000000000000000000000000100",
1121
"timestamp": 0.021,
1122
"type": "schedule-state-update",
1123
"warning": null,
@@ -1945,6 +1947,7 @@ describe('Timeline profiler', () => {
1947
global.IS_REACT_ACT_ENVIRONMENT = true;
1948
});
1949
1950
+ // @reactVersion >= 18.0
1951
it('should process a sample legacy render sequence', async () => {
1952
utils.legacyRender(<div />, document.createElement('div'));
1953
utils.act(() => store.profilerStore.stopProfiling());
@@ -1960,7 +1963,7 @@ describe('Timeline profiler', () => {
1963
"batchUID": 1,
1964
"depth": 0,
1965
"duration": 0,
1963
- "lanes": "0b0000000000000000000000000000010",
1966
+ "lanes": "0b0000000000000000000000000000001",
1967
"timestamp": 10,
1968
"type": "render-idle",
1969
},
@@ -1968,7 +1971,7 @@ describe('Timeline profiler', () => {
1971
"batchUID": 1,
1972
"depth": 0,
1973
"duration": 0,
1971
- "lanes": "0b0000000000000000000000000000010",
1974
+ "lanes": "0b0000000000000000000000000000001",
1975
"timestamp": 10,
1976
"type": "render",
1977
},
@@ -1976,7 +1979,7 @@ describe('Timeline profiler', () => {
1979
"batchUID": 1,
1980
"depth": 0,
1981
"duration": 0,
1979
- "lanes": "0b0000000000000000000000000000010",
1982
+ "lanes": "0b0000000000000000000000000000001",
1983
"timestamp": 10,
1984
"type": "commit",
1985
},
@@ -1984,7 +1987,7 @@ describe('Timeline profiler', () => {
1987
"batchUID": 1,
1988
"depth": 1,
1989
"duration": 0,
1987
- "lanes": "0b0000000000000000000000000000010",
1990
+ "lanes": "0b0000000000000000000000000000001",
1991
"timestamp": 10,
1992
"type": "layout-effects",
1993
},
@@ -1995,13 +1998,13 @@ describe('Timeline profiler', () => {
1998
"flamechart": Array [],
1999
"internalModuleSourceToRanges": Map {},
2000
"laneToLabelMap": Map {
1998
- 1 => "SyncHydrationLane",
1999
- 2 => "Sync",
2000
- 4 => "InputContinuousHydration",
2001
- 8 => "InputContinuous",
2002
- 16 => "DefaultHydration",
2003
- 32 => "Default",
2004
- 64 => "TransitionHydration",
2001
+ 1 => "Sync",
2002
+ 2 => "InputContinuousHydration",
2003
+ 4 => "InputContinuous",
2004
+ 8 => "DefaultHydration",
2005
+ 16 => "Default",
2006
+ 32 => "TransitionHydration",
2007
+ 64 => "Transition",
2008
128 => "Transition",
2009
256 => "Transition",
2010
512 => "Transition",
@@ -2017,7 +2020,7 @@ describe('Timeline profiler', () => {
2020
524288 => "Transition",
2021
1048576 => "Transition",
2022
2097152 => "Transition",
2020
- 4194304 => "Transition",
2023
+ 4194304 => "Retry",
2024
8388608 => "Retry",
2025
16777216 => "Retry",
2026
33554432 => "Retry",
@@ -2028,13 +2031,12 @@ describe('Timeline profiler', () => {
2031
1073741824 => "Offscreen",
2032
},
2033
"laneToReactMeasureMap": Map {
2031
- 1 => Array [],
2032
- 2 => Array [
2034
+ 1 => Array [
2035
Object {
2036
"batchUID": 1,
2037
"depth": 0,
2038
"duration": 0,
2037
- "lanes": "0b0000000000000000000000000000010",
2039
+ "lanes": "0b0000000000000000000000000000001",
2040
"timestamp": 10,
2041
"type": "render-idle",
2042
},
@@ -2042,7 +2044,7 @@ describe('Timeline profiler', () => {
2044
"batchUID": 1,
2045
"depth": 0,
2046
"duration": 0,
2045
- "lanes": "0b0000000000000000000000000000010",
2047
+ "lanes": "0b0000000000000000000000000000001",
2048
"timestamp": 10,
2049
"type": "render",
2050
},
@@ -2050,7 +2052,7 @@ describe('Timeline profiler', () => {
2052
"batchUID": 1,
2053
"depth": 0,
2054
"duration": 0,
2053
- "lanes": "0b0000000000000000000000000000010",
2055
+ "lanes": "0b0000000000000000000000000000001",
2056
"timestamp": 10,
2057
"type": "commit",
2058
},
@@ -2058,11 +2060,12 @@ describe('Timeline profiler', () => {
2060
"batchUID": 1,
2061
"depth": 1,
2062
"duration": 0,
2061
- "lanes": "0b0000000000000000000000000000010",
2063
+ "lanes": "0b0000000000000000000000000000001",
2064
"timestamp": 10,
2065
"type": "layout-effects",
2066
},
2067
],
2068
+ 2 => Array [],
2069
4 => Array [],
2070
8 => Array [],
2071
16 => Array [],
@@ -2099,7 +2102,7 @@ describe('Timeline profiler', () => {
2102
"reactVersion": "<filtered-version>",
2103
"schedulingEvents": Array [
2104
Object {
2102
- "lanes": "0b0000000000000000000000000000010",
2105
+ "lanes": "0b0000000000000000000000000000001",
2106
"timestamp": 10,
2107
"type": "schedule-render",
2108
"warning": null,
@@ -2114,6 +2117,7 @@ describe('Timeline profiler', () => {
2117
`);
2118
});
2119
2120
+ // @reactVersion >= 18.0
2121
it('should process a sample createRoot render sequence', async () => {
2122
function App() {
2123
const [didMount, setDidMount] = React.useState(false);
@@ -2149,7 +2153,7 @@ describe('Timeline profiler', () => {
2153
"batchUID": 1,
2154
"depth": 0,
2155
"duration": 0,
2152
- "lanes": "0b0000000000000000000000000100000",
2156
+ "lanes": "0b0000000000000000000000000010000",
2157
"timestamp": 10,
2158
"type": "render-idle",
2159
},
@@ -2157,7 +2161,7 @@ describe('Timeline profiler', () => {
2161
"batchUID": 1,
2162
"depth": 0,
2163
"duration": 0,
2160
- "lanes": "0b0000000000000000000000000100000",
2164
+ "lanes": "0b0000000000000000000000000010000",
2165
"timestamp": 10,
2166
"type": "render",
2167
},
@@ -2165,7 +2169,7 @@ describe('Timeline profiler', () => {
2169
"batchUID": 1,
2170
"depth": 0,
2171
"duration": 0,
2168
- "lanes": "0b0000000000000000000000000100000",
2172
+ "lanes": "0b0000000000000000000000000010000",
2173
"timestamp": 10,
2174
"type": "commit",
2175
},
@@ -2173,7 +2177,7 @@ describe('Timeline profiler', () => {
2177
"batchUID": 1,
2178
"depth": 1,
2179
"duration": 0,
2176
- "lanes": "0b0000000000000000000000000100000",
2180
+ "lanes": "0b0000000000000000000000000010000",
2181
"timestamp": 10,
2182
"type": "layout-effects",
2183
},
@@ -2181,7 +2185,7 @@ describe('Timeline profiler', () => {
2185
"batchUID": 1,
2186
"depth": 0,
2187
"duration": 0,
2184
- "lanes": "0b0000000000000000000000000100000",
2188
+ "lanes": "0b0000000000000000000000000010000",
2189
"timestamp": 10,
2190
"type": "passive-effects",
2191
},
@@ -2191,7 +2195,7 @@ describe('Timeline profiler', () => {
2195
"batchUID": 2,
2196
"depth": 0,
2197
"duration": 0,
2194
- "lanes": "0b0000000000000000000000000100000",
2198
+ "lanes": "0b0000000000000000000000000010000",
2199
"timestamp": 10,
2200
"type": "render-idle",
2201
},
@@ -2199,7 +2203,7 @@ describe('Timeline profiler', () => {
2203
"batchUID": 2,
2204
"depth": 0,
2205
"duration": 0,
2202
- "lanes": "0b0000000000000000000000000100000",
2206
+ "lanes": "0b0000000000000000000000000010000",
2207
"timestamp": 10,
2208
"type": "render",
2209
},
@@ -2207,7 +2211,7 @@ describe('Timeline profiler', () => {
2211
"batchUID": 2,
2212
"depth": 0,
2213
"duration": 0,
2210
- "lanes": "0b0000000000000000000000000100000",
2214
+ "lanes": "0b0000000000000000000000000010000",
2215
"timestamp": 10,
2216
"type": "commit",
2217
},
@@ -2215,7 +2219,7 @@ describe('Timeline profiler', () => {
2219
"batchUID": 2,
2220
"depth": 1,
2221
"duration": 0,
2218
- "lanes": "0b0000000000000000000000000100000",
2222
+ "lanes": "0b0000000000000000000000000010000",
2223
"timestamp": 10,
2224
"type": "layout-effects",
2225
},
@@ -2223,7 +2227,7 @@ describe('Timeline profiler', () => {
2227
"batchUID": 2,
2228
"depth": 0,
2229
"duration": 0,
2226
- "lanes": "0b0000000000000000000000000100000",
2230
+ "lanes": "0b0000000000000000000000000010000",
2231
"timestamp": 10,
2232
"type": "passive-effects",
2233
},
@@ -2263,13 +2267,13 @@ describe('Timeline profiler', () => {
2267
"flamechart": Array [],
2268
"internalModuleSourceToRanges": Map {},
2269
"laneToLabelMap": Map {
2266
- 1 => "SyncHydrationLane",
2267
- 2 => "Sync",
2268
- 4 => "InputContinuousHydration",
2269
- 8 => "InputContinuous",
2270
- 16 => "DefaultHydration",
2271
- 32 => "Default",
2272
- 64 => "TransitionHydration",
2270
+ 1 => "Sync",
2271
+ 2 => "InputContinuousHydration",
2272
+ 4 => "InputContinuous",
2273
+ 8 => "DefaultHydration",
2274
+ 16 => "Default",
2275
+ 32 => "TransitionHydration",
2276
+ 64 => "Transition",
2277
128 => "Transition",
2278
256 => "Transition",
2279
512 => "Transition",
@@ -2285,7 +2289,7 @@ describe('Timeline profiler', () => {
2289
524288 => "Transition",
2290
1048576 => "Transition",
2291
2097152 => "Transition",
2288
- 4194304 => "Transition",
2292
+ 4194304 => "Retry",
2293
8388608 => "Retry",
2294
16777216 => "Retry",
2295
33554432 => "Retry",
@@ -2300,13 +2304,12 @@ describe('Timeline profiler', () => {
2304
2 => Array [],
2305
4 => Array [],
2306
8 => Array [],
2303
- 16 => Array [],
2304
- 32 => Array [
2307
+ 16 => Array [
2308
Object {
2309
"batchUID": 1,
2310
"depth": 0,
2311
"duration": 0,
2309
- "lanes": "0b0000000000000000000000000100000",
2312
+ "lanes": "0b0000000000000000000000000010000",
2313
"timestamp": 10,
2314
"type": "render-idle",
2315
},
@@ -2314,7 +2317,7 @@ describe('Timeline profiler', () => {
2317
"batchUID": 1,
2318
"depth": 0,
2319
"duration": 0,
2317
- "lanes": "0b0000000000000000000000000100000",
2320
+ "lanes": "0b0000000000000000000000000010000",
2321
"timestamp": 10,
2322
"type": "render",
2323
},
@@ -2322,7 +2325,7 @@ describe('Timeline profiler', () => {
2325
"batchUID": 1,
2326
"depth": 0,
2327
"duration": 0,
2325
- "lanes": "0b0000000000000000000000000100000",
2328
+ "lanes": "0b0000000000000000000000000010000",
2329
"timestamp": 10,
2330
"type": "commit",
2331
},
@@ -2330,7 +2333,7 @@ describe('Timeline profiler', () => {
2333
"batchUID": 1,
2334
"depth": 1,
2335
"duration": 0,
2333
- "lanes": "0b0000000000000000000000000100000",
2336
+ "lanes": "0b0000000000000000000000000010000",
2337
"timestamp": 10,
2338
"type": "layout-effects",
2339
},
@@ -2338,7 +2341,7 @@ describe('Timeline profiler', () => {
2341
"batchUID": 1,
2342
"depth": 0,
2343
"duration": 0,
2341
- "lanes": "0b0000000000000000000000000100000",
2344
+ "lanes": "0b0000000000000000000000000010000",
2345
"timestamp": 10,
2346
"type": "passive-effects",
2347
},
@@ -2346,7 +2349,7 @@ describe('Timeline profiler', () => {
2349
"batchUID": 2,
2350
"depth": 0,
2351
"duration": 0,
2349
- "lanes": "0b0000000000000000000000000100000",
2352
+ "lanes": "0b0000000000000000000000000010000",
2353
"timestamp": 10,
2354
"type": "render-idle",
2355
},
@@ -2354,7 +2357,7 @@ describe('Timeline profiler', () => {
2357
"batchUID": 2,
2358
"depth": 0,
2359
"duration": 0,
2357
- "lanes": "0b0000000000000000000000000100000",
2360
+ "lanes": "0b0000000000000000000000000010000",
2361
"timestamp": 10,
2362
"type": "render",
2363
},
@@ -2362,7 +2365,7 @@ describe('Timeline profiler', () => {
2365
"batchUID": 2,
2366
"depth": 0,
2367
"duration": 0,
2365
- "lanes": "0b0000000000000000000000000100000",
2368
+ "lanes": "0b0000000000000000000000000010000",
2369
"timestamp": 10,
2370
"type": "commit",
2371
},
@@ -2370,7 +2373,7 @@ describe('Timeline profiler', () => {
2373
"batchUID": 2,
2374
"depth": 1,
2375
"duration": 0,
2373
- "lanes": "0b0000000000000000000000000100000",
2376
+ "lanes": "0b0000000000000000000000000010000",
2377
"timestamp": 10,
2378
"type": "layout-effects",
2379
},
@@ -2378,11 +2381,12 @@ describe('Timeline profiler', () => {
2381
"batchUID": 2,
2382
"depth": 0,
2383
"duration": 0,
2381
- "lanes": "0b0000000000000000000000000100000",
2384
+ "lanes": "0b0000000000000000000000000010000",
2385
"timestamp": 10,
2386
"type": "passive-effects",
2387
},
2388
],
2389
+ 32 => Array [],
2390
64 => Array [],
2391
128 => Array [],
2392
256 => Array [],
@@ -2415,7 +2419,7 @@ describe('Timeline profiler', () => {
2419
"reactVersion": "<filtered-version>",
2420
"schedulingEvents": Array [
2421
Object {
2418
- "lanes": "0b0000000000000000000000000100000",
2422
+ "lanes": "0b0000000000000000000000000010000",
2423
"timestamp": 10,
2424
"type": "schedule-render",
2425
"warning": null,
@@ -2424,7 +2428,7 @@ describe('Timeline profiler', () => {
2428
"componentName": "App",
2429
"componentStack": "
2430
in App (at **)",
2427
- "lanes": "0b0000000000000000000000000100000",
2431
+ "lanes": "0b0000000000000000000000000010000",
2432
"timestamp": 10,
2433
"type": "schedule-state-update",
2434
"warning": null,
packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+5
-118
@@ -21,7 +21,6 @@ let Suspense;
21
let act;
22
23
let IdleEventPriority;
24
-let ContinuousEventPriority;
24
25
function dispatchMouseHoverEvent(to, from) {
26
if (!to) {
@@ -111,18 +110,6 @@ function TODO_scheduleIdleDOMSchedulerTask(fn) {
110
});
111
}
112
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
-
113
describe('ReactDOMServerSelectiveHydration', () => {
114
beforeEach(() => {
115
jest.resetModuleRegistry();
@@ -138,8 +125,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
125
Suspense = React.Suspense;
126
127
IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
141
- ContinuousEventPriority = require('react-reconciler/constants')
142
- .ContinuousEventPriority;
128
});
129
130
it('hydrates the target boundary synchronously during a click', async () => {
@@ -1511,10 +1496,12 @@ describe('ReactDOMServerSelectiveHydration', () => {
1496
// Start rendering. This will force the first boundary to hydrate
1497
// by scheduling it at one higher pri than Idle.
1498
expect(Scheduler).toFlushAndYieldThrough([
1499
+ // An update was scheduled to force hydrate the boundary, but React will
1500
+ // continue rendering at Idle until the next time React yields. This is
1501
+ // fine though because it will switch to the hydration level when it
1502
+ // re-enters the work loop.
1503
'App',
1515
-
1516
- // Start hydrating A
1517
- 'A',
1504
+ 'AA',
1505
]);
1506
1507
// Hover over A which (could) schedule at one higher pri than Idle.
@@ -1785,104 +1772,4 @@ describe('ReactDOMServerSelectiveHydration', () => {
1772
1773
document.body.removeChild(container);
1774
});
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
- });
1775
});
packages/react-reconciler/src/ReactFiberBeginWork.js
+6
-26
@@ -282,14 +282,6 @@ import {
282
283
const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
284
285
-// A special exception that's used to unwind the stack when an update flows
286
-// into a dehydrated boundary.
287
-export const SelectiveHydrationException: mixed = new Error(
288
- "This is not a real error. It's an implementation detail of React's " +
289
- "selective hydration feature. If this leaks into userspace, it's a bug in " +
290
- 'React. Please file an issue.',
291
-);
292
-
285
let didReceiveUpdate: boolean = false;
286
287
let didWarnAboutBadClass;
@@ -2868,16 +2860,6 @@ function updateDehydratedSuspenseComponent(
2860
attemptHydrationAtLane,
2861
eventTime,
2862
);
2871
-
2872
- // Throw a special object that signals to the work loop that it should
2873
- // interrupt the current render.
2874
- //
2875
- // Because we're inside a React-only execution stack, we don't
2876
- // strictly need to throw here — we could instead modify some internal
2877
- // work loop state. But using an exception means we don't need to
2878
- // check for this case on every iteration of the work loop. So doing
2879
- // it this way moves the check out of the fast path.
2880
- throw SelectiveHydrationException;
2863
} else {
2864
// We have already tried to ping at a higher priority than we're rendering with
2865
// so if we got here, we must have failed to hydrate at those levels. We must
@@ -2888,17 +2870,15 @@ function updateDehydratedSuspenseComponent(
2870
}
2871
}
2872
2891
- // If we did not selectively hydrate, we'll continue rendering without
2892
- // hydrating. Mark this tree as suspended to prevent it from committing
2893
- // outside a transition.
2894
- //
2895
- // This path should only happen if the hydration lane already suspended.
2896
- // Currently, it also happens during sync updates because there is no
2897
- // hydration lane for sync updates.
2873
+ // If we have scheduled higher pri work above, this will just abort the render
2874
+ // since we now have higher priority work. We'll try to infinitely suspend until
2875
+ // we yield. TODO: We could probably just force yielding earlier instead.
2876
+ renderDidSuspendDelayIfPossible();
2877
+ // If we rendered synchronously, we won't yield so have to render something.
2878
+ // This will cause us to delete any existing content.
2879
// TODO: We should ideally have a sync hydration lane that we can apply to do
2880
// a pass where we hydrate this subtree in place using the previous Context and then
2881
// reapply the update afterwards.
2901
- renderDidSuspendDelayIfPossible();
2882
return retrySuspenseComponentWithoutHydrating(
2883
current,
2884
workInProgress,
packages/react-reconciler/src/ReactFiberLane.js
+37
-45
@@ -36,39 +36,39 @@ export const TotalLanes = 31;
36
export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000;
37
export const NoLane: Lane = /* */ 0b0000000000000000000000000000000;
38
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;
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;
72
73
export const SomeRetryLane: Lane = RetryLane1;
74
@@ -85,9 +85,6 @@ 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
- }
88
if (lane & SyncLane) {
89
return 'Sync';
90
}
@@ -134,8 +131,6 @@ let nextRetryLane: Lane = RetryLane1;
131
132
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
133
switch (getHighestPriorityLane(lanes)) {
137
- case SyncHydrationLane:
138
- return SyncHydrationLane;
134
case SyncLane:
135
return SyncLane;
136
case InputContinuousHydrationLane:
@@ -169,6 +164,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
164
case RetryLane2:
165
case RetryLane3:
166
case RetryLane4:
167
+ case RetryLane5:
168
return lanes & RetryLanes;
169
case SelectiveHydrationLane:
170
return SelectiveHydrationLane;
@@ -331,7 +327,6 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
327
328
function computeExpirationTime(lane: Lane, currentTime: number) {
329
switch (lane) {
334
- case SyncHydrationLane:
330
case SyncLane:
331
case InputContinuousHydrationLane:
332
case InputContinuousLane:
@@ -369,6 +364,7 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
364
case RetryLane2:
365
case RetryLane3:
366
case RetryLane4:
367
+ case RetryLane5:
368
// TODO: Retries should be allowed to expire if they are CPU bound for
369
// too long, but when I made this change it caused a spike in browser
370
// crashes. There must be some other underlying bug; not super urgent but
@@ -463,7 +459,7 @@ export function getLanesToRetrySynchronouslyOnError(
459
}
460
461
export function includesSyncLane(lanes: Lanes): boolean {
466
- return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
462
+ return (lanes & SyncLane) !== NoLanes;
463
}
464
465
export function includesNonIdleWork(lanes: Lanes): boolean {
@@ -473,8 +469,6 @@ export function includesOnlyRetries(lanes: Lanes): boolean {
469
return (lanes & RetryLanes) === lanes;
470
}
471
export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
476
- // TODO: Should hydration lanes be included here? This function is only
477
- // used in `updateDeferredValueImpl`.
472
const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
473
return (lanes & UrgentLanes) === NoLanes;
474
}
@@ -755,9 +749,6 @@ export function getBumpedLaneForHydration(
749
750
let lane;
751
switch (renderLane) {
758
- case SyncLane:
759
- lane = SyncHydrationLane;
760
- break;
752
case InputContinuousLane:
753
lane = InputContinuousHydrationLane;
754
break;
@@ -784,6 +775,7 @@ export function getBumpedLaneForHydration(
775
case RetryLane2:
776
case RetryLane3:
777
case RetryLane4:
778
+ case RetryLane5:
779
lane = TransitionHydrationLane;
780
break;
781
case IdleLane:
packages/react-reconciler/src/ReactFiberWorkLoop.js
+16
-47
@@ -138,7 +138,7 @@ import {
138
NoTimestamp,
139
claimNextTransitionLane,
140
claimNextRetryLane,
141
- includesSyncLane,
141
+ includesSomeLane,
142
isSubsetOfLanes,
143
mergeLanes,
144
removeLanes,
@@ -175,7 +175,6 @@ import {
175
} from './ReactEventPriorities';
176
import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
177
import {
178
- SelectiveHydrationException,
178
beginWork as originalBeginWork,
179
replayFunctionComponent,
180
} from './ReactFiberBeginWork';
@@ -317,14 +316,13 @@ let workInProgress: Fiber | null = null;
316
// The lanes we're rendering
317
let workInProgressRootRenderLanes: Lanes = NoLanes;
318
320
-opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5 | 6;
319
+opaque type SuspendedReason = 0 | 1 | 2 | 3 | 4 | 5;
320
const NotSuspended: SuspendedReason = 0;
321
const SuspendedOnError: SuspendedReason = 1;
322
const SuspendedOnData: SuspendedReason = 2;
323
const SuspendedOnImmediate: SuspendedReason = 3;
324
const SuspendedOnDeprecatedThrowPromise: SuspendedReason = 4;
325
const SuspendedAndReadyToUnwind: SuspendedReason = 5;
327
-const SuspendedOnHydration: SuspendedReason = 6;
326
327
// When this is true, the work-in-progress fiber just suspended (or errored) and
328
// we've yet to unwind the stack. In some cases, we may yield to the main thread
@@ -915,7 +913,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
913
// TODO: Temporary until we confirm this warning is not fired.
914
if (
915
existingCallbackNode == null &&
918
- !includesSyncLane(existingCallbackPriority)
916
+ existingCallbackPriority !== SyncLane
917
) {
918
console.error(
919
'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -933,7 +931,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
931
932
// Schedule a new callback.
933
let newCallbackNode;
936
- if (includesSyncLane(newCallbackPriority)) {
934
+ if (newCallbackPriority === SyncLane) {
935
// Special case: Sync React callbacks are scheduled on a special
936
// internal queue
937
if (root.tag === LegacyRoot) {
@@ -1477,7 +1475,7 @@ function performSyncWorkOnRoot(root) {
1475
flushPassiveEffects();
1476
1477
let lanes = getNextLanes(root, NoLanes);
1480
- if (!includesSyncLane(lanes)) {
1478
+ if (!includesSomeLane(lanes, SyncLane)) {
1479
// There's no remaining sync work left.
1480
ensureRootIsScheduled(root, now());
1481
return null;
@@ -1799,17 +1797,6 @@ function handleThrow(root, thrownValue): void {
1797
workInProgressSuspendedReason = shouldAttemptToSuspendUntilDataResolves()
1798
? SuspendedOnData
1799
: SuspendedOnImmediate;
1802
- } else if (thrownValue === SelectiveHydrationException) {
1803
- // An update flowed into a dehydrated boundary. Before we can apply the
1804
- // update, we need to finish hydrating. Interrupt the work-in-progress
1805
- // render so we can restart at the hydration lane.
1806
- //
1807
- // The ideal implementation would be able to switch contexts without
1808
- // unwinding the current stack.
1809
- //
1810
- // We could name this something more general but as of now it's the only
1811
- // case where we think this should happen.
1812
- workInProgressSuspendedReason = SuspendedOnHydration;
1800
} else {
1801
// This is a regular error.
1802
const isWakeable =
@@ -2051,7 +2038,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
2038
markRenderStarted(lanes);
2039
}
2040
2054
- outer: do {
2041
+ do {
2042
try {
2043
if (
2044
workInProgressSuspendedReason !== NotSuspended &&
@@ -2067,23 +2054,11 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
2054
// function and fork the behavior some other way.
2055
const unitOfWork = workInProgress;
2056
const thrownValue = workInProgressThrownValue;
2070
- switch (workInProgressSuspendedReason) {
2071
- case SuspendedOnHydration: {
2072
- // Selective hydration. An update flowed into a dehydrated tree.
2073
- // Interrupt the current render so the work loop can switch to the
2074
- // hydration lane.
2075
- workInProgress = null;
2076
- workInProgressRootExitStatus = RootDidNotComplete;
2077
- break outer;
2078
- }
2079
- default: {
2080
- // Continue with the normal work loop.
2081
- workInProgressSuspendedReason = NotSuspended;
2082
- workInProgressThrownValue = null;
2083
- unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2084
- break;
2085
- }
2086
- }
2057
+ workInProgressSuspendedReason = NotSuspended;
2058
+ workInProgressThrownValue = null;
2059
+ unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2060
+
2061
+ // Continue with the normal work loop.
2062
}
2063
workLoopSync();
2064
break;
@@ -2241,14 +2216,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
2216
unwindSuspendedUnitOfWork(unitOfWork, thrownValue);
2217
break;
2218
}
2244
- case SuspendedOnHydration: {
2245
- // Selective hydration. An update flowed into a dehydrated tree.
2246
- // Interrupt the current render so the work loop can switch to the
2247
- // hydration lane.
2248
- workInProgress = null;
2249
- workInProgressRootExitStatus = RootDidNotComplete;
2250
- break outer;
2251
- }
2219
default: {
2220
throw new Error(
2221
'Unexpected SuspendedReason. This is a bug in React.',
@@ -2927,13 +2894,16 @@ function commitRootImpl(
2894
// TODO: We can optimize this by not scheduling the callback earlier. Since we
2895
// currently schedule the callback in multiple places, will wait until those
2896
// are consolidated.
2930
- if (includesSyncLane(pendingPassiveEffectsLanes) && root.tag !== LegacyRoot) {
2897
+ if (
2898
+ includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
2899
+ root.tag !== LegacyRoot
2900
+ ) {
2901
flushPassiveEffects();
2902
}
2903
2904
// Read this again, since a passive effect might have updated it
2905
remainingLanes = root.pendingLanes;
2936
- if (includesSyncLane(remainingLanes)) {
2906
+ if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
2907
if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
2908
markNestedUpdateScheduled();
2909
}
@@ -3771,7 +3741,6 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
3741
if (
3742
didSuspendOrErrorWhileHydratingDEV() ||
3743
originalError === SuspenseException ||
3774
- originalError === SelectiveHydrationException ||
3744
(originalError !== null &&
3745
typeof originalError === 'object' &&
3746
typeof originalError.then === 'function')
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+8
-9
@@ -16,9 +16,8 @@ describe('DebugTracing', () => {
16
17
let logs;
18
19
- const SYNC_LANE_STRING = '0b0000000000000000000000000000010';
20
- const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
21
- const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
19
+ const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
20
+ const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
21
22
global.IS_REACT_ACT_ENVIRONMENT = true;
23
@@ -88,9 +87,9 @@ describe('DebugTracing', () => {
87
);
88
89
expect(logs).toEqual([
91
- `group: ⚛️ render (${SYNC_LANE_STRING})`,
90
+ 'group: ⚛️ render (0b0000000000000000000000000000001)',
91
'log: ⚛️ Example suspended',
93
- `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
92
+ 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
93
]);
94
95
logs.splice(0);
@@ -122,9 +121,9 @@ describe('DebugTracing', () => {
121
);
122
123
expect(logs).toEqual([
125
- `group: ⚛️ render (${SYNC_LANE_STRING})`,
124
+ 'group: ⚛️ render (0b0000000000000000000000000000001)',
125
'log: <Wrapper/>',
127
- `groupEnd: ⚛️ render (${SYNC_LANE_STRING})`,
126
+ 'groupEnd: ⚛️ render (0b0000000000000000000000000000001)',
127
]);
128
129
logs.splice(0);
@@ -238,7 +237,7 @@ describe('DebugTracing', () => {
237
expect(logs).toEqual([
238
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
239
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
241
- `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
240
+ 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
241
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
242
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
243
]);
@@ -296,7 +295,7 @@ describe('DebugTracing', () => {
295
expect(logs).toEqual([
296
`group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
297
`group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
299
- `log: ⚛️ Example updated state (${SYNC_LANE_STRING})`,
298
+ 'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
299
`groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
300
`groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
301
]);