Don't schedule an update with React unless the curent element was invalidated
Brian Vaughn committed
Apr 22, 2019 at 09:03 UTC
70be637d48d78e932809b96a2b49a572e03e8e54
1 file changed
+46
-44
src/devtools/views/Components/InspectedElementContext.js
+46
-44
@@ -42,47 +42,6 @@ function InspectedElementContextController({ children }: Props) {
42
43
const [count, setCount] = useState<number>(0);
44
45
- // This effect handler polls for updates on the currently selected element.
46
- useEffect(() => {
47
- if (inspectedElementID === null) {
48
- return () => {};
49
- }
50
-
51
- const rendererID = store.getRendererIDForElement(inspectedElementID);
52
-
53
- let timeoutID: TimeoutID | null = null;
54
-
55
- const sendRequest = () => {
56
- timeoutID = null;
57
-
58
- bridge.send('inspectElement', { id: inspectedElementID, rendererID });
59
- };
60
-
61
- // Send the initial inspection request.
62
- // We'll poll for an update in the response handler below.
63
- sendRequest();
64
-
65
- const onInspectedElement = (inspectedElement: InspectedElement | null) => {
66
- if (
67
- inspectedElement !== null &&
68
- inspectedElement.id === inspectedElementID
69
- ) {
70
- // If this is the element we requested, wait a little bit and then ask for an update.
71
- timeoutID = setTimeout(sendRequest, 1000);
72
- }
73
- };
74
-
75
- bridge.addListener('inspectedElement', onInspectedElement);
76
-
77
- return () => {
78
- bridge.removeListener('inspectedElement', onInspectedElement);
79
-
80
- if (timeoutID !== null) {
81
- clearTimeout(timeoutID);
82
- }
83
- };
84
- }, [bridge, inspectedElementID, store]);
85
-
45
const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
46
() => new Map(),
47
[]
@@ -134,15 +93,58 @@ function InspectedElementContextController({ children }: Props) {
93
} else {
94
resource.write(id, inspectedElement);
95
137
- // Schedule update with React if necessary.
138
- setCount(count => count + 1);
96
+ // Schedule update with React if the curently-selected element has been invalidated.
97
+ if (id === inspectedElementID) {
98
+ setCount(count => count + 1);
99
+ }
100
}
101
}
102
};
103
104
bridge.addListener('inspectedElement', onInspectedElement);
105
return () => bridge.removeListener('inspectedElement', onInspectedElement);
145
- }, [bridge, inProgressRequests, resource]);
106
+ }, [bridge, inProgressRequests, inspectedElementID, resource]);
107
+
108
+ // This effect handler polls for updates on the currently selected element.
109
+ useEffect(() => {
110
+ if (inspectedElementID === null) {
111
+ return () => {};
112
+ }
113
+
114
+ const rendererID = store.getRendererIDForElement(inspectedElementID);
115
+
116
+ let timeoutID: TimeoutID | null = null;
117
+
118
+ const sendRequest = () => {
119
+ timeoutID = null;
120
+
121
+ bridge.send('inspectElement', { id: inspectedElementID, rendererID });
122
+ };
123
+
124
+ // Send the initial inspection request.
125
+ // We'll poll for an update in the response handler below.
126
+ sendRequest();
127
+
128
+ const onInspectedElement = (inspectedElement: InspectedElement | null) => {
129
+ if (
130
+ inspectedElement !== null &&
131
+ inspectedElement.id === inspectedElementID
132
+ ) {
133
+ // If this is the element we requested, wait a little bit and then ask for an update.
134
+ timeoutID = setTimeout(sendRequest, 1000);
135
+ }
136
+ };
137
+
138
+ bridge.addListener('inspectedElement', onInspectedElement);
139
+
140
+ return () => {
141
+ bridge.removeListener('inspectedElement', onInspectedElement);
142
+
143
+ if (timeoutID !== null) {
144
+ clearTimeout(timeoutID);
145
+ }
146
+ };
147
+ }, [bridge, inspectedElementID, store]);
148
149
const value = useMemo(
150
() => ({