diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index f9e0460220a10..1108a6bb64ff0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/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(null); const [rootID, setRootID] = useState(null); + const [selectedFiberID, selectFiberID] = useState(null); + const [selectedFiberName, selectFiberName] = useState(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('flame-chart'); - const [selectedFiberID, selectFiberID] = useState(null); - const [selectedFiberName, selectFiberName] = useState(null); const [selectedInteractionID, selectInteraction] = useState( 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,