Add a feature flag to disable [CATransaction commit] during mount (#3…

…7459) Summary: Pull Request resolved: #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](reactwg/react-native-new-architecture#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
facebook · May 17, 2023 · 0a4a95f · 0a4a95f
1 parent f05252a
commit 0a4a95f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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