Poll for update only refreshes cache when there's an update

Author: Brian Vaughn

packages/react-devtools-shared/src/devtools/views/Components/types.js

@@ -56,6 +56,12 @@ export type OwnersList = {|
   owners: Array<Owner> | null,
 |};
 
+export type InspectedElementResponseType =
+  | 'full-data'
+  | 'hydrated-path'
+  | 'no-change'
+  | 'not-found';
+
 export type InspectedElement = {|
   id: number,
 

packages/react-devtools-shared/src/inspectedElementCache.js

@@ -19,6 +19,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {
   Element,
   InspectedElement as InspectedElementFrontend,
+  InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
 
 const Pending = 0;
@@ -122,7 +123,7 @@ export function inspectElement(
       path,
       rendererID: ((rendererID: any): number),
     }).then(
-      (inspectedElement: InspectedElementFrontend) => {
+      ([inspectedElement: InspectedElementFrontend]) => {
         const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
         resolvedRecord.status = Resolved;
         resolvedRecord.value = inspectedElement;
@@ -174,12 +175,18 @@ export function checkForUpdate({
       element,
       path: null,
       rendererID: ((rendererID: any): number),
-    }).then((inspectedElement: InspectedElementFrontend) => {
-      // TODO only start transition if we got an update; right now we over-update even after "no-change"
-      startTransition(() => {
-        const [key, value] = createCacheSeed(element, inspectedElement);
-        refresh(key, value);
-      });
-    });
+    }).then(
+      ([
+        inspectedElement: InspectedElementFrontend,
+        responseType: InspectedElementResponseType,
+      ]) => {
+        if (responseType === 'full-data') {
+          startTransition(() => {
+            const [key, value] = createCacheSeed(element, inspectedElement);
+            refresh(key, value);
+          });
+        }
+      },
+    );
   }
 }

packages/react-devtools-shared/src/inspectedElementMutableSource.js

@@ -22,6 +22,7 @@ import type {
 import type {
   Element,
   InspectedElement as InspectedElementFrontend,
+  InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
 
 // Map an Element in the Store to the most recent copy of its inspected data.
@@ -36,6 +37,11 @@ const inspectedElementMap: WeakMap<
 
 type Path = Array<string | number>;
 
+type InspectElementReturnType = [
+  InspectedElementFrontend,
+  InspectedElementResponseType,
+];
+
 export function inspectElement({
   bridge,
   element,
@@ -46,7 +52,7 @@ export function inspectElement({
   element: Element,
   path: Path | null,
   rendererID: number,
-|}): Promise<InspectedElementFrontend> {
+|}): Promise<InspectElementReturnType> {
   const {id} = element;
   return inspectElementAPI({
     bridge,
@@ -62,7 +68,7 @@ export function inspectElement({
         // This is a no-op for the purposes of our cache.
         inspectedElement = inspectedElementMap.get(element);
         if (inspectedElement != null) {
-          return inspectedElement;
+          return [inspectedElement, type];
         }
         break;
 
@@ -84,7 +90,7 @@ export function inspectElement({
 
         inspectedElementMap.set(element, inspectedElement);
 
-        return inspectedElement;
+        return [inspectedElement, type];
 
       case 'hydrated-path':
         const hydratedPathData = ((data: any): InspectElementHydratedPath);
@@ -107,7 +113,7 @@ export function inspectElement({
 
           inspectedElementMap.set(element, inspectedElement);
 
-          return inspectedElement;
+          return [inspectedElement, type];
         }
         break;