perf(devtools): scope Fast Refresh cache purges

packages/react-devtools-shared/src/backend/agent.js

@@ -1109,12 +1109,12 @@ export default class Agent extends EventEmitter<{
     this.emit('traceUpdates', nodes);
   };
 
-  onFastRefreshScheduled: () => void = () => {
+  onFastRefreshScheduled: (rendererID: number | null | void) => void = rendererID => {
     if (__DEBUG__) {
-      debug('onFastRefreshScheduled');
+      debug('onFastRefreshScheduled', rendererID);
     }
 
-    this._bridge.send('fastRefreshScheduled');
+    this._bridge.send('fastRefreshScheduled', rendererID);
   };
 
   onHookOperations: (operations: Array<number>) => void = operations => {

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

@@ -488,13 +488,10 @@ export function attach(
   if (typeof scheduleRefresh === 'function') {
     // When Fast Refresh updates a component, the frontend may need to purge cached information.
     // For example, ASTs cached for the component (for named hooks) may no longer be valid.
-    // Send a signal to the frontend to purge this cached information.
-    // The "fastRefreshScheduled" dispatched is global (not Fiber or even Renderer specific).
-    // This is less effecient since it means the front-end will need to purge the entire cache,
-    // but this is probably an okay trade off in order to reduce coupling between the DevTools and Fast Refresh.
+    // Send a signal to the frontend to purge cached information for this renderer.
     renderer.scheduleRefresh = (...args) => {
       try {
-        hook.emit('fastRefreshScheduled');
+        hook.emit('fastRefreshScheduled', rendererID);
       } finally {
         return scheduleRefresh(...args);
       }

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

@@ -201,7 +201,7 @@ export type BackendEvents = {
   backendVersion: [string],
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
-  fastRefreshScheduled: [],
+  fastRefreshScheduled: [number | null | void],
   getSavedPreferences: [],
   inspectedElement: [InspectedElementPayload],
   inspectedScreen: [InspectedElementPayload],

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

@@ -180,7 +180,15 @@ export function InspectedElementContextController({
     const purgeCachedMetadata = purgeCachedMetadataRef.current;
     if (typeof purgeCachedMetadata === 'function') {
       // When Fast Refresh updates a component, any cached AST metadata may be invalid.
-      const fastRefreshScheduled = () => {
+      const fastRefreshScheduled = (rendererID: number | null | void) => {
+        if (
+          rendererID != null &&
+          element !== null &&
+          element.rendererID !== rendererID
+        ) {
+          return;
+        }
+
         startTransition(() => {
           clearHookNamesCache();
           purgeCachedMetadata();
@@ -191,7 +199,7 @@ export function InspectedElementContextController({
       return () =>
         bridge.removeListener('fastRefreshScheduled', fastRefreshScheduled);
     }
-  }, [bridge]);
+  }, [bridge, element]);
 
   // Reset path now that we've asked the backend to hydrate it.
   // The backend is stateful, so we don't need to remember this path the next time we inspect.