Add LIS-based differentiator for minimal child reordering mutations (#56094)

Summary:
Pull Request resolved: #56094

The current Differentiator Stage 4 uses a greedy two-pointer algorithm to
reconcile reordered children. When children are shuffled, it produces excessive
REMOVE+INSERT pairs because it doesn't find the minimal edit.

This adds an alternative code path that uses Longest Increasing Subsequence
(LIS) to identify which children can stay in place vs which need to be moved.
Items in the LIS maintain their relative order — only items outside the LIS
need REMOVE+INSERT.

Example: moving last element to front [A,B,C,D,E] → [E,A,B,C,D]:
- Greedy: 4 REMOVEs + 5 INSERTs = 9 mutations
- LIS: LIS=[A,B,C,D], only E moves = 1 REMOVE + 1 INSERT = 2 mutations

The LIS algorithm is O(n log n) time, O(n) space. Since average child count
is <10, the position mapping uses linear scan instead of hash tables.

Guarded by `useLISAlgorithmInDifferentiator` feature flag (default off).

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D96334873

fbshipit-source-id: a417d6b74a3195b3ff3cb98e76d4820073918c2b

Author: javache

packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
+ * @fantom_flags useLISAlgorithmInDifferentiator:*
  * @flow strict-local
  * @format
  */
@@ -173,4 +174,98 @@ Fantom.unstable_benchmark
         root.destroy();
       },
     }),
+  )
+  .test.each(
+    [10, 50, 100],
+    n => `reorder ${n.toString()} children (move first to last)`,
+    () => {
+      Fantom.runTask(() => root.render(testViews));
+    },
+    n => {
+      let original: React.MixedElement;
+      let reordered: React.MixedElement;
+      return {
+        beforeAll: () => {
+          const children = [];
+          for (let i = 0; i < n; i++) {
+            children.push(
+              <View
+                key={i}
+                collapsable={false}
+                nativeID={`child-${i.toString()}`}
+                style={{width: i + 1, height: i + 1}}
+              />,
+            );
+          }
+          original = (
+            <View collapsable={false} nativeID="parent">
+              {children}
+            </View>
+          );
+          // Move first child to last
+          const reorderedChildren = [...children.slice(1), children[0]];
+          reordered = (
+            <View collapsable={false} nativeID="parent">
+              {reorderedChildren}
+            </View>
+          );
+        },
+        beforeEach: () => {
+          root = Fantom.createRoot();
+          Fantom.runTask(() => root.render(original));
+          // $FlowExpectedError[incompatible-type]
+          testViews = reordered;
+        },
+        afterEach: () => {
+          root.destroy();
+        },
+      };
+    },
+  )
+  .test.each(
+    [10, 50, 100],
+    n => `reorder ${n.toString()} children (swap first two)`,
+    () => {
+      Fantom.runTask(() => root.render(testViews));
+    },
+    n => {
+      let original: React.MixedElement;
+      let reordered: React.MixedElement;
+      return {
+        beforeAll: () => {
+          const children = [];
+          for (let i = 0; i < n; i++) {
+            children.push(
+              <View
+                key={i}
+                collapsable={false}
+                nativeID={`child-${i.toString()}`}
+                style={{width: i + 1, height: i + 1}}
+              />,
+            );
+          }
+          original = (
+            <View collapsable={false} nativeID="parent">
+              {children}
+            </View>
+          );
+          // Swap first two children — both algorithms handle this equally
+          const swapped = [children[1], children[0], ...children.slice(2)];
+          reordered = (
+            <View collapsable={false} nativeID="parent">
+              {swapped}
+            </View>
+          );
+        },
+        beforeEach: () => {
+          root = Fantom.createRoot();
+          Fantom.runTask(() => root.render(original));
+          // $FlowExpectedError[incompatible-type]
+          testViews = reordered;
+        },
+        afterEach: () => {
+          root.destroy();
+        },
+      };
+    },
   );

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<<5144fb0350b71394206d614c68ef87f0>>
+ * @generated SignedSource<<61964fd9ddf11ed5c2848da3f4d0b490>>
  */
 
 /**
@@ -510,6 +510,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun useFabricInterop(): Boolean = accessor.useFabricInterop()
 
+  /**
+   * Use Longest Increasing Subsequence algorithm in the Differentiator to minimize REMOVE/INSERT mutations during child list reconciliation.
+   */
+  @JvmStatic
+  public fun useLISAlgorithmInDifferentiator(): Boolean = accessor.useLISAlgorithmInDifferentiator()
+
   /**
    * When enabled, the native view configs are used in bridgeless mode.
    */

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<<d284f066f036908977797a381a044dfa>>
+ * @generated SignedSource<<4ce2605ff71e60b6096a211ff902e994>>
  */
 
 /**
@@ -100,6 +100,7 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
   private var updateRuntimeShadowNodeReferencesOnCommitThreadCache: Boolean? = null
   private var useAlwaysAvailableJSErrorHandlingCache: Boolean? = null
   private var useFabricInteropCache: Boolean? = null
+  private var useLISAlgorithmInDifferentiatorCache: Boolean? = null
   private var useNativeViewConfigsInBridgelessModeCache: Boolean? = null
   private var useNestedScrollViewAndroidCache: Boolean? = null
   private var useSharedAnimatedBackendCache: Boolean? = null
@@ -831,6 +832,15 @@ internal class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun useLISAlgorithmInDifferentiator(): Boolean {
+    var cached = useLISAlgorithmInDifferentiatorCache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.useLISAlgorithmInDifferentiator()
+      useLISAlgorithmInDifferentiatorCache = cached
+    }
+    return cached
+  }
+
   override fun useNativeViewConfigsInBridgelessMode(): Boolean {
     var cached = useNativeViewConfigsInBridgelessModeCache
     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<<de1c66a540520cd88c4d358ba30f2c6d>>
+ * @generated SignedSource<<5f3573c9983cb54c5df527a3053ebbae>>
  */
 
 /**
@@ -188,6 +188,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun useFabricInterop(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun useLISAlgorithmInDifferentiator(): Boolean
+
   @DoNotStrip @JvmStatic public external fun useNativeViewConfigsInBridgelessMode(): Boolean
 
   @DoNotStrip @JvmStatic public external fun useNestedScrollViewAndroid(): 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<<ab3b1d2277b8cc9db1708ef94515fb35>>
+ * @generated SignedSource<<67d638f79b7b06a087f63563c2e5ff95>>
  */
 
 /**
@@ -183,6 +183,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun useFabricInterop(): Boolean = true
 
+  override fun useLISAlgorithmInDifferentiator(): Boolean = false
+
   override fun useNativeViewConfigsInBridgelessMode(): Boolean = false
 
   override fun useNestedScrollViewAndroid(): 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<<7b87f5541ecf881d8ce51c5edd5b99b0>>
+ * @generated SignedSource<<e211fdbb92579b05507ea84ae42f22ff>>
  */
 
 /**
@@ -104,6 +104,7 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
   private var updateRuntimeShadowNodeReferencesOnCommitThreadCache: Boolean? = null
   private var useAlwaysAvailableJSErrorHandlingCache: Boolean? = null
   private var useFabricInteropCache: Boolean? = null
+  private var useLISAlgorithmInDifferentiatorCache: Boolean? = null
   private var useNativeViewConfigsInBridgelessModeCache: Boolean? = null
   private var useNestedScrollViewAndroidCache: Boolean? = null
   private var useSharedAnimatedBackendCache: Boolean? = null
@@ -915,6 +916,16 @@ internal class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcc
     return cached
   }
 
+  override fun useLISAlgorithmInDifferentiator(): Boolean {
+    var cached = useLISAlgorithmInDifferentiatorCache
+    if (cached == null) {
+      cached = currentProvider.useLISAlgorithmInDifferentiator()
+      accessedFeatureFlags.add("useLISAlgorithmInDifferentiator")
+      useLISAlgorithmInDifferentiatorCache = cached
+    }
+    return cached
+  }
+
   override fun useNativeViewConfigsInBridgelessMode(): Boolean {
     var cached = useNativeViewConfigsInBridgelessModeCache
     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<<f34b257861830bae7012fc5201904831>>
+ * @generated SignedSource<<540700c0c0f3259a093a98ad639478ba>>
  */
 
 /**
@@ -183,6 +183,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun useFabricInterop(): Boolean
 
+  @DoNotStrip public fun useLISAlgorithmInDifferentiator(): Boolean
+
   @DoNotStrip public fun useNativeViewConfigsInBridgelessMode(): Boolean
 
   @DoNotStrip public fun useNestedScrollViewAndroid(): Boolean

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<<b4670c40175b42e04eb8f03b752a0c00>>
+ * @generated SignedSource<<6c088ccf18868fc6e54d83c7483b6607>>
  */
 
 /**
@@ -519,6 +519,12 @@ class ReactNativeFeatureFlagsJavaProvider
     return method(javaProvider_);
   }
 
+  bool useLISAlgorithmInDifferentiator() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("useLISAlgorithmInDifferentiator");
+    return method(javaProvider_);
+  }
+
   bool useNativeViewConfigsInBridgelessMode() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("useNativeViewConfigsInBridgelessMode");
@@ -983,6 +989,11 @@ bool JReactNativeFeatureFlagsCxxInterop::useFabricInterop(
   return ReactNativeFeatureFlags::useFabricInterop();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::useLISAlgorithmInDifferentiator(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::useLISAlgorithmInDifferentiator();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::useNativeViewConfigsInBridgelessMode(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::useNativeViewConfigsInBridgelessMode();
@@ -1304,6 +1315,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "useFabricInterop",
         JReactNativeFeatureFlagsCxxInterop::useFabricInterop),
+      makeNativeMethod(
+        "useLISAlgorithmInDifferentiator",
+        JReactNativeFeatureFlagsCxxInterop::useLISAlgorithmInDifferentiator),
       makeNativeMethod(
         "useNativeViewConfigsInBridgelessMode",
         JReactNativeFeatureFlagsCxxInterop::useNativeViewConfigsInBridgelessMode),

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<<5433b4a2f4a0574591a38017422edac8>>
+ * @generated SignedSource<<73cfe749b34b786e25b683c499889e48>>
  */
 
 /**
@@ -270,6 +270,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool useFabricInterop(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool useLISAlgorithmInDifferentiator(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool useNativeViewConfigsInBridgelessMode(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

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<<bfb72cee88230c56d2c101be808ef300>>
+ * @generated SignedSource<<a33f1aaed390cc914a55bd48906f1a11>>
  */
 
 /**
@@ -346,6 +346,10 @@ bool ReactNativeFeatureFlags::useFabricInterop() {
   return getAccessor().useFabricInterop();
 }
 
+bool ReactNativeFeatureFlags::useLISAlgorithmInDifferentiator() {
+  return getAccessor().useLISAlgorithmInDifferentiator();
+}
+
 bool ReactNativeFeatureFlags::useNativeViewConfigsInBridgelessMode() {
   return getAccessor().useNativeViewConfigsInBridgelessMode();
 }