Closed
Description
In many case, I suppose that Perf is used like this.
React.addons.Perf.start();
this.setState({items: newItems},() => {
React.addons.Perf.stop();
React.addons.Perf.printInclusive();
});
However, totalTime
is printed as Total time: 0.00 ms
.
Because setState
callback is called before flushBatchedUpdates
,
totalTime
is computed after that.
sample: http://jsfiddle.net/koba04/9b615edu/
I think that this behavior is a little confusing...
Do you have any ideas?
my ideas
Perf.stop
accepts callback
The callback is called after flushBatchedUpdates
.
React.addons.Perf.start();
this.setState({items: newItems}, () => {
React.addons.Perf.stop(() => {
React.addons.Perf.printInclusive();
});
});
totalTime
is computed at Perf.stop
But totalTime
is treated as a diff between Perf.start
and Perf.stop
.
- ReactDefaultPerf.js
start: function() {
if (!ReactDefaultPerf._injected) {
ReactPerf.injection.injectMeasure(ReactDefaultPerf.measure);
}
ReactDefaultPerf._allMeasurements.length = 0;
ReactPerf.enableMeasure = true;
ReactDefaultPerf.startTime = performanceNow();
},
stop: function() {
ReactPerf.enableMeasure = false;
ReactDefaultPerf._allMeasurements[
ReactDefaultPerf._allMeasurements.length - 1
].totalTime = performanceNow() - ReactDefaultPerf.startTime;
},
Add some documentation
totalTime
is computed afterflushBatchedUpdates
, so you need to call your perf method on the next event loop in case ofsetState
callback.
React.addons.Perf.start();
this.setState({items: newItems},() => {
React.addons.Perf.stop();
setTimeout(() => {
React.addons.Perf.printInclusive();
}, 0);
});
Thank you.
Metadata
Metadata
Assignees
Labels
No labels