DevTools: Don't fallback to nearest host descendants when tracing updates

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -3419,18 +3419,6 @@ export function attach(
             // I.e. we just restore them by undoing what we did above.
             fiberInstance.firstChild = remainingReconcilingChildren;
             remainingReconcilingChildren = null;
-
-            if (traceUpdatesEnabled) {
-              // If we're tracing updates and we've bailed out before reaching a host node,
-              // we should fall back to recursively marking the nearest host descendants for highlight.
-              if (traceNearestHostComponentUpdate) {
-                const hostInstances =
-                  findAllCurrentHostInstances(fiberInstance);
-                hostInstances.forEach(hostInstance => {
-                  traceUpdatesForNodes.add(hostInstance);
-                });
-              }
-            }
           } else {
             // If this fiber is filtered there might be changes to this set elsewhere so we have
             // to visit each child to place it back in the set. We let the child bail out instead.

packages/react-devtools-shell/src/app/TraceUpdateRepro/index.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {useEffect, useRef, useState} from 'react';
+
+function ShouldReRender() {
+  // Used just to trigger the re-render
+  const [, setCount] = useState(0);
+
+  const renders = useRef(0);
+  renders.current += 1;
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(value => value + 1);
+    }, 500);
+    return () => clearInterval(interval);
+  }, [setCount]);
+
+  return <p>Should re-render count: {renders.current}x</p>;
+}
+
+function ShouldNotReRender() {
+  const renders = useRef(0);
+  renders.current += 1;
+  return <p>Should not re-render count: {renders.current}x</p>;
+}
+
+export default function TraceUpdateRepro() {
+  return (
+    <>
+      <ShouldReRender />
+
+      {/* This one isn't highlighted... */}
+      <ShouldNotReRender />
+
+      {/* These ones are highlighted. I wonder if there is some sort of tree depth check?*/}
+      <div>
+        <ShouldNotReRender />
+      </div>
+      <div>
+        <div>
+          <ShouldNotReRender />
+        </div>
+      </div>
+    </>
+  );
+}

packages/react-devtools-shell/src/app/index.js

@@ -19,6 +19,7 @@ import Toggle from './Toggle';
 import ErrorBoundaries from './ErrorBoundaries';
 import PartiallyStrictApp from './PartiallyStrictApp';
 import SuspenseTree from './SuspenseTree';
+import TraceUpdateRepro from './TraceUpdateRepro';
 import {ignoreErrors, ignoreLogs, ignoreWarnings} from './console';
 
 import './styles.css';
@@ -112,6 +113,7 @@ function mountTestApp() {
   mountApp(SuspenseTree);
   mountApp(DeeplyNestedComponents);
   mountApp(Iframe);
+  mountApp(TraceUpdateRepro);
 
   if (shouldRenderLegacy) {
     mountLegacyApp(PartiallyStrictApp);