Add a feature flag to disable [CATransaction commit] during mount (#37459)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/37459

changelog: [internal]

Let's try to dissable manual `[CATransaction commit]`. This may reduce UI thrash in case several Fabric transactions are committed within single UIRunLoop tick.

While working on [the new architecture benchmarks](https://github.com/reactwg/react-native-new-architecture/discussions/123), with the help of instrumentation I noticed two paints on some occasions. This was happening around 50% of the time I executed a scenario. It dropped the rendering time on 5k of <Text /> from ~800ms down to ~600ms.
Also, the original reason why `[CATransaction commit]` was added has passed. It was added to make Screenshot tests less flaky but we no longer use screenshot tests.

Reviewed By: javache

Differential Revision: D45870408

fbshipit-source-id: 23112c2d92451aba40ad770ffd34f4d5f0ea585f

packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm

@@ -17,6 +17,7 @@
 #import <React/RCTUtils.h>
 #import <react/config/ReactNativeConfig.h>
 #import <react/renderer/components/root/RootShadowNode.h>
+#import <react/renderer/core/CoreFeatures.h>
 #import <react/renderer/core/LayoutableShadowNode.h>
 #import <react/renderer/core/RawProps.h>
 #import <react/renderer/debug/SystraceSection.h>
@@ -49,8 +50,10 @@ static void RCTPerformMountInstructions(
 {
   SystraceSection s("RCTPerformMountInstructions");
 
-  [CATransaction begin];
-  [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
+  if (!CoreFeatures::disableTransactionCommit) {
+    [CATransaction begin];
+    [CATransaction setValue:(id)kCFBooleanTrue forKey:kCATransactionDisableActions];
+  }
   for (auto const &mutation : mutations) {
     switch (mutation.type) {
       case ShadowViewMutation::Create: {
@@ -149,7 +152,9 @@ static void RCTPerformMountInstructions(
       }
     }
   }
-  [CATransaction commit];
+  if (!CoreFeatures::disableTransactionCommit) {
+    [CATransaction commit];
+  }
 }
 
 @implementation RCTMountingManager {

packages/react-native/React/Fabric/RCTSurfacePresenter.mm

@@ -272,6 +272,10 @@ static BackgroundExecutor RCTGetBackgroundExecutor()
     CoreFeatures::cancelImageDownloadsOnRecycle = true;
   }
 
+  if (reactNativeConfig && reactNativeConfig->getBool("react_fabric:disable_transaction_commit")) {
+    CoreFeatures::disableTransactionCommit = true;
+  }
+
   auto componentRegistryFactory =
       [factory = wrapManagedObject(_mountingManager.componentViewRegistry.componentViewFactory)](
           EventDispatcher::Weak const &eventDispatcher, ContextContainer::Shared const &contextContainer) {

packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.cpp

@@ -15,5 +15,6 @@ bool CoreFeatures::blockPaintForUseLayoutEffect = false;
 bool CoreFeatures::useNativeState = false;
 bool CoreFeatures::cacheLastTextMeasurement = false;
 bool CoreFeatures::cancelImageDownloadsOnRecycle = false;
+bool CoreFeatures::disableTransactionCommit = false;
 
 } // namespace facebook::react

packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.h

@@ -43,6 +43,11 @@ class CoreFeatures {
   // Fabric was not cancelling image downloads when <ImageView /> was removed
   // from view hierarchy. This feature flag enables this feature.
   static bool cancelImageDownloadsOnRecycle;
+
+  // On iOS, every transaction is wrapperd in [CATransaction begin] and
+  // [CATransaction end] This feature flag disables it to measure its impact in
+  // production.
+  static bool disableTransactionCommit;
 };
 
 } // namespace facebook::react