From 399fefc54017954ecb092198e8474a76e58ed3c7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Feb 2021 15:03:10 -0500
Subject: [PATCH] Poll for update only refreshes cache when there's an update

---
 .../src/devtools/views/Components/types.js    |  6 +++++
 .../src/inspectedElementCache.js              | 23 ++++++++++++-------
 .../src/inspectedElementMutableSource.js      | 14 +++++++----
 3 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index efdb894636885..11eb544c3f789 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/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,
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 47a556bed78fc..9d0fcd9d73714 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/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);
+          });
+        }
+      },
+    );
   }
 }
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index efde881a74f59..2504b7932300e 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/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;