Clear named hooks Suspense and AST cache after a Fast Refresh (#21891)

Author: Brian Vaughn

packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js

@@ -33,7 +33,7 @@ describe('parseHookNames', () => {
 
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
-    parseHookNames = require('../parseHookNames').default;
+    parseHookNames = require('../parseHookNames').parseHookNames;
 
     // Jest (jest-runner?) configures Errors to automatically account for source maps.
     // This changes behavior between our tests and the browser.
@@ -158,6 +158,10 @@ describe('parseHookNames', () => {
     ]);
   });
 
+  // TODO Test that cache purge works
+
+  // TODO Test that cached metadata is purged when Fast Refresh scheduled
+
   describe('inline, external and bundle source maps', () => {
     it('should work for simple components', async () => {
       async function test(path, name = 'Component') {

packages/react-devtools-extensions/src/main.js

@@ -12,7 +12,7 @@ import {
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
-import parseHookNames from './parseHookNames';
+import {parseHookNames, purgeCachedMetadata} from './parseHookNames';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -215,9 +215,10 @@ function createPanelIfReactLoaded() {
               browserTheme: getBrowserTheme(),
               componentsPortalContainer,
               enabledInspectedElementContextMenu: true,
-              loadHookNamesFunction: parseHookNames,
+              loadHookNames: parseHookNames,
               overrideTab,
               profilerPortalContainer,
+              purgeCachedHookNamesMetadata: purgeCachedMetadata,
               showTabBar: false,
               store,
               warnIfUnsupportedVersionDetected: true,

packages/react-devtools-extensions/src/parseHookNames.js

@@ -102,7 +102,7 @@ const originalURLToMetadataCache: LRUCache<
   },
 });
 
-export default async function parseHookNames(
+export async function parseHookNames(
   hooksTree: HooksTree,
 ): Thenable<HookNames | null> {
   if (!enableHookNameParsing) {
@@ -623,3 +623,8 @@ function updateLruCache(
   });
   return Promise.resolve();
 }
+
+export function purgeCachedMetadata(): void {
+  originalURLToMetadataCache.reset();
+  runtimeURLToMetadataCache.reset();
+}

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

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

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

@@ -48,6 +48,7 @@ export function initBackend(
       agent.onUnsupportedRenderer(id);
     }),
 
+    hook.sub('fastRefreshScheduled', agent.onFastRefreshScheduled),
     hook.sub('operations', agent.onHookOperations),
     hook.sub('traceUpdates', agent.onTraceUpdates),
 

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

@@ -568,6 +568,7 @@ export function attach(
     overrideProps,
     overridePropsDeletePath,
     overridePropsRenamePath,
+    scheduleRefresh,
     setErrorHandler,
     setSuspenseHandler,
     scheduleUpdate,
@@ -579,6 +580,22 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
+  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.
+    renderer.scheduleRefresh = (...args) => {
+      try {
+        hook.emit('fastRefreshScheduled');
+      } finally {
+        return scheduleRefresh(...args);
+      }
+    };
+  }
+
   // Tracks Fibers with recently changed number of error/warning messages.
   // These collections store the Fiber rather than the ID,
   // in order to avoid generating an ID for Fibers that never get mounted

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

@@ -144,6 +144,8 @@ export type ReactRenderer = {
   Mount?: any,
   // Only injected by React v17.0.3+ in DEV mode
   setErrorHandler?: ?(shouldError: (fiber: Object) => ?boolean) => void,
+  // Intentionally opaque type to avoid coupling DevTools to different Fast Refresh versions.
+  scheduleRefresh?: Function,
   ...
 };
 

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

@@ -169,6 +169,7 @@ type UpdateConsolePatchSettingsParams = {|
 export type BackendEvents = {|
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
+  fastRefreshScheduled: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   isSynchronousXHRSupported: [boolean],

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

@@ -0,0 +1,20 @@
+// @flow
+
+import {createContext} from 'react';
+import type {
+  LoadHookNamesFunction,
+  PurgeCachedHookNamesMetadata,
+} from '../DevTools';
+
+export type Context = {
+  loadHookNames: LoadHookNamesFunction | null,
+  purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,
+};
+
+const HookNamesContext = createContext<Context>({
+  loadHookNames: null,
+  purgeCachedMetadata: null,
+});
+HookNamesContext.displayName = 'HookNamesContext';
+
+export default HookNamesContext;

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

@@ -26,10 +26,11 @@ import {
   inspectElement,
 } from 'react-devtools-shared/src/inspectedElementCache';
 import {
+  clearHookNamesCache,
   hasAlreadyLoadedHookNames,
   loadHookNames,
 } from 'react-devtools-shared/src/hookNamesCache';
-import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
+import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 
 import type {HookNames} from 'react-devtools-shared/src/types';
@@ -63,7 +64,10 @@ export type Props = {|
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
-  const loadHookNamesFunction = useContext(LoadHookNamesFunctionContext);
+  const {
+    loadHookNames: loadHookNamesFunction,
+    purgeCachedMetadata,
+  } = useContext(HookNamesContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);
@@ -150,6 +154,24 @@ export function InspectedElementContextController({children}: Props) {
     [setState, state],
   );
 
+  useEffect(() => {
+    if (enableHookNameParsing) {
+      if (typeof purgeCachedMetadata === 'function') {
+        // When Fast Refresh updates a component, any cached AST metadata may be invalid.
+        const fastRefreshScheduled = () => {
+          startTransition(() => {
+            clearHookNamesCache();
+            purgeCachedMetadata();
+            refresh();
+          });
+        };
+        bridge.addListener('fastRefreshScheduled', fastRefreshScheduled);
+        return () =>
+          bridge.removeListener('fastRefreshScheduled', fastRefreshScheduled);
+      }
+    }
+  }, [bridge]);
+
   // 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.
   useEffect(() => {