Changed polling approach. Fixed remove event typo.
Brian Vaughn committed
Apr 22, 2019 at 08:52 UTC
5970bf4b40335086d53403b59d2916bca6e7fc1c
1 file changed
+29
-5
src/devtools/views/Components/InspectedElementContext.js
+29
-5
@@ -42,6 +42,7 @@ 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,15 +50,37 @@ function InspectedElementContextController({ children }: Props) {
50
51
const rendererID = store.getRendererIDForElement(inspectedElementID);
52
52
- const requestUpdate = () => {
53
+ let timeoutID: TimeoutID | null = null;
54
+
55
+ const sendRequest = () => {
56
+ timeoutID = null;
57
+
58
bridge.send('inspectElement', { id: inspectedElementID, rendererID });
59
};
60
56
- requestUpdate();
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
58
- const intervalID = setInterval(requestUpdate, 1000);
77
+ return () => {
78
+ bridge.removeListener('inspectedElement', onInspectedElement);
79
60
- return () => clearInterval(intervalID);
80
+ if (timeoutID !== null) {
81
+ clearTimeout(timeoutID);
82
+ }
83
+ };
84
}, [bridge, inspectedElementID, store]);
85
86
const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
@@ -88,6 +111,7 @@ function InspectedElementContextController({ children }: Props) {
111
[inProgressRequests]
112
);
113
114
+ // This effect handler invalidates the suspense cache and schedules rendering updates with React.
115
useEffect(() => {
116
const onInspectedElement = (
117
inspectedElementRaw: InspectedElement | null
@@ -117,7 +141,7 @@ function InspectedElementContextController({ children }: Props) {
141
};
142
143
bridge.addListener('inspectedElement', onInspectedElement);
120
- return () => bridge.removeListener('inspectElement', onInspectedElement);
144
+ return () => bridge.removeListener('inspectedElement', onInspectedElement);
145
}, [bridge, inProgressRequests, resource]);
146
147
const value = useMemo(