Skip to content

Commit

Permalink
Fix severe perf problems in component tree devtool (facebook#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 8, 2016
1 parent 20e467c commit edb81e5
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 edb81e5

Please sign in to comment.