diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 45745684f5841..bf165bf8a35c3 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -92,10 +92,7 @@ import { SERVER_CONTEXT_SYMBOL_STRING, } from './ReactSymbols'; import {format} from './utils'; -import { - enableProfilerChangedHookIndices, - enableStyleXFeatures, -} from 'react-devtools-feature-flags'; +import {enableStyleXFeatures} from 'react-devtools-feature-flags'; import is from 'shared/objectIs'; import hasOwnProperty from 'shared/hasOwnProperty'; import {getStyleXData} from './StyleX/utils'; @@ -1265,19 +1262,12 @@ export function attach( }; // Only traverse the hooks list once, depending on what info we're returning. - if (enableProfilerChangedHookIndices) { - const indices = getChangedHooksIndices( - prevFiber.memoizedState, - nextFiber.memoizedState, - ); - data.hooks = indices; - data.didHooksChange = indices !== null && indices.length > 0; - } else { - data.didHooksChange = didHooksChange( - prevFiber.memoizedState, - nextFiber.memoizedState, - ); - } + const indices = getChangedHooksIndices( + prevFiber.memoizedState, + nextFiber.memoizedState, + ); + data.hooks = indices; + data.didHooksChange = indices !== null && indices.length > 0; return data; } @@ -1458,12 +1448,13 @@ export function attach( return false; } - function didHooksChange(prev: any, next: any): boolean { + function getChangedHooksIndices(prev: any, next: any): null | Array { if (prev == null || next == null) { - return false; + return null; } - // We can't report anything meaningful for hooks changes. + const indices = []; + let index = 0; if ( next.hasOwnProperty('baseState') && next.hasOwnProperty('memoizedState') && @@ -1472,45 +1463,15 @@ export function attach( ) { while (next !== null) { if (didStatefulHookChange(prev, next)) { - return true; - } else { - next = next.next; - prev = prev.next; + indices.push(index); } + next = next.next; + prev = prev.next; + index++; } } - return false; - } - - function getChangedHooksIndices(prev: any, next: any): null | Array { - if (enableProfilerChangedHookIndices) { - if (prev == null || next == null) { - return null; - } - - const indices = []; - let index = 0; - if ( - next.hasOwnProperty('baseState') && - next.hasOwnProperty('memoizedState') && - next.hasOwnProperty('next') && - next.hasOwnProperty('queue') - ) { - while (next !== null) { - if (didStatefulHookChange(prev, next)) { - indices.push(index); - } - next = next.next; - prev = prev.next; - index++; - } - } - - return indices; - } - - return null; + return indices; } function getChangedKeys(prev: any, next: any): null | Array { diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js index cfe58d74ebb1f..9c29e361fae91 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js @@ -15,11 +15,8 @@ export const consoleManagedByDevToolsDuringStrictMode = false; export const enableLogger = true; -export const enableNamedHooksFeature = true; -export const enableProfilerChangedHookIndices = true; export const enableStyleXFeatures = true; export const isInternalFacebookBuild = true; -export const enableProfilerComponentTree = true; /************************************************************************ * Do not edit the code below. diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js index d773689888181..060e5e808ede2 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js @@ -15,11 +15,8 @@ export const consoleManagedByDevToolsDuringStrictMode = false; export const enableLogger = false; -export const enableNamedHooksFeature = true; -export const enableProfilerChangedHookIndices = true; export const enableStyleXFeatures = false; export const isInternalFacebookBuild = false; -export const enableProfilerComponentTree = true; /************************************************************************ * Do not edit the code below. diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js index f3d5e6f33e818..15b764f8d352b 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js @@ -15,8 +15,5 @@ export const consoleManagedByDevToolsDuringStrictMode = true; export const enableLogger = false; -export const enableNamedHooksFeature = true; -export const enableProfilerChangedHookIndices = true; export const enableStyleXFeatures = false; export const isInternalFacebookBuild = false; -export const enableProfilerComponentTree = true; diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js index c13b8183047d2..b25db375eff29 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js @@ -15,11 +15,8 @@ export const consoleManagedByDevToolsDuringStrictMode = true; export const enableLogger = true; -export const enableNamedHooksFeature = true; -export const enableProfilerChangedHookIndices = true; export const enableStyleXFeatures = true; export const isInternalFacebookBuild = true; -export const enableProfilerComponentTree = true; /************************************************************************ * Do not edit the code below. diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js index b4a19f2425764..144ddb301f848 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js @@ -15,11 +15,8 @@ export const consoleManagedByDevToolsDuringStrictMode = true; export const enableLogger = false; -export const enableNamedHooksFeature = true; -export const enableProfilerChangedHookIndices = true; export const enableStyleXFeatures = false; export const isInternalFacebookBuild = false; -export const enableProfilerComponentTree = true; /************************************************************************ * Do not edit the code below. diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js index ad17311d5e656..13bc39ba2f467 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js @@ -36,7 +36,6 @@ import {loadModule} from 'react-devtools-shared/src/dynamicImportCache'; import FetchFileWithCachingContext from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext'; import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext'; import {SettingsContext} from '../Settings/SettingsContext'; -import {enableNamedHooksFeature} from 'react-devtools-feature-flags'; import type {HookNames} from 'react-devtools-shared/src/types'; import type {ReactNodeList} from 'shared/ReactTypes'; @@ -128,28 +127,26 @@ export function InspectedElementContextController({ if (!elementHasChanged && element !== null) { inspectedElement = inspectElement(element, state.path, store, bridge); - if (enableNamedHooksFeature) { - if (typeof hookNamesModuleLoader === 'function') { - if (parseHookNames || alreadyLoadedHookNames) { - const hookNamesModule = loadModule(hookNamesModuleLoader); - if (hookNamesModule !== null) { - const {parseHookNames: loadHookNamesFunction, purgeCachedMetadata} = - hookNamesModule; + if (typeof hookNamesModuleLoader === 'function') { + if (parseHookNames || alreadyLoadedHookNames) { + const hookNamesModule = loadModule(hookNamesModuleLoader); + if (hookNamesModule !== null) { + const {parseHookNames: loadHookNamesFunction, purgeCachedMetadata} = + hookNamesModule; - purgeCachedMetadataRef.current = purgeCachedMetadata; + purgeCachedMetadataRef.current = purgeCachedMetadata; - if ( - inspectedElement !== null && - inspectedElement.hooks !== null && - loadHookNamesFunction !== null - ) { - hookNames = loadHookNames( - element, - inspectedElement.hooks, - loadHookNamesFunction, - fetchFileWithCaching, - ); - } + if ( + inspectedElement !== null && + inspectedElement.hooks !== null && + loadHookNamesFunction !== null + ) { + hookNames = loadHookNames( + element, + inspectedElement.hooks, + loadHookNamesFunction, + fetchFileWithCaching, + ); } } } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js index 61260d6d05d38..b1cae27bc40d1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js @@ -22,10 +22,6 @@ import styles from './InspectedElementHooksTree.css'; import useContextMenu from '../../ContextMenu/useContextMenu'; import {meta} from '../../../hydration'; import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache'; -import { - enableNamedHooksFeature, - enableProfilerChangedHookIndices, -} from 'react-devtools-feature-flags'; import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext'; import isArray from 'react-devtools-shared/src/isArray'; @@ -90,8 +86,7 @@ export function InspectedElementHooksTree({ data-testname="InspectedElementHooksTree">
hooks
- {enableNamedHooksFeature && - typeof hookNamesModuleLoader === 'function' && + {typeof hookNamesModuleLoader === 'function' && (!parseHookNames || hookParsingFailed) && ( 0; let name = hook.name; - if (enableProfilerChangedHookIndices) { - if (hookID !== null) { - name = ( - <> - {hookID + 1} - {name} - - ); - } + if (hookID !== null) { + name = ( + <> + {hookID + 1} + {name} + + ); } const type = typeof value; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js index 5cac9fc6ef2b3..cb06c98f933a2 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js @@ -34,7 +34,6 @@ import {SettingsModalContextController} from 'react-devtools-shared/src/devtools import portaledContent from '../portaledContent'; import {StoreContext} from '../context'; import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext'; -import {enableProfilerComponentTree} from 'react-devtools-feature-flags'; import styles from './Profiler.css'; @@ -56,8 +55,6 @@ function Profiler(_: {}) { const {supportsTimeline} = useContext(StoreContext); const isLegacyProfilerSelected = selectedTabID !== 'timeline'; - const isRightColumnVisible = - isLegacyProfilerSelected || enableProfilerComponentTree; let view = null; if (didRecordCommits || selectedTabID === 'timeline') { @@ -151,9 +148,7 @@ function Profiler(_: {}) {
- {isRightColumnVisible && ( -
{sidebar}
- )} +
{sidebar}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js index 71002cbea99d0..8ecae81af571c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js @@ -9,7 +9,6 @@ import * as React from 'react'; import {useContext} from 'react'; -import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags'; import {ProfilerContext} from '../Profiler/ProfilerContext'; import {StoreContext} from '../context'; @@ -103,7 +102,7 @@ export default function WhatChanged({fiberID}: Props): React.Node { } if (didHooksChange) { - if (enableProfilerChangedHookIndices && Array.isArray(hooks)) { + if (Array.isArray(hooks)) { changes.push(
• {hookIndicesToString(hooks)}