Fix severe perf problems in component tree devtool (#6770)
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
Ben Alpert committed
May 14, 2016 at 12:13 UTC
3cc733add482fd0f855d15ae8cbd75cc077bd674
1 file changed
+15
-7
src/isomorphic/devtools/ReactComponentTreeDevtool.js
+15
-7
@@ -14,7 +14,8 @@
14
var invariant = require('invariant');
15
16
var tree = {};
17
-var rootIDs = [];
17
+var unmountedIDs = {};
18
+var rootIDs = {};
19
20
function updateTree(id, update) {
21
if (!tree[id]) {
@@ -28,6 +29,10 @@ function updateTree(id, update) {
29
isMounted: false,
30
updateCount: 0,
31
};
32
+ // TODO: We need to do this awkward dance because TopLevelWrapper "never
33
+ // gets mounted" but its display name gets set in instantiateReactComponent
34
+ // before its debug ID is set to 0.
35
+ unmountedIDs[id] = true;
36
}
37
update(tree[id]);
38
}
@@ -99,10 +104,11 @@ var ReactComponentTreeDevtool = {
104
105
onMountComponent(id) {
106
updateTree(id, item => item.isMounted = true);
107
+ delete unmountedIDs[id];
108
},
109
110
onMountRootComponent(id) {
105
- rootIDs.push(id);
111
+ rootIDs[id] = true;
112
},
113
114
onUpdateComponent(id) {
@@ -111,7 +117,8 @@ var ReactComponentTreeDevtool = {
117
118
onUnmountComponent(id) {
119
updateTree(id, item => item.isMounted = false);
114
- rootIDs = rootIDs.filter(rootID => rootID !== id);
120
+ unmountedIDs[id] = true;
121
+ delete rootIDs[id];
122
},
123
124
purgeUnmountedComponents() {
@@ -120,9 +127,10 @@ var ReactComponentTreeDevtool = {
127
return;
128
}
129
123
- Object.keys(tree)
124
- .filter(id => !tree[id].isMounted)
125
- .forEach(purgeDeep);
130
+ for (var id in unmountedIDs) {
131
+ purgeDeep(id);
132
+ }
133
+ unmountedIDs = {};
134
},
135
136
isMounted(id) {
@@ -168,7 +176,7 @@ var ReactComponentTreeDevtool = {
176
},
177
178
getRootIDs() {
171
- return rootIDs;
179
+ return Object.keys(rootIDs);
180
},
181
182
getRegisteredIDs() {