diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.js index 25ee5ee70cf..98bad19a8e2 100644 --- a/packages/react-reconciler/src/ReactFiberDevToolsHook.js +++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.js @@ -19,7 +19,6 @@ type DevToolsProfilingHooks = any; import {DidCapture} from './ReactFiberFlags'; import { - consoleManagedByDevToolsDuringStrictMode, enableProfilerTimer, enableSchedulingProfiler, } from 'shared/ReactFeatureFlags'; @@ -38,7 +37,6 @@ import { unstable_setDisableYieldValue, } from './Scheduler'; import {setSuppressWarning} from 'shared/consoleWithStackDev'; -import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev'; declare const __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void; @@ -188,36 +186,25 @@ export function onCommitUnmount(fiber: Fiber) { } export function setIsStrictModeForDevtools(newIsStrictMode: boolean) { - if (consoleManagedByDevToolsDuringStrictMode) { - if (typeof log === 'function') { - // We're in a test because Scheduler.log only exists - // in SchedulerMock. To reduce the noise in strict mode tests, - // suppress warnings and disable scheduler yielding during the double render - unstable_setDisableYieldValue(newIsStrictMode); - setSuppressWarning(newIsStrictMode); - } + if (typeof log === 'function') { + // We're in a test because Scheduler.log only exists + // in SchedulerMock. To reduce the noise in strict mode tests, + // suppress warnings and disable scheduler yielding during the double render + unstable_setDisableYieldValue(newIsStrictMode); + setSuppressWarning(newIsStrictMode); + } - if (injectedHook && typeof injectedHook.setStrictMode === 'function') { - try { - injectedHook.setStrictMode(rendererID, newIsStrictMode); - } catch (err) { - if (__DEV__) { - if (!hasLoggedError) { - hasLoggedError = true; - console.error( - 'React instrumentation encountered an error: %s', - err, - ); - } + if (injectedHook && typeof injectedHook.setStrictMode === 'function') { + try { + injectedHook.setStrictMode(rendererID, newIsStrictMode); + } catch (err) { + if (__DEV__) { + if (!hasLoggedError) { + hasLoggedError = true; + console.error('React instrumentation encountered an error: %s', err); } } } - } else { - if (newIsStrictMode) { - disableLogs(); - } else { - reenableLogs(); - } } } diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js index db60674ba64..863f84ebdb2 100644 --- a/packages/react/src/__tests__/ReactStrictMode-test.js +++ b/packages/react/src/__tests__/ReactStrictMode-test.js @@ -20,8 +20,6 @@ let useState; let useReducer; let assertConsoleErrorDev; -const ReactFeatureFlags = require('shared/ReactFeatureFlags'); - describe('ReactStrictMode', () => { beforeEach(() => { jest.resetModules(); @@ -1111,450 +1109,228 @@ describe('context legacy', () => { console.log.mockRestore(); }); - if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) { - it('does not disable logs for class double render', async () => { - let count = 0; - class Foo extends React.Component { - render() { - count++; - console.log('foo ' + count); - return null; - } + it('does not disable logs for class double render', async () => { + let count = 0; + class Foo extends React.Component { + render() { + count++; + console.log('foo ' + count); + return null; } + } - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); + expect(count).toBe(__DEV__ ? 2 : 1); + expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo 1'); + }); - it('does not disable logs for class double ctor', async () => { - let count = 0; - class Foo extends React.Component { - constructor(props) { - super(props); - count++; - console.log('foo ' + count); - } - render() { - return null; - } + it('does not disable logs for class double ctor', async () => { + let count = 0; + class Foo extends React.Component { + constructor(props) { + super(props); + count++; + console.log('foo ' + count); } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); - }); - - it('does not disable logs for class double getDerivedStateFromProps', async () => { - let count = 0; - class Foo extends React.Component { - state = {}; - static getDerivedStateFromProps() { - count++; - console.log('foo ' + count); - return {}; - } - render() { - return null; - } + render() { + return null; } + } - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); + expect(count).toBe(__DEV__ ? 2 : 1); + expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo 1'); + }); - it('does not disable logs for class double shouldComponentUpdate', async () => { - let count = 0; - class Foo extends React.Component { - state = {}; - shouldComponentUpdate() { - count++; - console.log('foo ' + count); - return {}; - } - render() { - return null; - } + it('does not disable logs for class double getDerivedStateFromProps', async () => { + let count = 0; + class Foo extends React.Component { + state = {}; + static getDerivedStateFromProps() { + count++; + console.log('foo ' + count); + return {}; } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - await act(() => { - root.render( - - - , - ); - }); - - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); - }); - - it('does not disable logs for class state updaters', async () => { - let inst; - let count = 0; - class Foo extends React.Component { - state = {}; - render() { - inst = this; - return null; - } + render() { + return null; } + } - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - await act(() => { - inst.setState(() => { - count++; - console.log('foo ' + count); - return {}; - }); - }); - - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); + expect(count).toBe(__DEV__ ? 2 : 1); + expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo 1'); + }); - it('does not disable logs for function double render', async () => { - let count = 0; - function Foo() { + it('does not disable logs for class double shouldComponentUpdate', async () => { + let count = 0; + class Foo extends React.Component { + state = {}; + shouldComponentUpdate() { count++; console.log('foo ' + count); - return null; + return {}; } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); - }); - - it('does not disable logs for effect double invoke', async () => { - let create = 0; - let cleanup = 0; - function Foo() { - React.useEffect(() => { - create++; - console.log('foo create ' + create); - return () => { - cleanup++; - console.log('foo cleanup ' + cleanup); - }; - }); + render() { return null; } + } - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(create).toBe(__DEV__ ? 2 : 1); - expect(cleanup).toBe(__DEV__ ? 1 : 0); - expect(console.log).toBeCalledTimes(__DEV__ ? 3 : 1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo create 1'); - if (__DEV__) { - expect(console.log).toBeCalledWith('foo cleanup 1'); - } + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); - } else { - it('disable logs for class double render', async () => { - let count = 0; - class Foo extends React.Component { - render() { - count++; - console.log('foo ' + count); - return null; - } - } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); + await act(() => { + root.render( + + + , + ); }); - it('disables logs for class double ctor', async () => { - let count = 0; - class Foo extends React.Component { - constructor(props) { - super(props); - count++; - console.log('foo ' + count); - } - render() { - return null; - } - } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); - }); + expect(count).toBe(__DEV__ ? 2 : 1); + expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo 1'); + }); - it('disable logs for class double getDerivedStateFromProps', async () => { - let count = 0; - class Foo extends React.Component { - state = {}; - static getDerivedStateFromProps() { - count++; - console.log('foo ' + count); - return {}; - } - render() { - return null; - } + it('does not disable logs for class state updaters', async () => { + let inst; + let count = 0; + class Foo extends React.Component { + state = {}; + render() { + inst = this; + return null; } + } - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); - - it('disable logs for class double shouldComponentUpdate', async () => { - let count = 0; - class Foo extends React.Component { - state = {}; - shouldComponentUpdate() { - count++; - console.log('foo ' + count); - return {}; - } - render() { - return null; - } - } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - await act(() => { - root.render( - - - , - ); + await act(() => { + inst.setState(() => { + count++; + console.log('foo ' + count); + return {}; }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); }); - it('disable logs for class state updaters', async () => { - let inst; - let count = 0; - class Foo extends React.Component { - state = {}; - render() { - inst = this; - return null; - } - } + expect(count).toBe(__DEV__ ? 2 : 1); + expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo 1'); + }); - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - await act(() => { - inst.setState(() => { - count++; - console.log('foo ' + count); - return {}; - }); - }); + it('does not disable logs for function double render', async () => { + let count = 0; + function Foo() { + count++; + console.log('foo ' + count); + return null; + } - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); + expect(count).toBe(__DEV__ ? 2 : 1); + expect(console.log).toBeCalledTimes(__DEV__ ? 2 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo 1'); + }); - it('disable logs for function double render', async () => { - let count = 0; - function Foo() { - count++; - console.log('foo ' + count); - return null; - } - - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); + it('does not disable logs for effect double invoke', async () => { + let create = 0; + let cleanup = 0; + function Foo() { + React.useEffect(() => { + create++; + console.log('foo create ' + create); + return () => { + cleanup++; + console.log('foo cleanup ' + cleanup); + }; }); - expect(count).toBe(__DEV__ ? 2 : 1); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo 1'); - }); - - it('disable logs for effect double invoke', async () => { - let create = 0; - let cleanup = 0; - function Foo() { - React.useEffect(() => { - create++; - console.log('foo create ' + create); - return () => { - cleanup++; - console.log('foo cleanup ' + cleanup); - }; - }); - return null; - } + return null; + } - const container = document.createElement('div'); - const root = ReactDOMClient.createRoot(container); - await act(() => { - root.render( - - - , - ); - }); - expect(create).toBe(__DEV__ ? 2 : 1); - expect(cleanup).toBe(__DEV__ ? 1 : 0); - expect(console.log).toBeCalledTimes(1); - // Note: we should display the first log because otherwise - // there is a risk of suppressing warnings when they happen, - // and on the next render they'd get deduplicated and ignored. - expect(console.log).toBeCalledWith('foo create 1'); + const container = document.createElement('div'); + const root = ReactDOMClient.createRoot(container); + await act(() => { + root.render( + + + , + ); }); - } + expect(create).toBe(__DEV__ ? 2 : 1); + expect(cleanup).toBe(__DEV__ ? 1 : 0); + expect(console.log).toBeCalledTimes(__DEV__ ? 3 : 1); + // Note: we should display the first log because otherwise + // there is a risk of suppressing warnings when they happen, + // and on the next render they'd get deduplicated and ignored. + expect(console.log).toBeCalledWith('foo create 1'); + if (__DEV__) { + expect(console.log).toBeCalledWith('foo cleanup 1'); + } + }); }); }); diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 6ccf1ce8dd8..f8aadb97894 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -297,6 +297,4 @@ export const enableUpdaterTracking = __PROFILE__; // Internal only. export const enableGetInspectorDataForInstanceInProduction = false; -export const consoleManagedByDevToolsDuringStrictMode = true; - export const enableDO_NOT_USE_disableStrictPassiveEffect = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 850249b8f79..37991d4c8ff 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -32,7 +32,6 @@ export const { } = dynamicFlags; // The rest of the flags are static for better dead code elimination. -export const consoleManagedByDevToolsDuringStrictMode = true; export const debugRenderPhaseSideEffectsForStrictMode = __DEV__; export const disableClientCache = true; export const disableCommentsAsDOMContainers = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 419cee942a9..eb40dc91237 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -20,7 +20,6 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__; // All other flags // ----------------------------------------------------------------------------- export const alwaysThrottleRetries = false; -export const consoleManagedByDevToolsDuringStrictMode = true; export const disableClientCache = true; export const disableCommentsAsDOMContainers = true; export const disableDefaultPropsExceptForClasses = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index c591794c20e..6673d056d9a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -61,8 +61,6 @@ export const enableLazyContextPropagation = true; export const enableContextProfiling = false; export const enableLegacyHidden = false; -export const consoleManagedByDevToolsDuringStrictMode = false; - export const enableTransitionTracing = false; export const useModernStrictMode = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 7eef951628b..3ac86950277 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -11,7 +11,6 @@ import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags'; import typeof * as ExportsType from './ReactFeatureFlags.test-renderer'; export const alwaysThrottleRetries = false; -export const consoleManagedByDevToolsDuringStrictMode = false; export const debugRenderPhaseSideEffectsForStrictMode = false; export const disableClientCache = true; export const disableCommentsAsDOMContainers = true; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index 2ca5c62988a..8ebb4d0dbf8 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -63,8 +63,6 @@ export const enableLazyContextPropagation = true; export const enableContextProfiling = false; export const enableLegacyHidden = false; -export const consoleManagedByDevToolsDuringStrictMode = false; - export const enableTransitionTracing = false; export const useModernStrictMode = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 40e996b571a..7a5761932c8 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -106,8 +106,6 @@ export const enableComponentStackLocations = true; export const disableTextareaChildren = __EXPERIMENTAL__; -export const consoleManagedByDevToolsDuringStrictMode = true; - export const enableFizzExternalRuntime = true; export const passChildrenWhenCloningPersistedNodes = false;