Skip to content

Commit

Permalink
Ignore DOM writes outside the batch in ReactPerf
Browse files Browse the repository at this point in the history
ReactDOMInput and a few other classes handle change event by scheduling updateWrapper() in an asap().
It gets executed after the batch, which confuses ReactPerf that expects all DOM writes to happen during a batch.
Since this implementation of ReactPerf relying on the stack is going away, let's plug the hole temporarily by ignoring DOM writes that occur during postponed updateWrapper(). In any case, they have no relation to actual calculations of wasted renders, as they don't occur due to updateComponent(), but rather due to onChange() special DOM behavior.

This fixes #5548
  • Loading branch information
gaearon committed Apr 14, 2016
1 parent 36e4fe5 commit 3b28602
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 2 deletions.
5 changes: 3 additions & 2 deletions src/test/ReactDefaultPerfAnalysis.js
Original file line number Diff line number Diff line change
Expand Up @@ -175,12 +175,13 @@ function getUnchangedComponents(measurement) {
// the amount of time it took to render the entire subtree.
var cleanComponents = {};
var writes = measurement.writes;
var hierarchy = measurement.hierarchy;
var dirtyComposites = {};
Object.keys(writes).forEach(function(id) {
writes[id].forEach(function(write) {
// Root mounting (innerHTML set) is recorded with an ID of ''
if (id !== '') {
measurement.hierarchy[id].forEach((c) => dirtyComposites[c] = true);
if (id !== '' && hierarchy.hasOwnProperty(id)) {
hierarchy[id].forEach((c) => dirtyComposites[c] = true);
}
});
});
Expand Down
12 changes: 12 additions & 0 deletions src/test/__tests__/ReactDefaultPerf-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,18 @@ describe('ReactDefaultPerf', function() {
expect(summary).toEqual([]);
});

it('should not fail on input change events', function() {
var container = document.createElement('div');
var onChange = () => {};
var input = ReactDOM.render(
<input checked={true} onChange={onChange} />,
container
);
expectNoWaste(() => {
ReactTestUtils.Simulate.change(input);
});
});

it('should print a table after calling printOperations', function() {
var container = document.createElement('div');
var measurements = measure(() => {
Expand Down

0 comments on commit 3b28602

Please sign in to comment.