diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js index 8967ea68c913f..47c8a0aaa8322 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js @@ -9,7 +9,6 @@ import * as React from 'react'; import {useContext, useMemo, useRef, useState} from 'react'; -import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import {copy} from 'clipboard-js'; import { BridgeContext, @@ -178,10 +177,8 @@ function Row({ validAttributes === null || validAttributes.indexOf(newAttribute) >= 0; - batchedUpdates(() => { - setLocalAttribute(newAttribute); - setIsAttributeValid(isValid); - }); + setLocalAttribute(newAttribute); + setIsAttributeValid(isValid); }; // $FlowFixMe[missing-local-annot] @@ -192,10 +189,8 @@ function Row({ isValid = true; } catch (error) {} - batchedUpdates(() => { - setLocalValue(newValue); - setIsValueValid(isValid); - }); + setLocalValue(newValue); + setIsValueValid(isValid); }; const resetAttribute = () => { diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js index 7170864ab35fe..85905666cb33a 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js @@ -18,7 +18,6 @@ import { useMemo, useState, } from 'react'; -import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import {createResource} from 'react-devtools-shared/src/devtools/cache'; import { BridgeContext, @@ -120,10 +119,8 @@ function NativeStyleContextController({children}: Props): React.Node { const request = inProgressRequests.get(element); if (request != null) { inProgressRequests.delete(element); - batchedUpdates(() => { - request.resolveFn(styleAndLayout); - setCurrentStyleAndLayout(styleAndLayout); - }); + request.resolveFn(styleAndLayout); + setCurrentStyleAndLayout(styleAndLayout); } else { resource.write(element, styleAndLayout); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js index 38203175136b0..a9225c3c8fef1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js @@ -11,7 +11,6 @@ import type {ReactContext} from 'shared/ReactTypes'; import * as React from 'react'; import {createContext, useCallback, useContext, useMemo, useState} from 'react'; -import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import {useLocalStorage, useSubscription} from '../hooks'; import { TreeDispatcherContext, @@ -166,31 +165,28 @@ function ProfilerContextController({children}: Props): React.Node { ); if (prevProfilingData !== profilingData) { - batchedUpdates(() => { - setPrevProfilingData(profilingData); - - const dataForRoots = - profilingData !== null ? profilingData.dataForRoots : null; - if (dataForRoots != null) { - const firstRootID = dataForRoots.keys().next().value || null; - - if (rootID === null || !dataForRoots.has(rootID)) { - let selectedElementRootID = null; - if (inspectedElementID !== null) { - selectedElementRootID = - store.getRootIDForElement(inspectedElementID); - } - if ( - selectedElementRootID !== null && - dataForRoots.has(selectedElementRootID) - ) { - setRootIDAndClearFiber(selectedElementRootID); - } else { - setRootIDAndClearFiber(firstRootID); - } + setPrevProfilingData(profilingData); + + const dataForRoots = + profilingData !== null ? profilingData.dataForRoots : null; + if (dataForRoots != null) { + const firstRootID = dataForRoots.keys().next().value || null; + + if (rootID === null || !dataForRoots.has(rootID)) { + let selectedElementRootID = null; + if (inspectedElementID !== null) { + selectedElementRootID = store.getRootIDForElement(inspectedElementID); + } + if ( + selectedElementRootID !== null && + dataForRoots.has(selectedElementRootID) + ) { + setRootIDAndClearFiber(selectedElementRootID); + } else { + setRootIDAndClearFiber(firstRootID); } } - }); + } } const [isCommitFilterEnabled, setIsCommitFilterEnabled] = @@ -229,15 +225,13 @@ function ProfilerContextController({children}: Props): React.Node { ); if (isProfiling) { - batchedUpdates(() => { - if (selectedCommitIndex !== null) { - selectCommitIndex(null); - } - if (selectedFiberID !== null) { - selectFiberID(null); - selectFiberName(null); - } - }); + if (selectedCommitIndex !== null) { + selectCommitIndex(null); + } + if (selectedFiberID !== null) { + selectFiberID(null); + selectFiberName(null); + } } const value = useMemo( diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js index 7f2421893003c..717019df431a1 100644 --- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js +++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js @@ -9,7 +9,6 @@ import * as React from 'react'; import {Fragment, useContext, useEffect, useState} from 'react'; -import {unstable_batchedUpdates as batchedUpdates} from 'react-dom'; import {ModalDialogContext} from './ModalDialog'; import {StoreContext} from './context'; import {UNSUPPORTED_VERSION_URL} from '../constants'; @@ -26,14 +25,12 @@ export default function UnsupportedVersionDialog(_: {}): null { useEffect(() => { if (state === 'dialog-not-shown') { const showDialog = () => { - batchedUpdates(() => { - setState('show-dialog'); - dispatch({ - canBeDismissed: true, - id: 'UnsupportedVersionDialog', - type: 'SHOW', - content: , - }); + setState('show-dialog'); + dispatch({ + canBeDismissed: true, + id: 'UnsupportedVersionDialog', + type: 'SHOW', + content: , }); }; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index bc1ae542fa6e1..6a77c29ff32e2 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -261,3 +261,5 @@ export const enableUpdaterTracking = __PROFILE__; // Internal only. export const enableDO_NOT_USE_disableStrictPassiveEffect = false; + +export const enableRemoveConsolePatches = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js index fc9bed7cc056f..b6e3b098dbb40 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js @@ -27,3 +27,4 @@ export const enableFabricCompleteRootInCommitPhase = __VARIANT__; export const enableSiblingPrerendering = __VARIANT__; export const enableUseResourceEffectHook = __VARIANT__; export const enableOwnerStacks = __VARIANT__; +export const enableRemoveConsolePatches = __VARIANT__; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 7a01d9c9281db..c1d23e898ca83 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -29,6 +29,7 @@ export const { passChildrenWhenCloningPersistedNodes, enableSiblingPrerendering, enableOwnerStacks, + enableRemoveConsolePatches, } = dynamicFlags; // The rest of the flags are static for better dead code elimination. diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 26e05087c61db..afe18430eba9d 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -78,6 +78,7 @@ export const enableProfilerTimer = __PROFILE__; export const enableProfilerCommitHooks = __PROFILE__; export const enableProfilerNestedUpdatePhase = __PROFILE__; export const enableUpdaterTracking = __PROFILE__; +export const enableRemoveConsolePatches = false; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 7e11aceaf7806..5b4c33f331231 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -88,6 +88,7 @@ export const disableDefaultPropsExceptForClasses = true; export const enableObjectFiber = false; export const enableOwnerStacks = false; +export const enableRemoveConsolePatches = true; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 72731529b17a3..ebc8c5eb97796 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -68,6 +68,7 @@ export const enableHydrationLaneScheduling = true; export const enableYieldingBeforePassive = false; export const enableThrottledScheduling = false; export const enableViewTransition = false; +export const enableRemoveConsolePatches = false; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index bfd3316019bde..c7c0e627305f0 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -83,6 +83,7 @@ export const enableYieldingBeforePassive = false; export const enableThrottledScheduling = false; export const enableViewTransition = false; +export const enableRemoveConsolePatches = false; // Flow magic to verify the exports of this file match the original version. ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js index 6c99d5e278df4..b75a0a91756e1 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js @@ -37,6 +37,7 @@ export const enableInfiniteRenderLoopDetection = __VARIANT__; export const enableSiblingPrerendering = __VARIANT__; export const enableUseResourceEffectHook = __VARIANT__; +export const enableRemoveConsolePatches = __VARIANT__; // TODO: These flags are hard-coded to the default values used in open source. // Update the tests so that they pass in either mode, then set these diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index b317fca356c92..58a7bcd26f9d6 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -36,6 +36,7 @@ export const { syncLaneExpirationMs, transitionLaneExpirationMs, enableOwnerStacks, + enableRemoveConsolePatches, } = dynamicFeatureFlags; // On WWW, __EXPERIMENTAL__ is used for a new modern build. diff --git a/packages/shared/forks/consoleWithStackDev.rn.js b/packages/shared/forks/consoleWithStackDev.rn.js index 6ac30b39fb384..ec02866061c47 100644 --- a/packages/shared/forks/consoleWithStackDev.rn.js +++ b/packages/shared/forks/consoleWithStackDev.rn.js @@ -6,9 +6,15 @@ */ import ReactSharedInternals from 'shared/ReactSharedInternals'; +import * as dynamicFlagsUntyped from 'ReactNativeInternalFeatureFlags'; +const enableRemoveConsolePatches = + dynamicFlagsUntyped && dynamicFlagsUntyped.enableRemoveConsolePatches; let suppressWarning = false; export function setSuppressWarning(newSuppressWarning) { + if (enableRemoveConsolePatches) { + return; + } if (__DEV__) { suppressWarning = newSuppressWarning; } @@ -21,7 +27,11 @@ export function setSuppressWarning(newSuppressWarning) { // they are left as they are instead. export function warn(format, ...args) { - if (__DEV__) { + if (enableRemoveConsolePatches) { + if (__DEV__) { + console['warn'](format, ...args); + } + } else if (__DEV__) { if (!suppressWarning) { printWarning('warn', format, args); } @@ -29,7 +39,11 @@ export function warn(format, ...args) { } export function error(format, ...args) { - if (__DEV__) { + if (enableRemoveConsolePatches) { + if (__DEV__) { + console['error'](format, ...args); + } + } else if (__DEV__) { if (!suppressWarning) { printWarning('error', format, args); } @@ -37,6 +51,9 @@ export function error(format, ...args) { } function printWarning(level, format, args) { + if (enableRemoveConsolePatches) { + return; + } if (__DEV__) { if (ReactSharedInternals.getCurrentStack) { const stack = ReactSharedInternals.getCurrentStack(); diff --git a/packages/shared/forks/consoleWithStackDev.www.js b/packages/shared/forks/consoleWithStackDev.www.js index c4311efe09f2a..84c5d186e4a8e 100644 --- a/packages/shared/forks/consoleWithStackDev.www.js +++ b/packages/shared/forks/consoleWithStackDev.www.js @@ -5,18 +5,27 @@ * LICENSE file in the root directory of this source tree. */ +const {enableRemoveConsolePatches} = require('ReactFeatureFlags'); + // This refers to a WWW module. const warningWWW = require('warning'); let suppressWarning = false; export function setSuppressWarning(newSuppressWarning) { + if (enableRemoveConsolePatches) { + return; + } if (__DEV__) { suppressWarning = newSuppressWarning; } } export function warn(format, ...args) { - if (__DEV__) { + if (enableRemoveConsolePatches) { + if (__DEV__) { + console['warn'](format, ...args); + } + } else if (__DEV__) { if (!suppressWarning) { printWarning('warn', format, args); } @@ -24,7 +33,11 @@ export function warn(format, ...args) { } export function error(format, ...args) { - if (__DEV__) { + if (enableRemoveConsolePatches) { + if (__DEV__) { + console['error'](format, ...args); + } + } else if (__DEV__) { if (!suppressWarning) { printWarning('error', format, args); } @@ -32,6 +45,9 @@ export function error(format, ...args) { } function printWarning(level, format, args) { + if (enableRemoveConsolePatches) { + return; + } if (__DEV__) { const React = require('react'); const ReactSharedInternals = diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index 3d90283c5e6e0..04bfb1a0e5479 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -783,7 +783,9 @@ const bundles = [ moduleType: RENDERER, entry: 'react-native-renderer', global: 'ReactNativeRenderer', - externals: ['react-native'], + // ReactNativeInternalFeatureFlags temporary until we land enableRemoveConsolePatches. + // Needs to be done before the next RN OSS release. + externals: ['react-native', 'ReactNativeInternalFeatureFlags'], minifyWithProdErrorCodes: false, wrapWithModuleBoundaries: true, babel: opts => @@ -817,7 +819,9 @@ const bundles = [ moduleType: RENDERER, entry: 'react-native-renderer/fabric', global: 'ReactFabric', - externals: ['react-native'], + // ReactNativeInternalFeatureFlags temporary until we land enableRemoveConsolePatches. + // Needs to be done before the next RN OSS release. + externals: ['react-native', 'ReactNativeInternalFeatureFlags'], minifyWithProdErrorCodes: false, wrapWithModuleBoundaries: true, babel: opts =>