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.
Ruslan Lesiutin committed
Apr 19, 2023 at 10:05 UTC
b90e8ebaa5b692bcee4198eacb56f9123b62dd10
10 files changed
+44
-114
packages/react-devtools-shared/src/backend/renderer.js
+16
-55
@@ -92,10 +92,7 @@ import {
92
SERVER_CONTEXT_SYMBOL_STRING,
93
} from './ReactSymbols';
94
import {format} from './utils';
95
-import {
96
- enableProfilerChangedHookIndices,
97
- enableStyleXFeatures,
98
-} from 'react-devtools-feature-flags';
95
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
96
import is from 'shared/objectIs';
97
import hasOwnProperty from 'shared/hasOwnProperty';
98
import {getStyleXData} from './StyleX/utils';
@@ -1265,19 +1262,12 @@ export function attach(
1262
};
1263
1264
// Only traverse the hooks list once, depending on what info we're returning.
1268
- if (enableProfilerChangedHookIndices) {
1269
- const indices = getChangedHooksIndices(
1270
- prevFiber.memoizedState,
1271
- nextFiber.memoizedState,
1272
- );
1273
- data.hooks = indices;
1274
- data.didHooksChange = indices !== null && indices.length > 0;
1275
- } else {
1276
- data.didHooksChange = didHooksChange(
1277
- prevFiber.memoizedState,
1278
- nextFiber.memoizedState,
1279
- );
1280
- }
1265
+ const indices = getChangedHooksIndices(
1266
+ prevFiber.memoizedState,
1267
+ nextFiber.memoizedState,
1268
+ );
1269
+ data.hooks = indices;
1270
+ data.didHooksChange = indices !== null && indices.length > 0;
1271
1272
return data;
1273
}
@@ -1458,12 +1448,13 @@ export function attach(
1448
return false;
1449
}
1450
1461
- function didHooksChange(prev: any, next: any): boolean {
1451
+ function getChangedHooksIndices(prev: any, next: any): null | Array<number> {
1452
if (prev == null || next == null) {
1463
- return false;
1453
+ return null;
1454
}
1455
1466
- // We can't report anything meaningful for hooks changes.
1456
+ const indices = [];
1457
+ let index = 0;
1458
if (
1459
next.hasOwnProperty('baseState') &&
1460
next.hasOwnProperty('memoizedState') &&
@@ -1472,45 +1463,15 @@ export function attach(
1463
) {
1464
while (next !== null) {
1465
if (didStatefulHookChange(prev, next)) {
1475
- return true;
1476
- } else {
1477
- next = next.next;
1478
- prev = prev.next;
1466
+ indices.push(index);
1467
}
1468
+ next = next.next;
1469
+ prev = prev.next;
1470
+ index++;
1471
}
1472
}
1473
1483
- return false;
1484
- }
1485
-
1486
- function getChangedHooksIndices(prev: any, next: any): null | Array<number> {
1487
- if (enableProfilerChangedHookIndices) {
1488
- if (prev == null || next == null) {
1489
- return null;
1490
- }
1491
-
1492
- const indices = [];
1493
- let index = 0;
1494
- if (
1495
- next.hasOwnProperty('baseState') &&
1496
- next.hasOwnProperty('memoizedState') &&
1497
- next.hasOwnProperty('next') &&
1498
- next.hasOwnProperty('queue')
1499
- ) {
1500
- while (next !== null) {
1501
- if (didStatefulHookChange(prev, next)) {
1502
- indices.push(index);
1503
- }
1504
- next = next.next;
1505
- prev = prev.next;
1506
- index++;
1507
- }
1508
- }
1509
-
1510
- return indices;
1511
- }
1512
-
1513
- return null;
1474
+ return indices;
1475
}
1476
1477
function getChangedKeys(prev: any, next: any): null | Array<string> {
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
-3
@@ -15,11 +15,8 @@
15
16
export const consoleManagedByDevToolsDuringStrictMode = false;
17
export const enableLogger = true;
18
-export const enableNamedHooksFeature = true;
19
-export const enableProfilerChangedHookIndices = true;
18
export const enableStyleXFeatures = true;
19
export const isInternalFacebookBuild = true;
22
-export const enableProfilerComponentTree = true;
20
21
/************************************************************************
22
* Do not edit the code below.
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
-3
@@ -15,11 +15,8 @@
15
16
export const consoleManagedByDevToolsDuringStrictMode = false;
17
export const enableLogger = false;
18
-export const enableNamedHooksFeature = true;
19
-export const enableProfilerChangedHookIndices = true;
18
export const enableStyleXFeatures = false;
19
export const isInternalFacebookBuild = false;
22
-export const enableProfilerComponentTree = true;
20
21
/************************************************************************
22
* Do not edit the code below.
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
-3
@@ -15,8 +15,5 @@
15
16
export const consoleManagedByDevToolsDuringStrictMode = true;
17
export const enableLogger = false;
18
-export const enableNamedHooksFeature = true;
19
-export const enableProfilerChangedHookIndices = true;
18
export const enableStyleXFeatures = false;
19
export const isInternalFacebookBuild = false;
22
-export const enableProfilerComponentTree = true;
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
-3
@@ -15,11 +15,8 @@
15
16
export const consoleManagedByDevToolsDuringStrictMode = true;
17
export const enableLogger = true;
18
-export const enableNamedHooksFeature = true;
19
-export const enableProfilerChangedHookIndices = true;
18
export const enableStyleXFeatures = true;
19
export const isInternalFacebookBuild = true;
22
-export const enableProfilerComponentTree = true;
20
21
/************************************************************************
22
* Do not edit the code below.
packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
-3
@@ -15,11 +15,8 @@
15
16
export const consoleManagedByDevToolsDuringStrictMode = true;
17
export const enableLogger = false;
18
-export const enableNamedHooksFeature = true;
19
-export const enableProfilerChangedHookIndices = true;
18
export const enableStyleXFeatures = false;
19
export const isInternalFacebookBuild = false;
22
-export const enableProfilerComponentTree = true;
20
21
/************************************************************************
22
* Do not edit the code below.
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+18
-21
@@ -36,7 +36,6 @@ import {loadModule} from 'react-devtools-shared/src/dynamicImportCache';
36
import FetchFileWithCachingContext from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
37
import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
38
import {SettingsContext} from '../Settings/SettingsContext';
39
-import {enableNamedHooksFeature} from 'react-devtools-feature-flags';
39
40
import type {HookNames} from 'react-devtools-shared/src/types';
41
import type {ReactNodeList} from 'shared/ReactTypes';
@@ -128,28 +127,26 @@ export function InspectedElementContextController({
127
if (!elementHasChanged && element !== null) {
128
inspectedElement = inspectElement(element, state.path, store, bridge);
129
131
- if (enableNamedHooksFeature) {
132
- if (typeof hookNamesModuleLoader === 'function') {
133
- if (parseHookNames || alreadyLoadedHookNames) {
134
- const hookNamesModule = loadModule(hookNamesModuleLoader);
135
- if (hookNamesModule !== null) {
136
- const {parseHookNames: loadHookNamesFunction, purgeCachedMetadata} =
137
- hookNamesModule;
130
+ if (typeof hookNamesModuleLoader === 'function') {
131
+ if (parseHookNames || alreadyLoadedHookNames) {
132
+ const hookNamesModule = loadModule(hookNamesModuleLoader);
133
+ if (hookNamesModule !== null) {
134
+ const {parseHookNames: loadHookNamesFunction, purgeCachedMetadata} =
135
+ hookNamesModule;
136
139
- purgeCachedMetadataRef.current = purgeCachedMetadata;
137
+ purgeCachedMetadataRef.current = purgeCachedMetadata;
138
141
- if (
142
- inspectedElement !== null &&
143
- inspectedElement.hooks !== null &&
144
- loadHookNamesFunction !== null
145
- ) {
146
- hookNames = loadHookNames(
147
- element,
148
- inspectedElement.hooks,
149
- loadHookNamesFunction,
150
- fetchFileWithCaching,
151
- );
152
- }
139
+ if (
140
+ inspectedElement !== null &&
141
+ inspectedElement.hooks !== null &&
142
+ loadHookNamesFunction !== null
143
+ ) {
144
+ hookNames = loadHookNames(
145
+ element,
146
+ inspectedElement.hooks,
147
+ loadHookNamesFunction,
148
+ fetchFileWithCaching,
149
+ );
150
}
151
}
152
}
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+8
-15
@@ -22,10 +22,6 @@ import styles from './InspectedElementHooksTree.css';
22
import useContextMenu from '../../ContextMenu/useContextMenu';
23
import {meta} from '../../../hydration';
24
import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
25
-import {
26
- enableNamedHooksFeature,
27
- enableProfilerChangedHookIndices,
28
-} from 'react-devtools-feature-flags';
25
import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
26
import isArray from 'react-devtools-shared/src/isArray';
27
@@ -90,8 +86,7 @@ export function InspectedElementHooksTree({
86
data-testname="InspectedElementHooksTree">
87
<div className={styles.HeaderRow}>
88
<div className={styles.Header}>hooks</div>
93
- {enableNamedHooksFeature &&
94
- typeof hookNamesModuleLoader === 'function' &&
89
+ {typeof hookNamesModuleLoader === 'function' &&
90
(!parseHookNames || hookParsingFailed) && (
91
<Toggle
92
className={hookParsingFailed ? styles.ToggleError : null}
@@ -225,15 +220,13 @@ function HookView({
220
const isCustomHook = subHooks.length > 0;
221
222
let name = hook.name;
228
- if (enableProfilerChangedHookIndices) {
229
- if (hookID !== null) {
230
- name = (
231
- <>
232
- <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
233
- {name}
234
- </>
235
- );
236
- }
223
+ if (hookID !== null) {
224
+ name = (
225
+ <>
226
+ <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
227
+ {name}
228
+ </>
229
+ );
230
}
231
232
const type = typeof value;
packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+1
-6
@@ -34,7 +34,6 @@ import {SettingsModalContextController} from 'react-devtools-shared/src/devtools
34
import portaledContent from '../portaledContent';
35
import {StoreContext} from '../context';
36
import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
37
-import {enableProfilerComponentTree} from 'react-devtools-feature-flags';
37
38
import styles from './Profiler.css';
39
@@ -56,8 +55,6 @@ function Profiler(_: {}) {
55
const {supportsTimeline} = useContext(StoreContext);
56
57
const isLegacyProfilerSelected = selectedTabID !== 'timeline';
59
- const isRightColumnVisible =
60
- isLegacyProfilerSelected || enableProfilerComponentTree;
58
59
let view = null;
60
if (didRecordCommits || selectedTabID === 'timeline') {
@@ -151,9 +148,7 @@ function Profiler(_: {}) {
148
<ModalDialog />
149
</div>
150
</div>
154
- {isRightColumnVisible && (
155
- <div className={styles.RightColumn}>{sidebar}</div>
156
- )}
151
+ <div className={styles.RightColumn}>{sidebar}</div>
152
<SettingsModal />
153
</div>
154
</SettingsModalContextController>
packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
+1
-2
@@ -9,7 +9,6 @@
9
10
import * as React from 'react';
11
import {useContext} from 'react';
12
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
12
import {ProfilerContext} from '../Profiler/ProfilerContext';
13
import {StoreContext} from '../context';
14
@@ -103,7 +102,7 @@ export default function WhatChanged({fiberID}: Props): React.Node {
102
}
103
104
if (didHooksChange) {
106
- if (enableProfilerChangedHookIndices && Array.isArray(hooks)) {
105
+ if (Array.isArray(hooks)) {
106
changes.push(
107
<div key="hooks" className={styles.Item}>
108
• {hookIndicesToString(hooks)}