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

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();
 }

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<<4811a81c7839f2be5c8a127e6c8e310b>>
+ * @generated SignedSource<<6c175f21aaa8d084c7b0be0625d5d77d>>
  */
 
 /**
@@ -439,6 +439,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool useFabricInterop();
 
+  /**
+   * Use Longest Increasing Subsequence algorithm in the Differentiator to minimize REMOVE/INSERT mutations during child list reconciliation.
+   */
+  RN_EXPORT static bool useLISAlgorithmInDifferentiator();
+
   /**
    * When enabled, the native view configs are used in bridgeless mode.
    */