diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 3315ce92bbc4f..bfa9adb48d737 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -93,6 +93,7 @@ import { enableTrustedTypesIntegration, enableAsyncActions, disableLegacyMode, + enableMoveBefore, } from 'shared/ReactFeatureFlags'; import { HostComponent, @@ -525,6 +526,7 @@ export function appendInitialChild( parentInstance: Instance, child: Instance | TextInstance, ): void { + // Note: This should not use moveBefore() because initial are appended while disconnected. parentInstance.appendChild(child); } @@ -757,11 +759,22 @@ export function commitTextUpdate( textInstance.nodeValue = newText; } +const supportsMoveBefore = + // $FlowFixMe[prop-missing]: We're doing the feature detection here. + enableMoveBefore && + typeof window !== 'undefined' && + typeof window.Node.prototype.moveBefore === 'function'; + export function appendChild( parentInstance: Instance, child: Instance | TextInstance, ): void { - parentInstance.appendChild(child); + if (supportsMoveBefore) { + // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore. + parentInstance.moveBefore(child, null); + } else { + parentInstance.appendChild(child); + } } export function appendChildToContainer( @@ -799,7 +812,12 @@ export function insertBefore( child: Instance | TextInstance, beforeChild: Instance | TextInstance | SuspenseInstance, ): void { - parentInstance.insertBefore(child, beforeChild); + if (supportsMoveBefore) { + // $FlowFixMe[prop-missing]: We've checked this with supportsMoveBefore. + parentInstance.moveBefore(child, beforeChild); + } else { + parentInstance.insertBefore(child, beforeChild); + } } export function insertInContainerBefore( diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 997e9461059fa..e82bce7b50cbe 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -210,6 +210,9 @@ export const disableIEWorkarounds = true; // request for certain browsers. export const enableFilterEmptyStringAttributesDOM = true; +// Enable the moveBefore() alternative to insertBefore(). This preserves states of moves. +export const enableMoveBefore = false; + // Disabled caching behavior of `react/cache` in client runtimes. export const disableClientCache = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 748aa03a9d7ae..defa7cd330d7f 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -55,6 +55,7 @@ export const enableDebugTracing = false; export const enableDeferRootSchedulingToMicrotask = true; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = true; export const enableFizzExternalRuntime = true; export const enableFlightReadableStream = true; export const enableGetInspectorDataForInstanceInProduction = true; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 9f48f3877f81d..16c156f41c5ac 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -44,6 +44,7 @@ export const enableDeferRootSchedulingToMicrotask = true; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFabricCompleteRootInCommitPhase = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = true; export const enableFizzExternalRuntime = true; export const enableFlightReadableStream = true; export const enableGetInspectorDataForInstanceInProduction = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index fbb95e0829018..01462919600d2 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -45,6 +45,7 @@ export const favorSafetyOverHydrationPerf = true; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableFabricCompleteRootInCommitPhase = false; export const enableHiddenSubtreeInsertionEffectCleanup = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js index 8bc77e4bfe375..51d9b90d4f7be 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js @@ -35,6 +35,7 @@ export const enableDebugTracing = false; export const enableDeferRootSchedulingToMicrotask = true; export const enableDO_NOT_USE_disableStrictPassiveEffect = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableFizzExternalRuntime = true; export const enableFlightReadableStream = true; export const enableGetInspectorDataForInstanceInProduction = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index e28627760a756..272886cc58d07 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -47,6 +47,7 @@ export const favorSafetyOverHydrationPerf = true; export const enableComponentStackLocations = true; export const enableLegacyFBSupport = false; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableGetInspectorDataForInstanceInProduction = false; export const enableRenderableContext = false; export const enableFabricCompleteRootInCommitPhase = false; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index 67d1ad74c0494..8ddbf3dd7c519 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -57,6 +57,7 @@ export const enableCPUSuspense = true; export const enableUseMemoCacheHook = true; export const enableUseEffectEventHook = true; export const enableFilterEmptyStringAttributesDOM = true; +export const enableMoveBefore = false; export const enableAsyncActions = true; export const disableInputAttributeSyncing = false; export const enableLegacyFBSupport = true;