Implement UI consistency mechanism for JS thread

packages/react-native/React/React-RCTFabric.podspec

@@ -87,6 +87,7 @@ Pod::Spec.new do |s|
   add_dependency(s, "React-debug")
   add_dependency(s, "React-utils")
   add_dependency(s, "React-rendererdebug")
+  add_dependency(s, "React-rendererconsistency")
   add_dependency(s, "React-runtimescheduler")
   add_dependency(s, "React-jsinspector", :framework_name => 'jsinspector_modern')
 

packages/react-native/ReactAndroid/build.gradle.kts

@@ -563,6 +563,7 @@ android {
             "react_cxxreactpackage",
             "react_render_animations",
             "react_render_core",
+            "react_render_consistency",
             "react_render_graphics",
             "rrc_image",
             "rrc_root",
@@ -580,6 +581,7 @@ android {
             "react_nativemodule_core",
             "react_render_imagemanager",
             "react_render_uimanager",
+            "react_render_uimanager_consistency",
             "react_render_scheduler",
             "react_render_mounting",
             "hermes_executor",

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<bdd9f28c6de15e64ce03c505a3f4f34b>>
+ * @generated SignedSource<<20c445fde7a1c2607b58b7797346431f>>
  */
 
 /**
@@ -76,6 +76,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableSpannableBuildingUnification(): Boolean = accessor.enableSpannableBuildingUnification()
 
+  /**
+   * Ensures that JavaScript always has a consistent view of the state of the UI (e.g.: commits done in other threads are not immediately propagated to JS during its execution).
+   */
+  @JvmStatic
+  public fun enableUIConsistency(): Boolean = accessor.enableUIConsistency()
+
   /**
    * Flag determining if the C++ implementation of InspectorPackagerConnection should be used instead of the per-platform one. This flag is global and should not be changed across React Host lifetimes.
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<7ae379135157666d9646f1d8eeec9989>>
+ * @generated SignedSource<<6e973dcdcdfae14c77a6130207333551>>
  */
 
 /**
@@ -28,6 +28,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var enableMicrotasksCache: Boolean? = null
   private var enableMountHooksAndroidCache: Boolean? = null
   private var enableSpannableBuildingUnificationCache: Boolean? = null
+  private var enableUIConsistencyCache: Boolean? = null
   private var inspectorEnableCxxInspectorPackagerConnectionCache: Boolean? = null
   private var inspectorEnableModernCDPRegistryCache: Boolean? = null
   private var useModernRuntimeSchedulerCache: Boolean? = null
@@ -104,6 +105,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
     return cached
   }
 
+  override fun enableUIConsistency(): Boolean {
+    var cached = enableUIConsistencyCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableUIConsistency()
+      enableUIConsistencyCache = cached
+    }
+    return cached
+  }
+
   override fun inspectorEnableCxxInspectorPackagerConnection(): Boolean {
     var cached = inspectorEnableCxxInspectorPackagerConnectionCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<244a0656beee8e018585bdd4bb4e5cd1>>
+ * @generated SignedSource<<0d34567fc05555ae401e7f5180dc8771>>
  */
 
 /**
@@ -44,6 +44,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableSpannableBuildingUnification(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableUIConsistency(): Boolean
+
   @DoNotStrip @JvmStatic public external fun inspectorEnableCxxInspectorPackagerConnection(): Boolean
 
   @DoNotStrip @JvmStatic public external fun inspectorEnableModernCDPRegistry(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<d0985b19d61af8bdf47c322b7a59e203>>
+ * @generated SignedSource<<cfb3e4f5d83a939f4b034bc62762837e>>
  */
 
 /**
@@ -39,6 +39,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableSpannableBuildingUnification(): Boolean = false
 
+  override fun enableUIConsistency(): Boolean = false
+
   override fun inspectorEnableCxxInspectorPackagerConnection(): Boolean = false
 
   override fun inspectorEnableModernCDPRegistry(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<919eb0f27540e5dd7a1e028663c23264>>
+ * @generated SignedSource<<8908de9b9d0186f1916d8b55d5854cb2>>
  */
 
 /**
@@ -32,6 +32,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var enableMicrotasksCache: Boolean? = null
   private var enableMountHooksAndroidCache: Boolean? = null
   private var enableSpannableBuildingUnificationCache: Boolean? = null
+  private var enableUIConsistencyCache: Boolean? = null
   private var inspectorEnableCxxInspectorPackagerConnectionCache: Boolean? = null
   private var inspectorEnableModernCDPRegistryCache: Boolean? = null
   private var useModernRuntimeSchedulerCache: Boolean? = null
@@ -116,6 +117,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableUIConsistency(): Boolean {
+    var cached = enableUIConsistencyCache
+    if (cached == null) {
+      cached = currentProvider.enableUIConsistency()
+      accessedFeatureFlags.add("enableUIConsistency")
+      enableUIConsistencyCache = cached
+    }
+    return cached
+  }
+
   override fun inspectorEnableCxxInspectorPackagerConnection(): Boolean {
     var cached = inspectorEnableCxxInspectorPackagerConnectionCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<ddbe652a9094bd6af4bdb741fc17ea7c>>
+ * @generated SignedSource<<7555a704535615fcea44c1261095419a>>
  */
 
 /**
@@ -39,6 +39,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableSpannableBuildingUnification(): Boolean
 
+  @DoNotStrip public fun enableUIConsistency(): Boolean
+
   @DoNotStrip public fun inspectorEnableCxxInspectorPackagerConnection(): Boolean
 
   @DoNotStrip public fun inspectorEnableModernCDPRegistry(): Boolean

packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt

@@ -79,6 +79,8 @@ add_react_common_subdir(react/renderer/scheduler)
 add_react_common_subdir(react/renderer/telemetry)
 add_react_common_subdir(react/renderer/uimanager)
 add_react_common_subdir(react/renderer/core)
+add_react_common_subdir(react/renderer/consistency)
+add_react_common_subdir(react/renderer/uimanager/consistency)
 add_react_common_subdir(react/renderer/element)
 add_react_common_subdir(react/renderer/graphics)
 add_react_common_subdir(react/renderer/debug)

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<393c6cf93399cfe0b0533927877531d5>>
+ * @generated SignedSource<<e6f57d186226377e4558f633433aa1fc>>
  */
 
 /**
@@ -87,6 +87,12 @@ class ReactNativeFeatureFlagsProviderHolder
     return method(javaProvider_);
   }
 
+  bool enableUIConsistency() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableUIConsistency");
+    return method(javaProvider_);
+  }
+
   bool inspectorEnableCxxInspectorPackagerConnection() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("inspectorEnableCxxInspectorPackagerConnection");
@@ -149,6 +155,11 @@ bool JReactNativeFeatureFlagsCxxInterop::enableSpannableBuildingUnification(
   return ReactNativeFeatureFlags::enableSpannableBuildingUnification();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::enableUIConsistency(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::enableUIConsistency();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::inspectorEnableCxxInspectorPackagerConnection(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::inspectorEnableCxxInspectorPackagerConnection();
@@ -205,6 +216,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "enableSpannableBuildingUnification",
         JReactNativeFeatureFlagsCxxInterop::enableSpannableBuildingUnification),
+      makeNativeMethod(
+        "enableUIConsistency",
+        JReactNativeFeatureFlagsCxxInterop::enableUIConsistency),
       makeNativeMethod(
         "inspectorEnableCxxInspectorPackagerConnection",
         JReactNativeFeatureFlagsCxxInterop::inspectorEnableCxxInspectorPackagerConnection),

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<e0466f307c37b0c46a09d3a792060fcd>>
+ * @generated SignedSource<<a90ff7ce4734046fd9aab1c501ca22b4>>
  */
 
 /**
@@ -54,6 +54,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool enableSpannableBuildingUnification(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool enableUIConsistency(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool inspectorEnableCxxInspectorPackagerConnection(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

packages/react-native/ReactCommon/React-Fabric.podspec

@@ -213,7 +213,7 @@ Pod::Spec.new do |s|
       sss.header_dir           = "react/renderer/components/textinput"
 
     end
-    
+
     ss.subspec "unimplementedview" do |sss|
       sss.dependency             folly_dep_name, folly_version
       sss.compiler_flags       = folly_compiler_flags
@@ -277,10 +277,17 @@ Pod::Spec.new do |s|
   end
 
   s.subspec "uimanager" do |ss|
+    ss.subspec "consistency" do |sss|
+      sss.dependency             folly_dep_name, folly_version
+      sss.compiler_flags       = folly_compiler_flags
+      sss.source_files         = "react/renderer/uimanager/consistency/*.{m,mm,cpp,h}"
+      sss.header_dir           = "react/renderer/uimanager/consistency"
+    end
+
     ss.dependency             folly_dep_name, folly_version
+    ss.dependency             "React-rendererconsistency"
     ss.compiler_flags       = folly_compiler_flags
-    ss.source_files         = "react/renderer/uimanager/**/*.{m,mm,cpp,h}"
-    ss.exclude_files        = "react/renderer/uimanager/tests"
+    ss.source_files         = "react/renderer/uimanager/*.{m,mm,cpp,h}"
     ss.header_dir           = "react/renderer/uimanager"
   end
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<cc7c7aa6ac71f94f8dd8fc8cc0c18308>>
+ * @generated SignedSource<<a5c58cc8c0294fd073f43fda88b908f8>>
  */
 
 /**
@@ -53,6 +53,10 @@ bool ReactNativeFeatureFlags::enableSpannableBuildingUnification() {
   return getAccessor().enableSpannableBuildingUnification();
 }
 
+bool ReactNativeFeatureFlags::enableUIConsistency() {
+  return getAccessor().enableUIConsistency();
+}
+
 bool ReactNativeFeatureFlags::inspectorEnableCxxInspectorPackagerConnection() {
   return getAccessor().inspectorEnableCxxInspectorPackagerConnection();
 }

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<d104b9219b7658544101bbd175f8fa7d>>
+ * @generated SignedSource<<e94d55bad5f8bf6cf933ddc50e3b4886>>
  */
 
 /**
@@ -77,6 +77,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool enableSpannableBuildingUnification();
 
+  /**
+   * Ensures that JavaScript always has a consistent view of the state of the UI (e.g.: commits done in other threads are not immediately propagated to JS during its execution).
+   */
+  RN_EXPORT static bool enableUIConsistency();
+
   /**
    * Flag determining if the C++ implementation of InspectorPackagerConnection should be used instead of the per-platform one. This flag is global and should not be changed across React Host lifetimes.
    */

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlagsAccessor.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<f7d54fe8d458d80359a8d6e0e5816b1b>>
+ * @generated SignedSource<<2ff39fd4c8330ddca994fc40cdeaaf4c>>
  */
 
 /**
@@ -173,6 +173,24 @@ bool ReactNativeFeatureFlagsAccessor::enableSpannableBuildingUnification() {
   return flagValue.value();
 }
 
+bool ReactNativeFeatureFlagsAccessor::enableUIConsistency() {
+  auto flagValue = enableUIConsistency_.load();
+
+  if (!flagValue.has_value()) {
+    // This block is not exclusive but it is not necessary.
+    // If multiple threads try to initialize the feature flag, we would only
+    // be accessing the provider multiple times but the end state of this
+    // instance and the returned flag value would be the same.
+
+    markFlagAsAccessed(8, "enableUIConsistency");
+
+    flagValue = currentProvider_->enableUIConsistency();
+    enableUIConsistency_ = flagValue;
+  }
+
+  return flagValue.value();
+}
+
 bool ReactNativeFeatureFlagsAccessor::inspectorEnableCxxInspectorPackagerConnection() {
   auto flagValue = inspectorEnableCxxInspectorPackagerConnection_.load();
 
@@ -182,7 +200,7 @@ bool ReactNativeFeatureFlagsAccessor::inspectorEnableCxxInspectorPackagerConnect
     // be accessing the provider multiple times but the end state of this
     // instance and the returned flag value would be the same.
 
-    markFlagAsAccessed(8, "inspectorEnableCxxInspectorPackagerConnection");
+    markFlagAsAccessed(9, "inspectorEnableCxxInspectorPackagerConnection");
 
     flagValue = currentProvider_->inspectorEnableCxxInspectorPackagerConnection();
     inspectorEnableCxxInspectorPackagerConnection_ = flagValue;
@@ -200,7 +218,7 @@ bool ReactNativeFeatureFlagsAccessor::inspectorEnableModernCDPRegistry() {
     // be accessing the provider multiple times but the end state of this
     // instance and the returned flag value would be the same.
 
-    markFlagAsAccessed(9, "inspectorEnableModernCDPRegistry");
+    markFlagAsAccessed(10, "inspectorEnableModernCDPRegistry");
 
     flagValue = currentProvider_->inspectorEnableModernCDPRegistry();
     inspectorEnableModernCDPRegistry_ = flagValue;
@@ -218,7 +236,7 @@ bool ReactNativeFeatureFlagsAccessor::useModernRuntimeScheduler() {
     // be accessing the provider multiple times but the end state of this
     // instance and the returned flag value would be the same.
 
-    markFlagAsAccessed(10, "useModernRuntimeScheduler");
+    markFlagAsAccessed(11, "useModernRuntimeScheduler");
 
     flagValue = currentProvider_->useModernRuntimeScheduler();
     useModernRuntimeScheduler_ = flagValue;