Skip to content

Commit

Permalink
Fix severe perf problems in component tree devtool (#6770)
Browse files Browse the repository at this point in the history
One of the ReactMultiChildText tests renders 2145 roots (and even more components) and unmounts none of them. Now we don't loop through them all a bunch of times so the test takes 20 seconds instead of 60.

We should clean up instantiateReactComponent somehow so that the onSetDisplayName call isn't produced for the TopLevelWrapper, which should allow us to just store an array of unmountedIDs instead of a hash map so we at least don't have double maps. This change mirrors the old logic though.

Reviewers: @gaearon, @sebmarkbage
(cherry picked from commit 3cc733a)
  • Loading branch information
sophiebits authored and zpao committed Jun 14, 2016
1 parent 9483255 commit a599587
Showing 1 changed file with 15 additions and 7 deletions.
22 changes: 15 additions & 7 deletions src/isomorphic/devtools/ReactComponentTreeDevtool.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
var invariant = require('invariant');

var tree = {};
var rootIDs = [];
var unmountedIDs = {};
var rootIDs = {};

function updateTree(id, update) {
if (!tree[id]) {
Expand All @@ -28,6 +29,10 @@ function updateTree(id, update) {
isMounted: false,
updateCount: 0,
};
// TODO: We need to do this awkward dance because TopLevelWrapper "never
// gets mounted" but its display name gets set in instantiateReactComponent
// before its debug ID is set to 0.
unmountedIDs[id] = true;
}
update(tree[id]);
}
Expand Down Expand Up @@ -99,10 +104,11 @@ var ReactComponentTreeDevtool = {

onMountComponent(id) {
updateTree(id, item => item.isMounted = true);
delete unmountedIDs[id];
},

onMountRootComponent(id) {
rootIDs.push(id);
rootIDs[id] = true;
},

onUpdateComponent(id) {
Expand All @@ -111,7 +117,8 @@ var ReactComponentTreeDevtool = {

onUnmountComponent(id) {
updateTree(id, item => item.isMounted = false);
rootIDs = rootIDs.filter(rootID => rootID !== id);
unmountedIDs[id] = true;
delete rootIDs[id];
},

purgeUnmountedComponents() {
Expand All @@ -120,9 +127,10 @@ var ReactComponentTreeDevtool = {
return;
}

Object.keys(tree)
.filter(id => !tree[id].isMounted)
.forEach(purgeDeep);
for (var id in unmountedIDs) {
purgeDeep(id);
}
unmountedIDs = {};
},

isMounted(id) {
Expand Down Expand Up @@ -168,7 +176,7 @@ var ReactComponentTreeDevtool = {
},

getRootIDs() {
return rootIDs;
return Object.keys(rootIDs);
},

getRegisteredIDs() {
Expand Down

0 comments on commit a599587

Please sign in to comment.