From 5970bf4b40335086d53403b59d2916bca6e7fc1c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Apr 2019 08:52:15 -0700
Subject: [PATCH] Changed polling approach. Fixed remove event typo.

---
 .../Components/InspectedElementContext.js     | 34 ++++++++++++++++---
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/devtools/views/Components/InspectedElementContext.js b/src/devtools/views/Components/InspectedElementContext.js
index e3ea5fd246..31c7f6431c 100644
--- a/src/devtools/views/Components/InspectedElementContext.js
+++ b/src/devtools/views/Components/InspectedElementContext.js
@@ -42,6 +42,7 @@ function InspectedElementContextController({ children }: Props) {
 
   const [count, setCount] = useState<number>(0);
 
+  // This effect handler polls for updates on the currently selected element.
   useEffect(() => {
     if (inspectedElementID === null) {
       return () => {};
@@ -49,15 +50,37 @@ function InspectedElementContextController({ children }: Props) {
 
     const rendererID = store.getRendererIDForElement(inspectedElementID);
 
-    const requestUpdate = () => {
+    let timeoutID: TimeoutID | null = null;
+
+    const sendRequest = () => {
+      timeoutID = null;
+
       bridge.send('inspectElement', { id: inspectedElementID, rendererID });
     };
 
-    requestUpdate();
+    // Send the initial inspection request.
+    // We'll poll for an update in the response handler below.
+    sendRequest();
 
-    const intervalID = setInterval(requestUpdate, 1000);
+    const onInspectedElement = (inspectedElement: InspectedElement | null) => {
+      if (
+        inspectedElement !== null &&
+        inspectedElement.id === inspectedElementID
+      ) {
+        // If this is the element we requested, wait a little bit and then ask for an update.
+        timeoutID = setTimeout(sendRequest, 1000);
+      }
+    };
 
-    return () => clearInterval(intervalID);
+    bridge.addListener('inspectedElement', onInspectedElement);
+
+    return () => {
+      bridge.removeListener('inspectedElement', onInspectedElement);
+
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+    };
   }, [bridge, inspectedElementID, store]);
 
   const inProgressRequests = useMemo<Map<number, InProgressRequest>>(
@@ -88,6 +111,7 @@ function InspectedElementContextController({ children }: Props) {
     [inProgressRequests]
   );
 
+  // This effect handler invalidates the suspense cache and schedules rendering updates with React.
   useEffect(() => {
     const onInspectedElement = (
       inspectedElementRaw: InspectedElement | null
@@ -117,7 +141,7 @@ function InspectedElementContextController({ children }: Props) {
     };
 
     bridge.addListener('inspectedElement', onInspectedElement);
-    return () => bridge.removeListener('inspectElement', onInspectedElement);
+    return () => bridge.removeListener('inspectedElement', onInspectedElement);
   }, [bridge, inProgressRequests, resource]);
 
   const value = useMemo(