Skip to content

Commit c0a62af

Browse files
acdliteacdlite
committed
Debug comments should print directly above the next measure
1 parent b47bf24 commit c0a62af

File tree

4 files changed

+35
-29
lines changed

4 files changed

+35
-29
lines changed

‎packages/react-reconciler/src/ReactDebugFiberPerf.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -368,7 +368,9 @@ export function stopWorkLoopTimer(interruptedBy: Fiber | null): void {
368368
warning = 'A top-level update interrupted the previous render';
369369
} else {
370370
const componentName = getComponentName(interruptedBy) || 'Unknown';
371-
warning = `An update to ${componentName} interrupted the previous render`;
371+
warning = `An update to ${
372+
componentName
373+
} interrupted the previous render`;
372374
}
373375
} else if (commitCountInCurrentWorkLoop > 1) {
374376
warning = 'There were cascading updates';

‎packages/react-reconciler/src/ReactFiberScheduler.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,7 @@ import type {FiberRoot} from './ReactFiberRoot';
1313
import type {HydrationContext} from './ReactFiberHydrationContext';
1414
import type {ExpirationTime} from './ReactFiberExpirationTime';
1515

16-
import {
17-
getStackAddendumByWorkInProgressFiber,
18-
} from 'shared/ReactFiberComponentTreeHook';
16+
import {getStackAddendumByWorkInProgressFiber} from 'shared/ReactFiberComponentTreeHook';
1917
import ReactErrorUtils from 'shared/ReactErrorUtils';
2018
import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
2119
import {

‎packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ describe('ReactDebugFiberPerf', () => {
2020
let activeMeasure;
2121
let knownMarks;
2222
let knownMeasures;
23+
let comments;
2324

2425
function resetFlamechart() {
2526
root = {
@@ -35,12 +36,14 @@ describe('ReactDebugFiberPerf', () => {
3536
activeMeasure = root;
3637
knownMarks = new Set();
3738
knownMeasures = new Set();
39+
comments = [];
3840
}
3941

4042
function addComment(comment) {
41-
activeMeasure.children.push(
42-
`${' '.repeat(activeMeasure.indent + 1)}// ${comment}`,
43-
);
43+
comments.push(comment);
44+
// activeMeasure.children.push(
45+
// `${' '.repeat(activeMeasure.indent + 1)}// ${comment}`,
46+
// );
4447
}
4548

4649
function getFlameChart() {
@@ -67,9 +70,11 @@ describe('ReactDebugFiberPerf', () => {
6770
// Will be assigned on measure() call:
6871
label: null,
6972
parent: activeMeasure,
73+
comments,
7074
toString() {
7175
return (
7276
[
77+
...this.comments.map(c => ' '.repeat(this.indent) + '// ' + c),
7378
' '.repeat(this.indent) + this.label,
7479
...this.children.map(c => c.toString()),
7580
].join('\n') +
@@ -78,6 +83,7 @@ describe('ReactDebugFiberPerf', () => {
7883
);
7984
},
8085
};
86+
comments = [];
8187
// Step one level deeper
8288
activeMeasure.children.push(measure);
8389
activeMeasure = measure;

‎packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.js.snap‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
44
"⚛ (Waiting for async callback...)
5-
// Mount
65
6+
// Mount
77
⚛ (React Tree Reconciliation)
88
⚛ AllLifecycles [mount]
99
⚛ AllLifecycles.componentWillMount
@@ -15,8 +15,8 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
1515
⚛ AllLifecycles.componentDidMount
1616
1717
⚛ (Waiting for async callback...)
18-
// Update
1918
19+
// Update
2020
⚛ (React Tree Reconciliation)
2121
⚛ AllLifecycles [update]
2222
⚛ AllLifecycles.componentWillReceiveProps
@@ -30,8 +30,8 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
3030
⚛ AllLifecycles.componentDidUpdate
3131
3232
⚛ (Waiting for async callback...)
33-
// Unmount
3433
34+
// Unmount
3535
⚛ (React Tree Reconciliation)
3636
3737
⚛ (Committing Changes)
@@ -43,8 +43,8 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
4343

4444
exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduce overhead 1`] = `
4545
"⚛ (Waiting for async callback...)
46-
// The commit phase should mention A and B just once
4746
47+
// The commit phase should mention A and B just once
4848
⚛ (React Tree Reconciliation)
4949
⚛ Parent [update]
5050
⚛ A [update]
@@ -59,9 +59,9 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
5959
⚛ B.componentDidUpdate
6060
6161
⚛ (Waiting for async callback...)
62-
// Because of deduplication, we don't know B was cascading,
63-
// but we should still see the warning for the commit phase.
6462
63+
// Because of deduplication, we don't know B was cascading,
64+
// but we should still see the warning for the commit phase.
6565
⚛ (React Tree Reconciliation)
6666
⚛ Parent [update]
6767
⚛ A [update]
@@ -105,8 +105,8 @@ exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is
105105

106106
exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascading 1`] = `
107107
"⚛ (Waiting for async callback...)
108-
// Should not print a warning
109108
109+
// Should not print a warning
110110
⚛ (React Tree Reconciliation)
111111
⚛ Parent [mount]
112112
⚛ NotCascading [mount]
@@ -117,8 +117,8 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
117117
⚛ (Calling Lifecycle Methods: 0 Total)
118118
119119
⚛ (Waiting for async callback...)
120-
// Should not print a warning
121120
121+
// Should not print a warning
122122
⚛ (React Tree Reconciliation)
123123
⚛ Parent [update]
124124
⚛ NotCascading [update]
@@ -132,8 +132,8 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
132132

133133
exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
134134
"⚛ (Waiting for async callback...)
135-
// Mount
136135
136+
// Mount
137137
⚛ (React Tree Reconciliation)
138138
⚛ Parent [mount]
139139
⚛ Child [mount]
@@ -143,8 +143,8 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
143143
⚛ (Calling Lifecycle Methods: 0 Total)
144144
145145
⚛ (Waiting for async callback...)
146-
// Update
147146
147+
// Update
148148
⚛ (React Tree Reconciliation)
149149
⚛ Parent [update]
150150
⚛ Child [update]
@@ -154,8 +154,8 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
154154
⚛ (Calling Lifecycle Methods: 2 Total)
155155
156156
⚛ (Waiting for async callback...)
157-
// Unmount
158157
158+
// Unmount
159159
⚛ (React Tree Reconciliation)
160160
161161
⚛ (Committing Changes)
@@ -166,23 +166,23 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
166166

167167
exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = `
168168
"⚛ (Waiting for async callback...)
169-
// Start mounting Parent and A
170169
170+
// Start mounting Parent and A
171171
⚛ (React Tree Reconciliation)
172172
⚛ Parent [mount]
173173
⚛ A [mount]
174174
⚛ Child [mount]
175175
176176
⚛ (Waiting for async callback...)
177-
// Mount B just a little (but not enough to memoize)
178177
178+
// Mount B just a little (but not enough to memoize)
179179
⚛ (React Tree Reconciliation)
180180
⚛ Parent [mount]
181181
⚛ B [mount]
182182
183183
⚛ (Waiting for async callback...)
184-
// Complete B and Parent
185184
185+
// Complete B and Parent
186186
⚛ (React Tree Reconciliation)
187187
⚛ Parent [mount]
188188
⚛ B [mount]
@@ -204,8 +204,8 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
204204
⚛ (Calling Lifecycle Methods: 0 Total)
205205
206206
⚛ (Waiting for async callback...)
207-
// Flush the child
208207
208+
// Flush the child
209209
⚛ (React Tree Reconciliation)
210210
⚛ Child [mount]
211211
@@ -217,8 +217,8 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
217217

218218
exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
219219
"⚛ (Waiting for async callback...)
220-
// Stop on Baddie and restart from Boundary
221220
221+
// Stop on Baddie and restart from Boundary
222222
⚛ (React Tree Reconciliation)
223223
⚛ Parent [mount]
224224
⛔ Boundary [mount] Warning: An error was thrown inside this error boundary
@@ -242,8 +242,8 @@ exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
242242

243243
exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
244244
"⚛ (Waiting for async callback...)
245-
// Will fatal
246245
246+
// Will fatal
247247
⚛ (React Tree Reconciliation)
248248
⚛ Parent [mount]
249249
⚛ Baddie [mount]
@@ -253,8 +253,8 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
253253
⚛ (Calling Lifecycle Methods: 1 Total)
254254
255255
⚛ (Waiting for async callback...)
256-
// Will reconcile from a clean state
257256
257+
// Will reconcile from a clean state
258258
⚛ (React Tree Reconciliation)
259259
⚛ Parent [mount]
260260
⚛ Child [mount]
@@ -267,8 +267,8 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
267267

268268
exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
269269
"⚛ (Waiting for async callback...)
270-
// Should include just A and B, no Parents
271270
271+
// Should include just A and B, no Parents
272272
⚛ (React Tree Reconciliation)
273273
⚛ A [update]
274274
⚛ B [update]
@@ -346,8 +346,8 @@ exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
346346

347347
exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
348348
"⚛ (Waiting for async callback...)
349-
// Should print a warning
350349
350+
// Should print a warning
351351
⚛ (React Tree Reconciliation)
352352
⚛ Parent [mount]
353353
⚛ Cascading [mount]
@@ -368,17 +368,17 @@ exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
368368

369369
exports[`ReactDebugFiberPerf warns on cascading renders from top-level render 1`] = `
370370
"⚛ (Waiting for async callback...)
371-
// Rendering the first root
372371
372+
// Rendering the first root
373373
⚛ (React Tree Reconciliation)
374374
⚛ Cascading [mount]
375375
376376
⛔ (Committing Changes) Warning: Lifecycle hook scheduled a cascading update
377377
⚛ (Committing Host Effects: 1 Total)
378378
⚛ (Calling Lifecycle Methods: 1 Total)
379379
⛔ Cascading.componentDidMount Warning: Scheduled a cascading update
380-
// Scheduling another root from componentDidMount
381380
381+
// Scheduling another root from componentDidMount
382382
⚛ (React Tree Reconciliation)
383383
⚛ Child [mount]
384384

0 commit comments

Comments
 (0)