Add enableComponentPerformanceTrack Flag (#30960)
This flag will be used to gate a new timeline profiler that's integrate with the Performance Tab and the new performance.measure extensions in Chrome. It replaces the existing DevTools feature so this disables enableSchedulingProfiler when it is enabled since they can interplay in weird ways potentially. This means that experimental React now disable scheduling profiler and enables this new approach.
Sebastian Markbåge committed
Sep 16, 2024 at 11:09 UTC
0eab377a96099f0121009c8968c49d13d4e00bd1
9 files changed
+52
-15
packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+14
-4
@@ -18,6 +18,11 @@ import {
18
import {ReactVersion} from '../../../../ReactVersions';
19
import semver from 'semver';
20
21
+let React = require('react');
22
+let Scheduler;
23
+let store;
24
+let utils;
25
+
26
// TODO: This is how other DevTools tests access the version but we should find
27
// a better solution for this
28
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
@@ -26,11 +31,16 @@ const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
31
const enableSiblingPrerendering =
32
false && semver.gte(ReactVersionTestingAgainst, '19.0.0');
33
34
+// This flag is on experimental which disables timeline profiler.
35
+const enableComponentPerformanceTrack =
36
+ React.version.startsWith('19') && React.version.includes('experimental');
37
+
38
describe('Timeline profiler', () => {
30
- let React;
31
- let Scheduler;
32
- let store;
33
- let utils;
39
+ if (enableComponentPerformanceTrack) {
40
+ test('no tests', () => {});
41
+ // Ignore all tests.
42
+ return;
43
+ }
44
45
beforeEach(() => {
46
utils = require('./utils');
packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+20
-7
@@ -16,16 +16,29 @@ import {ReactVersion} from '../../../../ReactVersions';
16
17
const ReactVersionTestingAgainst = process.env.REACT_VERSION || ReactVersion;
18
19
+let React = require('react');
20
+let ReactDOM;
21
+let ReactDOMClient;
22
+let Scheduler;
23
+let utils;
24
+let assertLog;
25
+let waitFor;
26
+
27
+// This flag is on experimental which disables timeline profiler.
28
+const enableComponentPerformanceTrack =
29
+ React.version.startsWith('19') && React.version.includes('experimental');
30
+
31
describe('Timeline profiler', () => {
20
- let React;
21
- let ReactDOM;
22
- let ReactDOMClient;
23
- let Scheduler;
24
- let utils;
25
- let assertLog;
26
- let waitFor;
32
+ if (enableComponentPerformanceTrack) {
33
+ test('no tests', () => {});
34
+ // Ignore all tests.
35
+ return;
36
+ }
37
38
describe('User Timing API', () => {
39
+ if (enableComponentPerformanceTrack) {
40
+ return;
41
+ }
42
let currentlyNotClearedMarks;
43
let registeredMarks;
44
let featureDetectionMarkName = null;
packages/shared/ReactFeatureFlags.js
+11
-4
@@ -260,10 +260,6 @@ export const disableTextareaChildren = false;
260
// Debugging and DevTools
261
// -----------------------------------------------------------------------------
262
263
-// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
264
-// for an experimental timeline tool.
265
-export const enableSchedulingProfiler = __PROFILE__;
266
-
263
// Helps identify side effects in render-phase lifecycle hooks and setState
264
// reducers by double invoking them in StrictLegacyMode.
265
export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
@@ -271,6 +267,17 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
267
// Gather advanced timing metrics for Profiler subtrees.
268
export const enableProfilerTimer = __PROFILE__;
269
270
+// Adds performance.measure() marks using Chrome extensions to allow formatted
271
+// Component rendering tracks to show up in the Performance tab.
272
+// This flag will be used for both Server Component and Client Component tracks.
273
+// All calls should also be gated on enableProfilerTimer.
274
+export const enableComponentPerformanceTrack = __EXPERIMENTAL__;
275
+
276
+// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
277
+// for an experimental timeline tool.
278
+export const enableSchedulingProfiler: boolean =
279
+ !enableComponentPerformanceTrack && __PROFILE__;
280
+
281
// Record durations for commit and passive effects phases.
282
export const enableProfilerCommitHooks = __PROFILE__;
283
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -77,6 +77,7 @@ export const enableRefAsProp = true;
77
export const enableRenderableContext = true;
78
export const enableRetryLaneExpiration = false;
79
export const enableSchedulingProfiler = __PROFILE__;
80
+export const enableComponentPerformanceTrack = false;
81
export const enableScopeAPI = false;
82
export const enableServerComponentLogs = true;
83
export const enableSuspenseAvoidThisFallback = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -67,6 +67,7 @@ export const enableRefAsProp = true;
67
export const enableRenderableContext = true;
68
export const enableRetryLaneExpiration = false;
69
export const enableSchedulingProfiler = __PROFILE__;
70
+export const enableComponentPerformanceTrack = false;
71
export const enableScopeAPI = false;
72
export const enableServerComponentLogs = true;
73
export const enableShallowPropDiffing = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -17,6 +17,7 @@ export const enableSchedulingProfiler = false;
17
export const enableProfilerTimer = __PROFILE__;
18
export const enableProfilerCommitHooks = __PROFILE__;
19
export const enableProfilerNestedUpdatePhase = __PROFILE__;
20
+export const enableComponentPerformanceTrack = false;
21
export const enableUpdaterTracking = false;
22
export const enableCache = true;
23
export const enableLegacyCache = __EXPERIMENTAL__;
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
+1
@@ -61,6 +61,7 @@ export const enableRefAsProp = true;
61
export const enableRenderableContext = true;
62
export const enableRetryLaneExpiration = false;
63
export const enableSchedulingProfiler = __PROFILE__;
64
+export const enableComponentPerformanceTrack = false;
65
export const enableScopeAPI = false;
66
export const enableServerComponentLogs = true;
67
export const enableShallowPropDiffing = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -17,6 +17,7 @@ export const enableSchedulingProfiler = false;
17
export const enableProfilerTimer = __PROFILE__;
18
export const enableProfilerCommitHooks = __PROFILE__;
19
export const enableProfilerNestedUpdatePhase = __PROFILE__;
20
+export const enableComponentPerformanceTrack = false;
21
export const enableUpdaterTracking = false;
22
export const enableCache = true;
23
export const enableLegacyCache = true;
packages/shared/forks/ReactFeatureFlags.www.js
+2
@@ -62,6 +62,8 @@ export const disableInputAttributeSyncing = false;
62
export const enableLegacyFBSupport = true;
63
export const enableLazyContextPropagation = true;
64
65
+export const enableComponentPerformanceTrack = false;
66
+
67
// Logs additional User Timing API marks for use with an experimental profiling tool.
68
export const enableSchedulingProfiler: boolean =
69
__PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler;