decouple commit from mount on Android (facebook#44236)

Summary:
Pull Request resolved: facebook#44236

## Changelog:

[Android] [Fixed] - fix a case when view preallocation or props forwarding on Android lead to dropped props update

# What does this fix

This fixes a bug where prop change is not delivered to Android mounting layer if the prop change was initiated from state update inside of `useLayoutEffect`, `componentDidMount` or `componentDidUpdate`.
This affects android only and when batched rendering is enabled.

There are two root causes of this problem:
1. View preallocation on Android: https://fburl.com/code/r62p3vot
2. Prop forwarding on Android: https://fburl.com/code/644f1ppk

Minimal repro :
```
import React, {useLayoutEffect, useState} from 'react';
import {Button, SafeAreaView, View} from 'react-native';
function Foo() {
  const [bgColor, setBgColor] = React.useState('red');
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
    setBgColor('blue');
  }, []);
  return (
    <View
      style={{
        backgroundColor: bgColor,
        width: '100%',
        height: '100%',
      }}
    />
  );
}
function RNTesterApp() {
  const [show, setShow] = useState(false);
  return (
    <SafeAreaView>
      <Button title="Toggle" onPress={() => setShow(!show)} />
      {show && <Foo />}
    </SafeAreaView>
  );
}
export default RNTesterApp;
```

# The underlaying problem
The problem is combination of view preallocation and batched rendering updates.

Here is a step by step what happens in the repro above:
1. React issues asks Fabric to create new shadow node A with background colour **red**.
2. Fabric asks Android to allocate a view for shadow node A with background colour **red**.
3. React commits tree **T1** and calls layout effects. Meanwhile Fabric waits, without trying to mount the tree **T1**, to prevent painting state that is about to be updated and prevent flickering.
4. React clones node A, changing the background colour to **blue** and commits the new tree **T2**.
5. Fabric, will now go ahead and mount the latest tree **T2**. While creating mount instructions, it will drop prop updates because it believes prop updates where delivered already as part of step 2.

# The fix

The fix is to change two things:
1. Ignore view preallocation for shadow nodes which were cloned with new props.
2. Set hasBeenMounted flag on ShadowNode later in the Fabric pipeline to fix it.

Both of these are hidden behind a single feature flag: `fixMountedFlagAndFixPreallocationClone`

## Performance implication:
I estimate that this will impact around 3% of views.

Reviewed By: rubennorte

Differential Revision: D56353589

fbshipit-source-id: 651d3cd2d0f78bfbbe9c05aa1ae1b1690c15e4ea

Author: sammy-SC

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

@@ -43,6 +43,12 @@ void schedulerDidRequestPreliminaryViewAllocation(SurfaceId surfaceId, const Sha
     // This delegate method is not currently used on iOS.
   }
 
+  void schedulerDidRequestUpdateToPreallocatedView(const ShadowNode &shadowNode) override
+  {
+    // Does nothing.
+    // This delegate method is not currently used on iOS.
+  }
+
   void schedulerDidDispatchCommand(
       const ShadowView &shadowView,
       const std::string &commandName,

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<<f3d26e8e345068bc7ef4e156be460e09>>
+ * @generated SignedSource<<4adf12f2d6a102944b0fa922aa1c3e84>>
  */
 
 /**
@@ -94,6 +94,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableUIConsistency(): Boolean = accessor.enableUIConsistency()
 
+  /**
+   * Splits hasBeenMounted and promoted.
+   */
+  @JvmStatic
+  public fun fixMountedFlagAndFixPreallocationClone(): Boolean = accessor.fixMountedFlagAndFixPreallocationClone()
+
   /**
    * Forces the mounting layer on Android to always batch mount items instead of dispatching them immediately. This might fix some crashes related to synchronous state updates, where some views dispatch state updates during mount.
    */

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<<40668dcd951123da7c0b4ddde23f94c9>>
+ * @generated SignedSource<<24c24962f08ba7c52c296a5ac9abdbbc>>
  */
 
 /**
@@ -31,6 +31,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var enableSpannableBuildingUnificationCache: Boolean? = null
   private var enableSynchronousStateUpdatesCache: Boolean? = null
   private var enableUIConsistencyCache: Boolean? = null
+  private var fixMountedFlagAndFixPreallocationCloneCache: Boolean? = null
   private var forceBatchingMountItemsOnAndroidCache: Boolean? = null
   private var inspectorEnableCxxInspectorPackagerConnectionCache: Boolean? = null
   private var inspectorEnableModernCDPRegistryCache: Boolean? = null
@@ -138,6 +139,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
     return cached
   }
 
+  override fun fixMountedFlagAndFixPreallocationClone(): Boolean {
+    var cached = fixMountedFlagAndFixPreallocationCloneCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.fixMountedFlagAndFixPreallocationClone()
+      fixMountedFlagAndFixPreallocationCloneCache = cached
+    }
+    return cached
+  }
+
   override fun forceBatchingMountItemsOnAndroid(): Boolean {
     var cached = forceBatchingMountItemsOnAndroidCache
     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<<c3f02dff409c10aa7922141cef3a6990>>
+ * @generated SignedSource<<0ceccc453595057ca96d9ae49c7f4637>>
  */
 
 /**
@@ -50,6 +50,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableUIConsistency(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun fixMountedFlagAndFixPreallocationClone(): Boolean
+
   @DoNotStrip @JvmStatic public external fun forceBatchingMountItemsOnAndroid(): Boolean
 
   @DoNotStrip @JvmStatic public external fun inspectorEnableCxxInspectorPackagerConnection(): 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<<d12888990ebca7c6199f4b51802ee59b>>
+ * @generated SignedSource<<29720cb2aa02ebdbe8e5efbe9e3a4b01>>
  */
 
 /**
@@ -45,6 +45,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableUIConsistency(): Boolean = false
 
+  override fun fixMountedFlagAndFixPreallocationClone(): Boolean = false
+
   override fun forceBatchingMountItemsOnAndroid(): Boolean = false
 
   override fun inspectorEnableCxxInspectorPackagerConnection(): 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<<c06b3b34cea24459f6ade0ec5665dae7>>
+ * @generated SignedSource<<977c8d88557a37c750ec59e67c94878c>>
  */
 
 /**
@@ -35,6 +35,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var enableSpannableBuildingUnificationCache: Boolean? = null
   private var enableSynchronousStateUpdatesCache: Boolean? = null
   private var enableUIConsistencyCache: Boolean? = null
+  private var fixMountedFlagAndFixPreallocationCloneCache: Boolean? = null
   private var forceBatchingMountItemsOnAndroidCache: Boolean? = null
   private var inspectorEnableCxxInspectorPackagerConnectionCache: Boolean? = null
   private var inspectorEnableModernCDPRegistryCache: Boolean? = null
@@ -153,6 +154,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun fixMountedFlagAndFixPreallocationClone(): Boolean {
+    var cached = fixMountedFlagAndFixPreallocationCloneCache
+    if (cached == null) {
+      cached = currentProvider.fixMountedFlagAndFixPreallocationClone()
+      accessedFeatureFlags.add("fixMountedFlagAndFixPreallocationClone")
+      fixMountedFlagAndFixPreallocationCloneCache = cached
+    }
+    return cached
+  }
+
   override fun forceBatchingMountItemsOnAndroid(): Boolean {
     var cached = forceBatchingMountItemsOnAndroidCache
     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<<dceb20e62a9ddbb98c872a24fab9765c>>
+ * @generated SignedSource<<a76816db2d7d7d3f0463103387e2a049>>
  */
 
 /**
@@ -45,6 +45,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableUIConsistency(): Boolean
 
+  @DoNotStrip public fun fixMountedFlagAndFixPreallocationClone(): Boolean
+
   @DoNotStrip public fun forceBatchingMountItemsOnAndroid(): Boolean
 
   @DoNotStrip public fun inspectorEnableCxxInspectorPackagerConnection(): Boolean

packages/react-native/ReactAndroid/src/main/jni/react/fabric/Binding.cpp

@@ -523,6 +523,17 @@ void Binding::schedulerDidRequestPreliminaryViewAllocation(
   mountingManager->preallocateShadowView(surfaceId, ShadowView(shadowNode));
 }
 
+void Binding::schedulerDidRequestUpdateToPreallocatedView(
+    const ShadowNode& shadowNode) {
+  auto mountingManager =
+      getMountingManager("schedulerDidRequestUpdateToPreallocatedView");
+  if (!mountingManager) {
+    return;
+  }
+
+  mountingManager->updatePreallocatedShadowNode(shadowNode);
+}
+
 void Binding::schedulerDidDispatchCommand(
     const ShadowView& shadowView,
     const std::string& commandName,

packages/react-native/ReactAndroid/src/main/jni/react/fabric/Binding.h

@@ -109,6 +109,9 @@ class Binding : public jni::HybridClass<Binding, JBinding>,
       const SurfaceId surfaceId,
       const ShadowNode& shadowNode) override;
 
+  void schedulerDidRequestUpdateToPreallocatedView(
+      const ShadowNode& shadowNode) override;
+
   void schedulerDidDispatchCommand(
       const ShadowView& shadowView,
       const std::string& commandName,

packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp

@@ -11,6 +11,7 @@
 #include "MountItem.h"
 #include "StateWrapperImpl.h"
 
+#include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/jni/ReadableNativeMap.h>
 #include <react/renderer/components/scrollview/ScrollViewProps.h>
 #include <react/renderer/core/conversions.h>
@@ -826,6 +827,29 @@ void FabricMountingManager::preallocateShadowView(
       isLayoutableShadowNode);
 }
 
+void FabricMountingManager::updatePreallocatedShadowNode(
+    const ShadowNode& shadowNode) {
+  if (ReactNativeFeatureFlags::fixMountedFlagAndFixPreallocationClone()) {
+    // When batched rendering is enabled, React may do
+    // multiple commits in a row but only the last one is mounted.
+    // View preallocation does not account for this scenario and
+    // a prop update may be dropped because view is marked as preallocated.
+    // To work around this, we can detect when a view was cloned with different
+    // props, and remove the view from `allocatedViewRegistry_`.
+    std::lock_guard lock(allocatedViewsMutex_);
+    auto allocatedViewsIterator =
+        allocatedViewRegistry_.find(shadowNode.getSurfaceId());
+    if (allocatedViewsIterator == allocatedViewRegistry_.end()) {
+      // The surface does not exist, nothing to do.
+      return;
+    }
+    auto& allocatedViews = allocatedViewsIterator->second;
+    if (allocatedViews.find(shadowNode.getTag()) != allocatedViews.end()) {
+      allocatedViews.erase(shadowNode.getTag());
+    }
+  }
+}
+
 void FabricMountingManager::dispatchCommand(
     const ShadowView& shadowView,
     const std::string& commandName,