Fixed edge case mutation bugs in selected element and tree context
Brian Vaughn committed
Feb 14, 2019 at 14:36 UTC
3f40d38203137e0be84f791a6c738e0acb68f45d
2 files changed
+12
-12
src/devtools/views/SelectedElement.js
+11
-12
@@ -3,7 +3,7 @@
3
import React, {
4
useCallback,
5
useContext,
6
- useLayoutEffect,
6
+ useEffect,
7
useRef,
8
useState,
9
} from 'react';
@@ -154,36 +154,35 @@ function useInspectedElement(id: number | null): InspectedElement | null {
154
const bridge = useContext(BridgeContext);
155
const store = useContext(StoreContext);
156
157
- const rendererID =
158
- id === null ? null : store.getRendererIDForElement(id) || null;
159
-
157
const [inspectedElement, setInspectedElement] = useState(null);
158
162
- // Track the most recently-requested element.
163
- // We'll ignore any backend updates about previous elements.
164
- idRef.current = id;
159
+ useEffect(() => {
160
+ // Track the current selected element ID.
161
+ // We ignore any backend updates about previously selected elements.
162
+ idRef.current = id;
163
166
- useLayoutEffect(() => {
164
// Hide previous/stale insepected element to avoid temporarily showing the wrong values.
165
setInspectedElement(null);
166
167
// A null id indicates that there's nothing currently selected in the tree.
171
- // A null renderer ID indicates that the previously selected element has been unmounted.
172
- if (id === null || rendererID === null) {
168
+ if (id === null) {
169
return () => {};
170
}
171
176
- let timeoutID = null;
172
+ const rendererID = store.getRendererIDForElement(id) || null;
173
174
// Update the $r variable.
175
bridge.send('selectElement', { id, rendererID });
176
177
+ // Update props, state, and context in the side panel.
178
const sendBridgeRequest = () => {
179
bridge.send('inspectElement', { id, rendererID });
180
};
181
182
+ let timeoutID = null;
183
+
184
const onInspectedElement = (inspectedElement: InspectedElement) => {
186
- if (inspectedElement && inspectedElement.id !== idRef.current) {
185
+ if (!inspectedElement || inspectedElement.id !== idRef.current) {
186
// Ignore bridge updates about previously selected elements.
187
return;
188
}
src/devtools/views/TreeContext.js
+1
@@ -344,6 +344,7 @@ function reduceOwnersState(store: Store, state: State, action: Action): State {
344
ownerStack = ownerStack.slice(0, indexOfRemovedItem);
345
if (ownerStack.length === 0) {
346
_ownerFlatTree = null;
347
+ ownerStackIndex = null;
348
} else {
349
ownerStackIndex = ownerStack.length - 1;
350
}