cleanup[devtools]: remove named hooks & profiler changed hook indices…

… feature flags (#26635) ## Summary Removing `enableNamedHooksFeature`, `enableProfilerChangedHookIndices`, `enableProfilerComponentTree` feature flags, they are the same for all configurations.
facebook · Apr 19, 2023 · b90e8eb · b90e8eb
1 parent a227bcd
commit b90e8eb
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 114 deletions.
diff --git 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<number> {
     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<number> {
-    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<string> {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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">
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {enableNamedHooksFeature &&
-            typeof hookNamesModuleLoader === 'function' &&
+          {typeof hookNamesModuleLoader === 'function' &&
             (!parseHookNames || hookParsingFailed) && (
               <Toggle
                 className={hookParsingFailed ? styles.ToggleError : null}
@@ -225,15 +220,13 @@ function HookView({
   const isCustomHook = subHooks.length > 0;
 
   let name = hook.name;
-  if (enableProfilerChangedHookIndices) {
-    if (hookID !== null) {
-      name = (
-        <>
-          <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
-          {name}
-        </>
-      );
-    }
+  if (hookID !== null) {
+    name = (
+      <>
+        <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
+        {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
@@ -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(_: {}) {
             <ModalDialog />
           </div>
         </div>
-        {isRightColumnVisible && (
-          <div className={styles.RightColumn}>{sidebar}</div>
-        )}
+        <div className={styles.RightColumn}>{sidebar}</div>
         <SettingsModal />
       </div>
     </SettingsModalContextController>

diff --git 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(
         <div key="hooks" className={styles.Item}>
           • {hookIndicesToString(hooks)}