Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

[flags] Delete enableDebugTracing (#31780)

Browse Source 
This is unused, even in the one builds that uses it, and we don't plan
on landing it in this form.
This commit is contained in:
Ricky
2024-12-15 12:16:10 -05:00
committed by GitHub
parent c80b336d23
commit 2d320563f3
28 changed files with 4 additions and 903 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
Vendored
-50
View File
@@ -37,56 +37,6 @@ describe('ReactDOMServerIntegration', () => {
resetModules();
});
// Test pragmas don't support itRenders abstraction
if (
__EXPERIMENTAL__ &&
require('shared/ReactFeatureFlags').enableDebugTracing
) {
describe('React.unstable_DebugTracingMode', () => {
beforeEach(() => {
spyOnDevAndProd(console, 'log');
});
itRenders('with one child', async render => {
const e = await render(
<React.unstable_DebugTracingMode>
<div>text1</div>
</React.unstable_DebugTracingMode>,
);
const parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
});
itRenders('mode with several children', async render => {
const Header = props => {
return <p>header</p>;
};
const Footer = props => {
return (
<React.unstable_DebugTracingMode>
<h2>footer</h2>
<h3>about</h3>
</React.unstable_DebugTracingMode>
);
};
const e = await render(
<React.unstable_DebugTracingMode>
<div>text1</div>
<span>text2</span>
<Header />
<Footer />
</React.unstable_DebugTracingMode>,
);
const parent = e.parentNode;
expect(parent.childNodes[0].tagName).toBe('DIV');
expect(parent.childNodes[1].tagName).toBe('SPAN');
expect(parent.childNodes[2].tagName).toBe('P');
expect(parent.childNodes[3].tagName).toBe('H2');
expect(parent.childNodes[4].tagName).toBe('H3');
});
});
}
describe('React.StrictMode', () => {
itRenders('a strict mode with one child', async render => {
const e = await render(
packages/react-reconciler/src/DebugTracing.js
Vendored
-231
View File
@@ -1,231 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @flow
*/
import type {Lane, Lanes} from './ReactFiberLane';
import type {Wakeable} from 'shared/ReactTypes';
import {enableDebugTracing} from 'shared/ReactFeatureFlags';
const nativeConsole: Object = console;
let nativeConsoleLog: null | Function = null;
const pendingGroupArgs: Array<any> = [];
let printedGroupIndex: number = -1;
function formatLanes(laneOrLanes: Lane | Lanes): string {
return '0b' + (laneOrLanes: any).toString(2).padStart(31, '0');
}
function group(...groupArgs: Array<string>): void {
pendingGroupArgs.push(groupArgs);
if (nativeConsoleLog === null) {
nativeConsoleLog = nativeConsole.log;
nativeConsole.log = log;
}
}
function groupEnd(): void {
pendingGroupArgs.pop();
while (printedGroupIndex >= pendingGroupArgs.length) {
nativeConsole.groupEnd();
printedGroupIndex--;
}
if (pendingGroupArgs.length === 0) {
nativeConsole.log = nativeConsoleLog;
nativeConsoleLog = null;
}
}
function log(...logArgs: Array<mixed>): void {
if (printedGroupIndex < pendingGroupArgs.length - 1) {
for (let i = printedGroupIndex + 1; i < pendingGroupArgs.length; i++) {
const groupArgs = pendingGroupArgs[i];
nativeConsole.group(...groupArgs);
}
printedGroupIndex = pendingGroupArgs.length - 1;
}
if (typeof nativeConsoleLog === 'function') {
nativeConsoleLog(...logArgs);
} else {
nativeConsole.log(...logArgs);
}
}
const REACT_LOGO_STYLE =
'background-color: #20232a; color: #61dafb; padding: 0 2px;';
export function logCommitStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛%c commit%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
);
}
}
}
export function logCommitStopped(): void {
if (__DEV__) {
if (enableDebugTracing) {
groupEnd();
}
}
}
const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
// $FlowFixMe[incompatible-type]: Flow cannot handle polymorphic WeakMaps
const wakeableIDs: WeakMap<Wakeable, number> = new PossiblyWeakMap();
let wakeableID: number = 0;
function getWakeableID(wakeable: Wakeable): number {
if (!wakeableIDs.has(wakeable)) {
wakeableIDs.set(wakeable, wakeableID++);
}
return ((wakeableIDs.get(wakeable): any): number);
}
export function logComponentSuspended(
componentName: string,
wakeable: Wakeable,
): void {
if (__DEV__) {
if (enableDebugTracing) {
const id = getWakeableID(wakeable);
const display = (wakeable: any).displayName || wakeable;
log(
`%c⚛%c ${componentName} suspended`,
REACT_LOGO_STYLE,
'color: #80366d; font-weight: bold;',
id,
display,
);
wakeable.then(
() => {
log(
`%c⚛%c ${componentName} resolved`,
REACT_LOGO_STYLE,
'color: #80366d; font-weight: bold;',
id,
display,
);
},
() => {
log(
`%c⚛%c ${componentName} rejected`,
REACT_LOGO_STYLE,
'color: #80366d; font-weight: bold;',
id,
display,
);
},
);
}
}
}
export function logLayoutEffectsStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛%c layout effects%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
);
}
}
}
export function logLayoutEffectsStopped(): void {
if (__DEV__) {
if (enableDebugTracing) {
groupEnd();
}
}
}
export function logPassiveEffectsStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛%c passive effects%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
);
}
}
}
export function logPassiveEffectsStopped(): void {
if (__DEV__) {
if (enableDebugTracing) {
groupEnd();
}
}
}
export function logRenderStarted(lanes: Lanes): void {
if (__DEV__) {
if (enableDebugTracing) {
group(
`%c⚛%c render%c (${formatLanes(lanes)})`,
REACT_LOGO_STYLE,
'',
'font-weight: normal;',
);
}
}
}
export function logRenderStopped(): void {
if (__DEV__) {
if (enableDebugTracing) {
groupEnd();
}
}
}
export function logForceUpdateScheduled(
componentName: string,
lane: Lane,
): void {
if (__DEV__) {
if (enableDebugTracing) {
log(
`%c⚛%c ${componentName} forced update %c(${formatLanes(lane)})`,
REACT_LOGO_STYLE,
'color: #db2e1f; font-weight: bold;',
'',
);
}
}
}
export function logStateUpdateScheduled(
componentName: string,
lane: Lane,
payloadOrAction: any,
): void {
if (__DEV__) {
if (enableDebugTracing) {
log(
`%c⚛%c ${componentName} updated state %c(${formatLanes(lane)})`,
REACT_LOGO_STYLE,
'color: #01a252; font-weight: bold;',
'',
payloadOrAction,
);
}
}
}
packages/react-reconciler/src/ReactFiber.js
Vendored
-10
View File
@@ -32,7 +32,6 @@ import {
enableScopeAPI,
enableLegacyHidden,
enableTransitionTracing,
enableDebugTracing,
enableDO_NOT_USE_disableStrictPassiveEffect,
enableRenderableContext,
disableLegacyMode,
@@ -80,7 +79,6 @@ import {NoLanes} from './ReactFiberLane';
import {
NoMode,
ConcurrentMode,
DebugTracingMode,
ProfileMode,
StrictLegacyMode,
StrictEffectsMode,
@@ -89,7 +87,6 @@ import {
import {
REACT_FORWARD_REF_TYPE,
REACT_FRAGMENT_TYPE,
REACT_DEBUG_TRACING_MODE_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_PROFILER_TYPE,
REACT_PROVIDER_TYPE,
@@ -630,13 +627,6 @@ export function createFiberFromTypeAndProps(
return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
}
// Fall through
case REACT_DEBUG_TRACING_MODE_TYPE:
if (enableDebugTracing) {
fiberTag = Mode;
mode |= DebugTracingMode;
break;
}
// Fall through
default: {
if (typeof type === 'object' && type !== null) {
switch (type.$$typeof) {
packages/react-reconciler/src/ReactFiberClassComponent.js
Vendored
+1 -35
View File
@@ -20,7 +20,6 @@ import {
import {
debugRenderPhaseSideEffectsForStrictMode,
disableLegacyContext,
enableDebugTracing,
enableSchedulingProfiler,
enableLazyContextPropagation,
disableDefaultPropsExceptForClasses,
@@ -35,12 +34,7 @@ import assign from 'shared/assign';
import isArray from 'shared/isArray';
import {REACT_CONTEXT_TYPE, REACT_CONSUMER_TYPE} from 'shared/ReactSymbols';
import {
DebugTracingMode,
NoMode,
StrictLegacyMode,
StrictEffectsMode,
} from './ReactTypeOfMode';
import {NoMode, StrictLegacyMode, StrictEffectsMode} from './ReactTypeOfMode';
import {
enqueueUpdate,
@@ -65,7 +59,6 @@ import {
} from './ReactFiberContext';
import {readContext, checkIfContextChanged} from './ReactFiberNewContext';
import {requestUpdateLane, scheduleUpdateOnFiber} from './ReactFiberWorkLoop';
import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
import {
markForceUpdateScheduled,
markStateUpdateScheduled,
@@ -199,15 +192,6 @@ const classComponentUpdater = {
entangleTransitions(root, fiber, lane);
}
if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentNameFromFiber(fiber) || 'Unknown';
logStateUpdateScheduled(name, lane, payload);
}
}
}
if (enableSchedulingProfiler) {
markStateUpdateScheduled(fiber, lane);
}
@@ -234,15 +218,6 @@ const classComponentUpdater = {
entangleTransitions(root, fiber, lane);
}
if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentNameFromFiber(fiber) || 'Unknown';
logStateUpdateScheduled(name, lane, payload);
}
}
}
if (enableSchedulingProfiler) {
markStateUpdateScheduled(fiber, lane);
}
@@ -269,15 +244,6 @@ const classComponentUpdater = {
entangleTransitions(root, fiber, lane);
}
if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentNameFromFiber(fiber) || 'Unknown';
logForceUpdateScheduled(name, lane);
}
}
}
if (enableSchedulingProfiler) {
markForceUpdateScheduled(fiber, lane);
}
packages/react-reconciler/src/ReactFiberHooks.js
Vendored
-12
View File
@@ -35,7 +35,6 @@ import {
} from './ReactFiberConfig';
import ReactSharedInternals from 'shared/ReactSharedInternals';
import {
enableDebugTracing,
enableSchedulingProfiler,
enableCache,
enableLazyContextPropagation,
@@ -56,7 +55,6 @@ import {
import {
NoMode,
ConcurrentMode,
DebugTracingMode,
StrictEffectsMode,
StrictLegacyMode,
NoStrictPassiveEffectsMode,
@@ -125,7 +123,6 @@ import {
getIsHydrating,
tryToClaimNextHydratableFormMarkerInstance,
} from './ReactFiberHydrationContext';
import {logStateUpdateScheduled} from './DebugTracing';
import {
markStateUpdateScheduled,
setIsStrictModeForDevtools,
@@ -3928,15 +3925,6 @@ function entangleTransitionUpdate<S, A>(
}
function markUpdateInDevTools<A>(fiber: Fiber, lane: Lane, action: A): void {
if (__DEV__) {
if (enableDebugTracing) {
if (fiber.mode & DebugTracingMode) {
const name = getComponentNameFromFiber(fiber) || 'Unknown';
logStateUpdateScheduled(name, lane, action);
}
}
}
if (enableSchedulingProfiler) {
markStateUpdateScheduled(fiber, lane);
}
packages/react-reconciler/src/ReactFiberThrow.js
Vendored
+1 -12
View File
@@ -37,9 +37,8 @@ import {
ForceClientRender,
ScheduleRetry,
} from './ReactFiberFlags';
import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
import {
enableDebugTracing,
enableLazyContextPropagation,
enableUpdaterTracking,
enablePostpone,
@@ -70,7 +69,6 @@ import {
} from './ReactFiberWorkLoop';
import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext';
import {logUncaughtError, logCaughtError} from './ReactFiberErrorLogger';
import {logComponentSuspended} from './DebugTracing';
import {isDevToolsPresent} from './ReactFiberDevToolsHook';
import {
SyncLane,
@@ -399,15 +397,6 @@ function throwException(
}
}
if (__DEV__) {
if (enableDebugTracing) {
if (sourceFiber.mode & DebugTracingMode) {
const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
logComponentSuspended(name, wakeable);
}
}
}
// Mark the nearest Suspense boundary to switch to rendering a fallback.
const suspenseBoundary = getSuspenseHandler();
if (suspenseBoundary !== null) {
packages/react-reconciler/src/ReactFiberWorkLoop.js
Vendored
-75
View File
@@ -29,7 +29,6 @@ import {
enableProfilerTimer,
enableProfilerCommitHooks,
enableProfilerNestedUpdatePhase,
enableDebugTracing,
enableSchedulingProfiler,
enableUpdaterTracking,
enableCache,
@@ -55,16 +54,6 @@ import {
NormalPriority as NormalSchedulerPriority,
IdlePriority as IdleSchedulerPriority,
} from './Scheduler';
import {
logCommitStarted,
logCommitStopped,
logLayoutEffectsStarted,
logLayoutEffectsStopped,
logPassiveEffectsStarted,
logPassiveEffectsStopped,
logRenderStarted,
logRenderStopped,
} from './DebugTracing';
import {
logBlockingStart,
logTransitionStart,
@@ -2260,12 +2249,6 @@ function renderRootSync(
prepareFreshStack(root, lanes);
}
if (__DEV__) {
if (enableDebugTracing) {
logRenderStarted(lanes);
}
}
if (enableSchedulingProfiler) {
markRenderStarted(lanes);
}
@@ -2360,12 +2343,6 @@ function renderRootSync(
popDispatcher(prevDispatcher);
popAsyncDispatcher(prevAsyncDispatcher);
if (__DEV__) {
if (enableDebugTracing) {
logRenderStopped();
}
}
if (enableSchedulingProfiler) {
markRenderStopped();
}
@@ -2433,12 +2410,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
workInProgressRootIsPrerendering = checkIfRootIsPrerendering(root, lanes);
}
if (__DEV__) {
if (enableDebugTracing) {
logRenderStarted(lanes);
}
}
if (enableSchedulingProfiler) {
markRenderStarted(lanes);
}
@@ -2651,12 +2622,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
popAsyncDispatcher(prevAsyncDispatcher);
executionContext = prevExecutionContext;
if (__DEV__) {
if (enableDebugTracing) {
logRenderStopped();
}
}
// Check if the tree has completed.
if (workInProgress !== null) {
// Still work remaining.
@@ -3223,27 +3188,14 @@ function commitRootImpl(
}
}
if (__DEV__) {
if (enableDebugTracing) {
logCommitStarted(lanes);
}
}
if (enableSchedulingProfiler) {
markCommitStarted(lanes);
}
if (finishedWork === null) {
if (__DEV__) {
if (enableDebugTracing) {
logCommitStopped();
}
}
if (enableSchedulingProfiler) {
markCommitStopped();
}
return null;
} else {
if (__DEV__) {
@@ -3409,21 +3361,10 @@ function commitRootImpl(
// The next phase is the layout phase, where we call effects that read
// the host tree after it's been mutated. The idiomatic use case for this is
// layout, but class component lifecycles also fire here for legacy reasons.
if (__DEV__) {
if (enableDebugTracing) {
logLayoutEffectsStarted(lanes);
}
}
if (enableSchedulingProfiler) {
markLayoutEffectsStarted(lanes);
}
commitLayoutEffects(finishedWork, root, lanes);
if (__DEV__) {
if (enableDebugTracing) {
logLayoutEffectsStopped();
}
}
if (enableSchedulingProfiler) {
markLayoutEffectsStopped();
}
@@ -3589,12 +3530,6 @@ function commitRootImpl(
// If layout work was scheduled, flush it now.
flushSyncWorkOnAllRoots();
if (__DEV__) {
if (enableDebugTracing) {
logCommitStopped();
}
}
if (enableSchedulingProfiler) {
markCommitStopped();
}
@@ -3735,10 +3670,6 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
if (__DEV__) {
isFlushingPassiveEffects = true;
didScheduleUpdateDuringPassiveEffects = false;
if (enableDebugTracing) {
logPassiveEffectsStarted(lanes);
}
}
let passiveEffectStartTime = 0;
@@ -3767,12 +3698,6 @@ function flushPassiveEffectsImpl(wasDelayedCommit: void | boolean) {
pendingPassiveEffectsRenderEndTime,
);
if (__DEV__) {
if (enableDebugTracing) {
logPassiveEffectsStopped();
}
}
if (enableSchedulingProfiler) {
markPassiveEffectsStopped();
}
packages/react-reconciler/src/ReactTypeOfMode.js
Vendored
+2 -2
View File
@@ -12,8 +12,8 @@ export type TypeOfMode = number;
export const NoMode = /* */ 0b0000000;
// TODO: Remove ConcurrentMode by reading from the root tag instead
export const ConcurrentMode = /* */ 0b0000001;
export const ProfileMode = /* */ 0b0000010;
export const DebugTracingMode = /* */ 0b0000100;
export const ProfileMode = /* */ 0b0000010;
//export const DebugTracingMode = /* */ 0b0000100; // Removed
export const StrictLegacyMode = /* */ 0b0001000;
export const StrictEffectsMode = /* */ 0b0010000;
export const NoStrictPassiveEffectsMode = /* */ 0b1000000;
packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
-440
View File
@@ -1,440 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
describe('DebugTracing', () => {
let React;
let ReactNoop;
let waitForPaint;
let waitForAll;
let act;
let logs;
const SYNC_LANE_STRING = '0b0000000000000000000000000000010';
const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
global.IS_REACT_ACT_ENVIRONMENT = true;
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactNoop = require('react-noop-renderer');
const InternalTestUtils = require('internal-test-utils');
waitForPaint = InternalTestUtils.waitForPaint;
waitForAll = InternalTestUtils.waitForAll;
act = InternalTestUtils.act;
logs = [];
const groups = [];
spyOnDevAndProd(console, 'log').mockImplementation(message => {
logs.push(`log: ${message.replace(/%c/g, '')}`);
});
spyOnDevAndProd(console, 'group').mockImplementation(message => {
logs.push(`group: ${message.replace(/%c/g, '')}`);
groups.push(message);
});
spyOnDevAndProd(console, 'groupEnd').mockImplementation(() => {
const message = groups.pop();
logs.push(`groupEnd: ${message.replace(/%c/g, '')}`);
});
});
// @gate enableDebugTracing
it('should not log anything for sync render without suspends or state updates', async () => {
await act(() => {
ReactNoop.render(
<React.unstable_DebugTracingMode>
<div />
</React.unstable_DebugTracingMode>,
);
});
expect(logs).toEqual([]);
});
// @gate experimental && enableDebugTracing
it('should not log anything for concurrent render without suspends or state updates', async () => {
await act(() =>
ReactNoop.render(
<React.unstable_DebugTracingMode>
<div />
</React.unstable_DebugTracingMode>,
),
);
expect(logs).toEqual([]);
});
// @gate experimental && build === 'development' && enableDebugTracing && !disableLegacyMode
it('should log sync render with suspense, legacy', async () => {
let resolveFakeSuspensePromise;
let didResolve = false;
const fakeSuspensePromise = new Promise(resolve => {
resolveFakeSuspensePromise = () => {
didResolve = true;
resolve();
};
});
function Example() {
if (!didResolve) {
throw fakeSuspensePromise;
}
return null;
}
ReactNoop.renderLegacySyncRoot(
<React.unstable_DebugTracingMode>
<React.Suspense fallback={null}>
<Example />
</React.Suspense>
</React.unstable_DebugTracingMode>,
);
expect(logs).toEqual([
`group: ⚛ render (${SYNC_LANE_STRING})`,
'log: ⚛ Example suspended',
`groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
]);
logs.splice(0);
resolveFakeSuspensePromise();
await waitForAll([]);
expect(logs).toEqual(['log: ⚛ Example resolved']);
});
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense && !disableLegacyMode
it('should log sync render with CPU suspense, legacy', async () => {
function Example() {
console.log('<Example/>');
return null;
}
function Wrapper({children}) {
console.log('<Wrapper/>');
return children;
}
ReactNoop.renderLegacySyncRoot(
<React.unstable_DebugTracingMode>
<Wrapper>
<React.Suspense fallback={null} unstable_expectedLoadTime={1}>
<Example />
</React.Suspense>
</Wrapper>
</React.unstable_DebugTracingMode>,
);
expect(logs).toEqual([
`group: ⚛ render (${SYNC_LANE_STRING})`,
'log: <Wrapper/>',
`groupEnd: ⚛ render (${SYNC_LANE_STRING})`,
]);
logs.splice(0);
await waitForPaint([]);
expect(logs).toEqual([
`group: ⚛ render (${RETRY_LANE_STRING})`,
'log: <Example/>',
`groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log concurrent render with suspense', async () => {
let isResolved = false;
let resolveFakeSuspensePromise;
const fakeSuspensePromise = new Promise(resolve => {
resolveFakeSuspensePromise = () => {
resolve();
isResolved = true;
};
});
function Example() {
if (!isResolved) {
throw fakeSuspensePromise;
}
return null;
}
await act(() =>
ReactNoop.render(
<React.unstable_DebugTracingMode>
<React.Suspense fallback={null}>
<Example />
</React.Suspense>
</React.unstable_DebugTracingMode>,
),
);
expect(logs).toEqual([
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
'log: ⚛ Example suspended',
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
...(gate('enableSiblingPrerendering')
? [
`group: ⚛ render (${RETRY_LANE_STRING})`,
'log: ⚛ Example suspended',
`groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
]
: []),
]);
logs.splice(0);
await act(async () => await resolveFakeSuspensePromise());
expect(logs).toEqual([
'log: ⚛ Example resolved',
...(gate('enableSiblingPrerendering')
? ['log: ⚛ Example resolved']
: []),
]);
});
// @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
it('should log concurrent render with CPU suspense', async () => {
function Example() {
console.log('<Example/>');
return null;
}
function Wrapper({children}) {
console.log('<Wrapper/>');
return children;
}
await act(() =>
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Wrapper>
<React.Suspense fallback={null} unstable_expectedLoadTime={1}>
<Example />
</React.Suspense>
</Wrapper>
</React.unstable_DebugTracingMode>,
),
);
expect(logs).toEqual([
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
'log: <Wrapper/>',
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
`group: ⚛ render (${RETRY_LANE_STRING})`,
'log: <Example/>',
`groupEnd: ⚛ render (${RETRY_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log cascading class component updates', async () => {
class Example extends React.Component {
state = {didMount: false};
componentDidMount() {
this.setState({didMount: true});
}
render() {
return null;
}
}
await act(() =>
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>,
),
);
expect(logs).toEqual([
`group: ⚛ commit (${DEFAULT_LANE_STRING})`,
`group: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
`log: ⚛ Example updated state (${SYNC_LANE_STRING})`,
`groupEnd: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛ commit (${DEFAULT_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log render phase state updates for class component', async () => {
class Example extends React.Component {
state = {didRender: false};
render() {
if (this.state.didRender === false) {
this.setState({didRender: true});
}
return null;
}
}
await expect(async () => {
await act(() => {
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>,
);
});
}).toErrorDev(
'Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.',
);
expect(logs).toEqual([
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
`log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log cascading layout updates', async () => {
function Example() {
const [didMount, setDidMount] = React.useState(false);
React.useLayoutEffect(() => {
setDidMount(true);
}, []);
return didMount;
}
await act(() =>
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>,
),
);
expect(logs).toEqual([
`group: ⚛ commit (${DEFAULT_LANE_STRING})`,
`group: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
`log: ⚛ Example updated state (${SYNC_LANE_STRING})`,
`groupEnd: ⚛ layout effects (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛ commit (${DEFAULT_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log cascading passive updates', async () => {
function Example() {
const [didMount, setDidMount] = React.useState(false);
React.useEffect(() => {
setDidMount(true);
}, []);
return didMount;
}
await act(() => {
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>,
);
});
expect(logs).toEqual([
`group: ⚛ passive effects (${DEFAULT_LANE_STRING})`,
`log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛ passive effects (${DEFAULT_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log render phase updates', async () => {
function Example() {
const [didRender, setDidRender] = React.useState(false);
if (!didRender) {
setDidRender(true);
}
return didRender;
}
await act(() => {
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>,
);
});
expect(logs).toEqual([
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
`log: ⚛ Example updated state (${DEFAULT_LANE_STRING})`,
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
]);
});
// @gate experimental && build === 'development' && enableDebugTracing
it('should log when user code logs', async () => {
function Example() {
console.log('Hello from user code');
return null;
}
await act(() =>
ReactNoop.render(
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>,
),
);
expect(logs).toEqual([
`group: ⚛ render (${DEFAULT_LANE_STRING})`,
'log: Hello from user code',
`groupEnd: ⚛ render (${DEFAULT_LANE_STRING})`,
]);
});
// @gate experimental && enableDebugTracing
it('should not log anything outside of a unstable_DebugTracingMode subtree', async () => {
function ExampleThatCascades() {
const [didMount, setDidMount] = React.useState(false);
React.useLayoutEffect(() => {
setDidMount(true);
}, []);
return didMount;
}
const fakeSuspensePromise = {then() {}};
function ExampleThatSuspends() {
throw fakeSuspensePromise;
}
function Example() {
return null;
}
await act(() =>
ReactNoop.render(
<React.Fragment>
<ExampleThatCascades />
<React.Suspense fallback={null}>
<ExampleThatSuspends />
</React.Suspense>
<React.unstable_DebugTracingMode>
<Example />
</React.unstable_DebugTracingMode>
</React.Fragment>,
),
);
expect(logs).toEqual([]);
});
});
packages/react-server/src/ReactFizzServer.js
Vendored
-2
View File
@@ -134,7 +134,6 @@ import {
REACT_LAZY_TYPE,
REACT_SUSPENSE_TYPE,
REACT_LEGACY_HIDDEN_TYPE,
REACT_DEBUG_TRACING_MODE_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_PROFILER_TYPE,
REACT_SUSPENSE_LIST_TYPE,
@@ -2136,7 +2135,6 @@ function renderElement(
// www build. As a migration step, we could add a special prop to Offscreen
// that simulates the old behavior (no hiding, no change to effects).
case REACT_LEGACY_HIDDEN_TYPE:
case REACT_DEBUG_TRACING_MODE_TYPE:
case REACT_STRICT_MODE_TYPE:
case REACT_PROFILER_TYPE:
case REACT_FRAGMENT_TYPE: {
packages/react/index.development.js
-1
View File
@@ -45,7 +45,6 @@ export {
memo,
cache,
startTransition,
unstable_DebugTracingMode,
unstable_LegacyHidden,
unstable_Activity,
unstable_Scope,
packages/react/index.experimental.development.js
-1
View File
@@ -28,7 +28,6 @@ export {
memo,
cache,
startTransition,
unstable_DebugTracingMode,
unstable_Activity,
unstable_postpone,
unstable_getCacheForType,
packages/react/index.experimental.js
-1
View File
@@ -28,7 +28,6 @@ export {
memo,
cache,
startTransition,
unstable_DebugTracingMode,
unstable_Activity,
unstable_postpone,
unstable_getCacheForType,
packages/react/index.fb.js
-1
View File
@@ -33,7 +33,6 @@ export {
StrictMode,
Suspense,
unstable_Activity,
unstable_DebugTracingMode,
unstable_getCacheForType,
unstable_LegacyHidden,
unstable_Scope,
packages/react/index.js
-1
View File
@@ -46,7 +46,6 @@ export {
memo,
cache,
startTransition,
unstable_DebugTracingMode,
unstable_LegacyHidden,
unstable_Activity,
unstable_Scope,
packages/react/src/ReactClient.js
-2
View File
@@ -10,7 +10,6 @@
import ReactVersion from 'shared/ReactVersion';
import {
REACT_FRAGMENT_TYPE,
REACT_DEBUG_TRACING_MODE_TYPE,
REACT_PROFILER_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_TYPE,
@@ -105,7 +104,6 @@ export {
REACT_FRAGMENT_TYPE as Fragment,
REACT_PROFILER_TYPE as Profiler,
REACT_STRICT_MODE_TYPE as StrictMode,
REACT_DEBUG_TRACING_MODE_TYPE as unstable_DebugTracingMode,
REACT_SUSPENSE_TYPE as Suspense,
createElement,
cloneElement,
packages/react/src/ReactServer.experimental.development.js
-2
View File
@@ -15,7 +15,6 @@ import {
REACT_PROFILER_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_TYPE,
REACT_DEBUG_TRACING_MODE_TYPE,
} from 'shared/ReactSymbols';
import {
cloneElement,
@@ -71,7 +70,6 @@ export {
memo,
cache,
startTransition,
REACT_DEBUG_TRACING_MODE_TYPE as unstable_DebugTracingMode,
REACT_SUSPENSE_TYPE as unstable_SuspenseList,
getCacheForType as unstable_getCacheForType,
postpone as unstable_postpone,
packages/react/src/ReactServer.experimental.js
-2
View File
@@ -15,7 +15,6 @@ import {
REACT_PROFILER_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_TYPE,
REACT_DEBUG_TRACING_MODE_TYPE,
} from 'shared/ReactSymbols';
import {
cloneElement,
@@ -70,7 +69,6 @@ export {
memo,
cache,
startTransition,
REACT_DEBUG_TRACING_MODE_TYPE as unstable_DebugTracingMode,
REACT_SUSPENSE_TYPE as unstable_SuspenseList,
getCacheForType as unstable_getCacheForType,
postpone as unstable_postpone,
packages/shared/ReactFeatureFlags.js
-5
View File
@@ -267,11 +267,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
export const enableProfilerNestedUpdatePhase = __PROFILE__;
// Adds verbose console logging for e.g. state updates, suspense, and work loop
// stuff. Intended to enable React core members to more easily debug scheduling
// issues in DEV builds.
export const enableDebugTracing = false;
export const enableAsyncDebugInfo = __EXPERIMENTAL__;
// Track which Fiber(s) schedule render work.
packages/shared/ReactSymbols.js
-3
View File
@@ -33,9 +33,6 @@ export const REACT_SUSPENSE_LIST_TYPE: symbol = Symbol.for(
export const REACT_MEMO_TYPE: symbol = Symbol.for('react.memo');
export const REACT_LAZY_TYPE: symbol = Symbol.for('react.lazy');
export const REACT_SCOPE_TYPE: symbol = Symbol.for('react.scope');
export const REACT_DEBUG_TRACING_MODE_TYPE: symbol = Symbol.for(
'react.debug_trace_mode',
);
export const REACT_OFFSCREEN_TYPE: symbol = Symbol.for('react.offscreen');
export const REACT_LEGACY_HIDDEN_TYPE: symbol = Symbol.for(
'react.legacy_hidden',
packages/shared/forks/ReactFeatureFlags.native-fb.js
-1
View File
@@ -47,7 +47,6 @@ export const enableAsyncIterableChildren = false;
export const enableCache = true;
export const enableCPUSuspense = true;
export const enableCreateEventHandleAPI = false;
export const enableDebugTracing = false;
export const enableDeferRootSchedulingToMicrotask = true;
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
export const enableMoveBefore = true;
packages/shared/forks/ReactFeatureFlags.native-oss.js
-1
View File
@@ -34,7 +34,6 @@ export const enableAsyncIterableChildren = false;
export const enableCache = true;
export const enableCPUSuspense = false;
export const enableCreateEventHandleAPI = false;
export const enableDebugTracing = false;
export const enableDeferRootSchedulingToMicrotask = true;
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
export const enableFabricCompleteRootInCommitPhase = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
-1
View File
@@ -11,7 +11,6 @@ import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
import typeof * as ExportsType from './ReactFeatureFlags.test-renderer';
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableDebugTracing = false;
export const enableAsyncDebugInfo = false;
export const enableSchedulingProfiler = false;
export const enableProfilerTimer = __PROFILE__;
packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js
-1
View File
@@ -26,7 +26,6 @@ export const enableAsyncIterableChildren = false;
export const enableCache = true;
export const enableCPUSuspense = true;
export const enableCreateEventHandleAPI = false;
export const enableDebugTracing = false;
export const enableDeferRootSchedulingToMicrotask = true;
export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
export const enableMoveBefore = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
-1
View File
@@ -11,7 +11,6 @@ import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
import typeof * as ExportsType from './ReactFeatureFlags.test-renderer.www';
export const debugRenderPhaseSideEffectsForStrictMode = false;
export const enableDebugTracing = false;
export const enableAsyncDebugInfo = false;
export const enableSchedulingProfiler = false;
export const enableProfilerTimer = __PROFILE__;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
-6
View File
@@ -32,12 +32,6 @@ export const retryLaneExpirationMs = 5000;
export const syncLaneExpirationMs = 250;
export const transitionLaneExpirationMs = 5000;
// Enable this flag to help with concurrent mode debugging.
// It logs information to the console about React scheduling, rendering, and commit phases.
//
// NOTE: This feature will only work in DEV mode; all callsites are wrapped with __DEV__.
export const enableDebugTracing = __EXPERIMENTAL__;
export const enableSchedulingProfiler = __VARIANT__;
export const enableInfiniteRenderLoopDetection = __VARIANT__;
packages/shared/forks/ReactFeatureFlags.www.js
-1
View File
@@ -19,7 +19,6 @@ export const {
disableDefaultPropsExceptForClasses,
disableLegacyContextForFunctionComponents,
disableSchedulerTimeoutInWorkLoop,
enableDebugTracing,
enableDeferRootSchedulingToMicrotask,
enableDO_NOT_USE_disableStrictPassiveEffect,
enableHiddenSubtreeInsertionEffectCleanup,
packages/shared/isValidElementType.js
-3
View File
@@ -14,7 +14,6 @@ import {
REACT_FORWARD_REF_TYPE,
REACT_FRAGMENT_TYPE,
REACT_PROFILER_TYPE,
REACT_DEBUG_TRACING_MODE_TYPE,
REACT_STRICT_MODE_TYPE,
REACT_SUSPENSE_TYPE,
REACT_SUSPENSE_LIST_TYPE,
@@ -28,7 +27,6 @@ import {
import {
enableScopeAPI,
enableTransitionTracing,
enableDebugTracing,
enableLegacyHidden,
enableRenderableContext,
} from './ReactFeatureFlags';
@@ -46,7 +44,6 @@ export default function isValidElementType(type: mixed): boolean {
if (
type === REACT_FRAGMENT_TYPE ||
type === REACT_PROFILER_TYPE ||
(enableDebugTracing && type === REACT_DEBUG_TRACING_MODE_TYPE) ||
type === REACT_STRICT_MODE_TYPE ||
type === REACT_SUSPENSE_TYPE ||
type === REACT_SUSPENSE_LIST_TYPE ||