Remove timeout from performance flamegraph (#15477)
The implementation is wrong, but also it's not that useful for debugging. Implementing it properly would involve tracking more information than we do currently. Perhaps including the priority of the callback in the message would be helpful, but not sure. For now I'll just remove it.
Andrew Clark committed
Apr 23, 2019 at 15:42 UTC
9c6ff136c78e934a19d0da950139e4d912ae54c2
3 files changed
+36
-38
packages/react-reconciler/src/ReactDebugFiberPerf.js
+5
-6
@@ -248,16 +248,15 @@ export function startRequestCallbackTimer(): void {
248
}
249
}
250
251
-export function stopRequestCallbackTimer(
252
- didExpire: boolean,
253
- expirationTime: number,
254
-): void {
251
+export function stopRequestCallbackTimer(didExpire: boolean): void {
252
if (enableUserTimingAPI) {
253
if (supportsUserTiming) {
254
isWaitingForCallback = false;
258
- const warning = didExpire ? 'React was blocked by main thread' : null;
255
+ const warning = didExpire
256
+ ? 'Update expired; will flush synchronously'
257
+ : null;
258
endMark(
260
- `(Waiting for async callback... will force flush in ${expirationTime} ms)`,
259
+ '(Waiting for async callback...)',
260
'(Waiting for async callback...)',
261
warning,
262
);
packages/react-reconciler/src/ReactFiberScheduler.js
+1
-2
@@ -703,8 +703,7 @@ function renderRoot(
703
704
if (enableUserTimingAPI && expirationTime !== Sync) {
705
const didExpire = isSync;
706
- const timeoutMs = expirationTimeToMs(expirationTime);
707
- stopRequestCallbackTimer(didExpire, timeoutMs);
706
+ stopRequestCallbackTimer(didExpire);
707
}
708
709
if (root.firstPendingTime < expirationTime) {
packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
+30
-30
@@ -1,7 +1,7 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
4
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
4
+"⚛ (Waiting for async callback...)
5
6
// Mount
7
⚛ (React Tree Reconciliation: Completed Root)
@@ -15,7 +15,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
15
⚛ (Calling Lifecycle Methods: 1 Total)
16
⚛ AllLifecycles.componentDidMount
17
18
-⚛ (Waiting for async callback... will force flush in 5250 ms)
18
+⚛ (Waiting for async callback...)
19
20
// Update
21
⚛ (React Tree Reconciliation: Completed Root)
@@ -31,7 +31,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
31
⚛ (Calling Lifecycle Methods: 2 Total)
32
⚛ AllLifecycles.componentDidUpdate
33
34
-⚛ (Waiting for async callback... will force flush in 5250 ms)
34
+⚛ (Waiting for async callback...)
35
36
// Unmount
37
⚛ (React Tree Reconciliation: Completed Root)
@@ -45,7 +45,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
45
`;
46
47
exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduce overhead 1`] = `
48
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
48
+"⚛ (Waiting for async callback...)
49
50
// The commit phase should mention A and B just once
51
⚛ (React Tree Reconciliation: Completed Root)
@@ -62,7 +62,7 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
62
⚛ A.componentDidUpdate
63
⚛ B.componentDidUpdate
64
65
-⚛ (Waiting for async callback... will force flush in 5250 ms)
65
+⚛ (Waiting for async callback...)
66
67
// Because of deduplication, we don't know B was cascading,
68
// but we should still see the warning for the commit phase.
@@ -92,7 +92,7 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
92
`;
93
94
exports[`ReactDebugFiberPerf does not include ConcurrentMode, StrictMode, or Profiler components in measurements 1`] = `
95
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
95
+"⚛ (Waiting for async callback...)
96
97
// Mount
98
⚛ (React Tree Reconciliation: Completed Root)
@@ -108,7 +108,7 @@ exports[`ReactDebugFiberPerf does not include ConcurrentMode, StrictMode, or Pro
108
`;
109
110
exports[`ReactDebugFiberPerf does not include context provider or consumer in measurements 1`] = `
111
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
111
+"⚛ (Waiting for async callback...)
112
113
// Mount
114
⚛ (React Tree Reconciliation: Completed Root)
@@ -143,7 +143,7 @@ exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is
143
`;
144
145
exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascading 1`] = `
146
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
146
+"⚛ (Waiting for async callback...)
147
148
// Should not print a warning
149
⚛ (React Tree Reconciliation: Completed Root)
@@ -156,7 +156,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
156
⚛ (Committing Host Effects: 1 Total)
157
⚛ (Calling Lifecycle Methods: 0 Total)
158
159
-⚛ (Waiting for async callback... will force flush in 5250 ms)
159
+⚛ (Waiting for async callback...)
160
161
// Should not print a warning
162
⚛ (React Tree Reconciliation: Completed Root)
@@ -172,7 +172,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
172
`;
173
174
exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
175
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
175
+"⚛ (Waiting for async callback...)
176
177
// Mount
178
⚛ (React Tree Reconciliation: Completed Root)
@@ -184,7 +184,7 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
184
⚛ (Committing Host Effects: 1 Total)
185
⚛ (Calling Lifecycle Methods: 0 Total)
186
187
-⚛ (Waiting for async callback... will force flush in 5250 ms)
187
+⚛ (Waiting for async callback...)
188
189
// Update
190
⚛ (React Tree Reconciliation: Completed Root)
@@ -196,7 +196,7 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
196
⚛ (Committing Host Effects: 2 Total)
197
⚛ (Calling Lifecycle Methods: 2 Total)
198
199
-⚛ (Waiting for async callback... will force flush in 5250 ms)
199
+⚛ (Waiting for async callback...)
200
201
// Unmount
202
⚛ (React Tree Reconciliation: Completed Root)
@@ -209,7 +209,7 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
209
`;
210
211
exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = `
212
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
212
+"⚛ (Waiting for async callback...)
213
214
// Start rendering through B
215
⚛ (React Tree Reconciliation: Yielded)
@@ -218,7 +218,7 @@ exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = `
218
⚛ Child [mount]
219
⚛ B [mount]
220
221
-⚛ (Waiting for async callback... will force flush in 5250 ms)
221
+⚛ (Waiting for async callback...)
222
223
// Complete the rest
224
⚛ (React Tree Reconciliation: Completed Root)
@@ -245,7 +245,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
245
⚛ (Committing Host Effects: 1 Total)
246
⚛ (Calling Lifecycle Methods: 0 Total)
247
248
-⚛ (Waiting for async callback... will force flush in 10737418210 ms)
248
+⚛ (Waiting for async callback...)
249
250
// Flush the child
251
⚛ (React Tree Reconciliation: Completed Root)
@@ -259,7 +259,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
259
`;
260
261
exports[`ReactDebugFiberPerf properly displays the forwardRef component in measurements 1`] = `
262
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
262
+"⚛ (Waiting for async callback...)
263
264
// Mount
265
⚛ (React Tree Reconciliation: Completed Root)
@@ -279,7 +279,7 @@ exports[`ReactDebugFiberPerf properly displays the forwardRef component in measu
279
`;
280
281
exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
282
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
282
+"⚛ (Waiting for async callback...)
283
284
// Stop on Baddie and restart from Boundary
285
⚛ (React Tree Reconciliation: Completed Root)
@@ -313,7 +313,7 @@ exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
313
`;
314
315
exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
316
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
316
+"⚛ (Waiting for async callback...)
317
318
// Will fatal
319
⚛ (React Tree Reconciliation: Completed Root)
@@ -329,7 +329,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
329
⚛ (Committing Host Effects: 1 Total)
330
⚛ (Calling Lifecycle Methods: 1 Total)
331
332
-⚛ (Waiting for async callback... will force flush in 5250 ms)
332
+⚛ (Waiting for async callback...)
333
334
// Will reconcile from a clean state
335
⚛ (React Tree Reconciliation: Completed Root)
@@ -344,7 +344,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
344
`;
345
346
exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
347
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
347
+"⚛ (Waiting for async callback...)
348
349
// Should include just A and B, no Parents
350
⚛ (React Tree Reconciliation: Completed Root)
@@ -359,7 +359,7 @@ exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
359
`;
360
361
exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = `
362
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
362
+"⚛ (Waiting for async callback...)
363
364
⚛ (React Tree Reconciliation: Completed Root)
365
⚛ Parent [mount]
@@ -370,7 +370,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = `
370
`;
371
372
exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
373
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
373
+"⚛ (Waiting for async callback...)
374
375
⚛ (React Tree Reconciliation: Completed Root)
376
⚛ Parent [mount]
@@ -378,7 +378,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
378
⚛ Suspense [mount]
379
⚛ Spinner [mount]
380
381
-⚛ (Waiting for async callback... will force flush in 5250 ms)
381
+⚛ (Waiting for async callback...)
382
383
⚛ (React Tree Reconciliation: Completed Root)
384
⚛ Parent [mount]
@@ -393,7 +393,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = `
393
`;
394
395
exports[`ReactDebugFiberPerf supports memo 1`] = `
396
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
396
+"⚛ (Waiting for async callback...)
397
398
⚛ (React Tree Reconciliation: Completed Root)
399
⚛ Parent [mount]
@@ -407,7 +407,7 @@ exports[`ReactDebugFiberPerf supports memo 1`] = `
407
`;
408
409
exports[`ReactDebugFiberPerf supports portals 1`] = `
410
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
410
+"⚛ (Waiting for async callback...)
411
412
⚛ (React Tree Reconciliation: Completed Root)
413
⚛ Parent [mount]
@@ -421,12 +421,12 @@ exports[`ReactDebugFiberPerf supports portals 1`] = `
421
`;
422
423
exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] = `
424
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
424
+"⚛ (Waiting for async callback...)
425
426
⚛ (React Tree Reconciliation: Yielded)
427
⚛ Foo [mount]
428
429
-⚛ (Waiting for async callback... will force flush in 5250 ms)
429
+⚛ (Waiting for async callback...)
430
⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render
431
⚛ Foo [mount]
432
⚛ (Committing Changes)
@@ -444,7 +444,7 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] =
444
`;
445
446
exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
447
-"⛔ (Waiting for async callback... will force flush in 5250 ms) Warning: React was blocked by main thread
447
+"⛔ (Waiting for async callback...) Warning: Update expired; will flush synchronously
448
449
⚛ (Committing Changes)
450
⚛ (Committing Snapshot Effects: 0 Total)
@@ -454,7 +454,7 @@ exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
454
`;
455
456
exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
457
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
457
+"⚛ (Waiting for async callback...)
458
459
// Should print a warning
460
⚛ (React Tree Reconciliation: Completed Root)
@@ -478,7 +478,7 @@ exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
478
`;
479
480
exports[`ReactDebugFiberPerf warns on cascading renders from top-level render 1`] = `
481
-"⚛ (Waiting for async callback... will force flush in 5250 ms)
481
+"⚛ (Waiting for async callback...)
482
483
// Rendering the first root
484
⚛ (React Tree Reconciliation: Completed Root)