From 3b2860222051cd3978529a89e4eb3193e23c6c26 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 14 Apr 2016 20:48:03 +0100 Subject: [PATCH] Ignore DOM writes outside the batch in ReactPerf 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 --- src/test/ReactDefaultPerfAnalysis.js | 5 +++-- src/test/__tests__/ReactDefaultPerf-test.js | 12 ++++++++++++ 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/test/ReactDefaultPerfAnalysis.js b/src/test/ReactDefaultPerfAnalysis.js index bf7cb30feca6b..bb5a35e2d0eee 100644 --- a/src/test/ReactDefaultPerfAnalysis.js +++ b/src/test/ReactDefaultPerfAnalysis.js @@ -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); } }); }); diff --git a/src/test/__tests__/ReactDefaultPerf-test.js b/src/test/__tests__/ReactDefaultPerf-test.js index cc16c8846215c..8019f0fe8e55a 100644 --- a/src/test/__tests__/ReactDefaultPerf-test.js +++ b/src/test/__tests__/ReactDefaultPerf-test.js @@ -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( + , + container + ); + expectNoWaste(() => { + ReactTestUtils.Simulate.change(input); + }); + }); + it('should print a table after calling printOperations', function() { var container = document.createElement('div'); var measurements = measure(() => {