From 0a4a95f56870ba7191d8a34cd8295a91dcd232ee Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@meta.com>
Date: Wed, 17 May 2023 04:50:08 -0700
Subject: [PATCH] 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
---
 .../React/Fabric/Mounting/RCTMountingManager.mm       | 11 ++++++++---
 .../react-native/React/Fabric/RCTSurfacePresenter.mm  |  4 ++++
 .../ReactCommon/react/renderer/core/CoreFeatures.cpp  |  1 +
 .../ReactCommon/react/renderer/core/CoreFeatures.h    |  5 +++++
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm b/packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm
index 086849f2be4951..0e7cc3f383cf69 100644
--- a/packages/react-native/React/Fabric/Mounting/RCTMountingManager.mm
+++ b/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 {
diff --git a/packages/react-native/React/Fabric/RCTSurfacePresenter.mm b/packages/react-native/React/Fabric/RCTSurfacePresenter.mm
index e7aa631d49f296..7b09c995700cca 100644
--- a/packages/react-native/React/Fabric/RCTSurfacePresenter.mm
+++ b/packages/react-native/React/Fabric/RCTSurfacePresenter.mm
@@ -272,6 +272,10 @@ - (RCTScheduler *)_createScheduler
     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) {
diff --git a/packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.cpp b/packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.cpp
index 937e40aa0bf5ae..351a257d67877e 100644
--- a/packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.cpp
+++ b/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
diff --git a/packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.h b/packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.h
index 5c49928e226513..f9a07875d270f2 100644
--- a/packages/react-native/ReactCommon/react/renderer/core/CoreFeatures.h
+++ b/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