Fix Profiler root change error (#18880)

Author: bl00mber

packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js

@@ -22,7 +22,7 @@ import type {ProfilingDataFrontend} from './types';
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
 export type Context = {|
-  // Which tab is selexted in the Profiler UI?
+  // Which tab is selected in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
 
@@ -129,6 +129,38 @@ function ProfilerContextController({children}: Props) {
     setPrevProfilingData,
   ] = useState<ProfilingDataFrontend | null>(null);
   const [rootID, setRootID] = useState<number | null>(null);
+  const [selectedFiberID, selectFiberID] = useState<number | null>(null);
+  const [selectedFiberName, selectFiberName] = useState<string | null>(null);
+
+  const selectFiber = useCallback(
+    (id: number | null, name: string | null) => {
+      selectFiberID(id);
+      selectFiberName(name);
+
+      // Sync selection to the Components tab for convenience.
+      if (id !== null) {
+        const element = store.getElementByID(id);
+
+        // Keep in mind that profiling data may be from a previous session.
+        // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.
+        if (element !== null && element.displayName === name) {
+          dispatch({
+            type: 'SELECT_ELEMENT_BY_ID',
+            payload: id,
+          });
+        }
+      }
+    },
+    [dispatch, selectFiberID, selectFiberName, store],
+  );
+
+  const setRootIDAndClearFiber = useCallback(
+    (id: number | null) => {
+      selectFiber(null, null);
+      setRootID(id);
+    },
+    [setRootID, selectFiber],
+  );
 
   if (prevProfilingData !== profilingData) {
     batchedUpdates(() => {
@@ -150,9 +182,9 @@ function ProfilerContextController({children}: Props) {
             selectedElementRootID !== null &&
             dataForRoots.has(selectedElementRootID)
           ) {
-            setRootID(selectedElementRootID);
+            setRootIDAndClearFiber(selectedElementRootID);
           } else {
-            setRootID(firstRootID);
+            setRootIDAndClearFiber(firstRootID);
           }
         }
       }
@@ -180,34 +212,10 @@ function ProfilerContextController({children}: Props) {
     null,
   );
   const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
-  const [selectedFiberID, selectFiberID] = useState<number | null>(null);
-  const [selectedFiberName, selectFiberName] = useState<string | null>(null);
   const [selectedInteractionID, selectInteraction] = useState<number | null>(
     null,
   );
 
-  const selectFiber = useCallback(
-    (id: number | null, name: string | null) => {
-      selectFiberID(id);
-      selectFiberName(name);
-
-      // Sync selection to the Components tab for convenience.
-      if (id !== null) {
-        const element = store.getElementByID(id);
-
-        // Keep in mind that profiling data may be from a previous session.
-        // In that case, IDs may match up arbitrarily; to be safe, compare both ID and display name.
-        if (element !== null && element.displayName === name) {
-          dispatch({
-            type: 'SELECT_ELEMENT_BY_ID',
-            payload: id,
-          });
-        }
-      }
-    },
-    [dispatch, selectFiberID, selectFiberName, store],
-  );
-
   if (isProfiling) {
     batchedUpdates(() => {
       if (selectedCommitIndex !== null) {
@@ -237,7 +245,7 @@ function ProfilerContextController({children}: Props) {
       supportsProfiling,
 
       rootID,
-      setRootID,
+      setRootID: setRootIDAndClearFiber,
 
       isCommitFilterEnabled,
       setIsCommitFilterEnabled,
@@ -268,6 +276,7 @@ function ProfilerContextController({children}: Props) {
 
       rootID,
       setRootID,
+      setRootIDAndClearFiber,
 
       isCommitFilterEnabled,
       setIsCommitFilterEnabled,