[RN] experiment to move Fabric completeWork to the commit phase (#30513)

There is currently a mismatch in how the persistent mode JS API and the
Fabric native code interpret `completeRoot`.

This is a short-lived experiment to see the effect of moving the Fabric
`completeRoot` call from `finalizeContainerChildren` to
`replaceContainerChildren` which in some cases does not get called.

packages/react-native-renderer/src/ReactFiberConfigFabric.js

@@ -48,7 +48,10 @@ const {
   unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
 } = nativeFabricUIManager;
 
-import {passChildrenWhenCloningPersistedNodes} from 'shared/ReactFeatureFlags';
+import {
+  enableFabricCompleteRootInCommitPhase,
+  passChildrenWhenCloningPersistedNodes,
+} from 'shared/ReactFeatureFlags';
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
@@ -469,7 +472,9 @@ export function finalizeContainerChildren(
   container: Container,
   newChildren: ChildSet,
 ): void {
-  completeRoot(container, newChildren);
+  if (!enableFabricCompleteRootInCommitPhase) {
+    completeRoot(container, newChildren);
+  }
 }
 
 export function replaceContainerChildren(
@@ -477,6 +482,9 @@ export function replaceContainerChildren(
   newChildren: ChildSet,
 ): void {
   // Noop - children will be replaced in finalizeContainerChildren
+  if (enableFabricCompleteRootInCommitPhase) {
+    completeRoot(container, newChildren);
+  }
 }
 
 export function getInstanceFromNode(node: any): empty {

packages/shared/ReactFeatureFlags.js

@@ -87,6 +87,11 @@ export const enableTaint = __EXPERIMENTAL__;
 
 export const enablePostpone = __EXPERIMENTAL__;
 
+/**
+ * Switches the Fabric API from doing layout in commit work instead of complete work.
+ */
+export const enableFabricCompleteRootInCommitPhase = false;
+
 /**
  * Switches Fiber creation to a simple object instead of a constructor.
  */

packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js

@@ -22,3 +22,4 @@ export const enableAddPropertiesFastPath = __VARIANT__;
 export const enableObjectFiber = __VARIANT__;
 export const enableShallowPropDiffing = __VARIANT__;
 export const passChildrenWhenCloningPersistedNodes = __VARIANT__;
+export const enableFabricCompleteRootInCommitPhase = __VARIANT__;

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -21,6 +21,7 @@ const dynamicFlags: DynamicExportsType = (dynamicFlagsUntyped: any);
 export const {
   alwaysThrottleRetries,
   enableAddPropertiesFastPath,
+  enableFabricCompleteRootInCommitPhase,
   enableObjectFiber,
   enableShallowPropDiffing,
   passChildrenWhenCloningPersistedNodes,

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -44,6 +44,7 @@ export const enableCreateEventHandleAPI = false;
 export const enableDebugTracing = false;
 export const enableDeferRootSchedulingToMicrotask = true;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = false;
+export const enableFabricCompleteRootInCommitPhase = false;
 export const enableFilterEmptyStringAttributesDOM = true;
 export const enableFizzExternalRuntime = true;
 export const enableFlightReadableStream = true;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -44,6 +44,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = true;
 export const enableGetInspectorDataForInstanceInProduction = false;
+export const enableFabricCompleteRootInCommitPhase = false;
 
 export const enableRetryLaneExpiration = false;
 export const retryLaneExpirationMs = 5000;

packages/shared/forks/ReactFeatureFlags.test-renderer.native-fb.js

@@ -78,6 +78,7 @@ export const retryLaneExpirationMs = 5000;
 export const syncLaneExpirationMs = 250;
 export const transitionLaneExpirationMs = 5000;
 export const useModernStrictMode = true;
+export const enableFabricCompleteRootInCommitPhase = false;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -47,6 +47,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = true;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableRenderableContext = false;
+export const enableFabricCompleteRootInCommitPhase = false;
 
 export const enableRetryLaneExpiration = false;
 export const retryLaneExpirationMs = 5000;

packages/shared/forks/ReactFeatureFlags.www.js

@@ -46,6 +46,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableUpdaterTracking = __PROFILE__;
+export const enableFabricCompleteRootInCommitPhase = false;
 
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;