Use commit hook only for React commits (#8365)

## Summary

This PR introduces `USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS` static
feature flag that, when enabled, skips the `ReanimatedCommitHook` logic
for commits with unknown source, including state updates. Previously,
the fps would decrease by 30-50% while scrolling. After this change, the
impact of scrolling is significantly smaller.

The PR is somewhat similar to
#7668
which was reverted in
#7867
but this time we just skip applying the styles instead of influencing
the pause commits mechanism.

| Before | After |
|:-:|:-:|
| <video
src="https://github.com/user-attachments/assets/bd49e918-0983-4b84-a902-caa0bb5a6f16"
/> | <video
src="https://github.com/user-attachments/assets/d503d129-b4af-4804-96b3-329490da0f05"
/> |

## Test plan

* Tested with "🚁 Performance scroll" example
* Tested with "♟️ Chessboard" example (+ inside `<ScrollView>`)
* Tested with "🔝 Sticky header" example

Author: tomekzaw

apps/common-app/src/apps/reanimated/examples/AboutExample.tsx

@@ -103,6 +103,16 @@ export default function AboutExample() {
               ? 'Enabled'
               : 'Disabled'}
           </Text>
+          <Text style={styles.text}>
+            <Text style={styles.bold}>
+              USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS:
+            </Text>{' '}
+            {getStaticFeatureFlagReanimated(
+              'USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS'
+            )
+              ? 'Enabled'
+              : 'Disabled'}
+          </Text>
           <Text style={styles.text}>
             <Text style={styles.bold}>IOS_DYNAMIC_FRAMERATE_ENABLED:</Text>{' '}
             {getStaticFeatureFlagWorklets('IOS_DYNAMIC_FRAMERATE_ENABLED')

apps/fabric-example/package.json

@@ -28,7 +28,8 @@
       "DISABLE_COMMIT_PAUSING_MECHANISM": true,
       "ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS": true,
       "EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS": true,
-      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true
+      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true,
+      "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true
     }
   },
   "worklets": {

apps/macos-example/package.json

@@ -38,7 +38,8 @@
       "DISABLE_COMMIT_PAUSING_MECHANISM": true,
       "ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS": true,
       "EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS": true,
-      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true
+      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true,
+      "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true
     }
   },
   "worklets": {

apps/tvos-example/package.json

@@ -47,7 +47,8 @@
       "DISABLE_COMMIT_PAUSING_MECHANISM": true,
       "ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS": true,
       "EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS": true,
-      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true
+      "USE_SYNCHRONIZABLE_FOR_MUTABLES": true,
+      "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": true
     }
   },
   "worklets": {

docs/docs-reanimated/docs/guides/feature-flags.md

@@ -20,6 +20,7 @@ Feature flags are available since Reanimated 4.
 | [`ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS`](#android_synchronously_update_ui_props)                   | [static](#static-feature-flags) |  4.0.0   |  –   |    `false`    |
 | [`EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS`](#experimental_css_animations_for_svg_components) | [static](#static-feature-flags) |  4.1.0   |  –   |    `false`    |
 | [`USE_SYNCHRONIZABLE_FOR_MUTABLES`](#use_synchronizable_for_mutables)                               | [static](#static-feature-flags) |  4.1.0   |  –   |    `false`    |
+| [`USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS`](#use_commit_hook_only_for_react_commits)                 | [static](#static-feature-flags) |  4.2.0   |  –   |    `false`    |
 
 :::info
 
@@ -142,6 +143,10 @@ When enabled, CSS animations and transitions will also work for a limited set of
 
 This feature flag is supposed to speedup shared value reads on the RN runtime by reducing the number of calls to `executeOnUIRuntimeSync`. When enabled, mutables (which are the primitives behind shared values) use `Synchronizable` state to check if they should sync with the UI Runtime. For more details, see [PR #8080](https://github.com/software-mansion/react-native-reanimated/pull/8080).
 
+### `USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS`
+
+This feature flag is supposed to fix performance regressions of animations while scrolling. When enabled, `ReanimatedCommitHook` applies latest animated styles and props only for React commits, which means the logic will be skipped for other commits, including state updates.
+
 ## Static feature flags
 
 Static flags are intended to be resolved during code compilation and cannot be changed during application runtime. To enable a static feature flag, you need to:

packages/react-native-reanimated/Common/cpp/reanimated/Fabric/ReanimatedCommitHook.cpp

@@ -1,6 +1,7 @@
 #include <reanimated/Fabric/ReanimatedCommitHook.h>
 #include <reanimated/Fabric/ReanimatedCommitShadowNode.h>
 #include <reanimated/Fabric/ShadowTreeCloner.h>
+#include <reanimated/Tools/FeatureFlags.h>
 #include <reanimated/Tools/ReanimatedSystraceSection.h>
 
 #include <react/renderer/core/ComponentDescriptor.h>
@@ -73,6 +74,16 @@ RootShadowNode::Unshared ReanimatedCommitHook::shadowTreeWillCommit(
     return newRootShadowNode;
   }
 
+  if constexpr (StaticFeatureFlags::getFlag(
+                    "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS")) {
+    // State updates are based on the currently committed ShadowTree,
+    // which means that all animation changes are already included.
+    // Therefore, there's no need to reapply styles from the props map.
+    if (commitOptions.source != ShadowTreeCommitSource::React) {
+      return newRootShadowNode;
+    }
+  }
+
   // ShadowTree not commited by Reanimated, apply updates from the updates
   // registry manager
   reaShadowNode->unsetReanimatedMountTrait();

packages/react-native-reanimated/src/featureFlags/index.ts

@@ -57,6 +57,7 @@ const DefaultStaticFeatureFlags = {
   ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS: false,
   EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS: false,
   USE_SYNCHRONIZABLE_FOR_MUTABLES: false,
+  USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS: false,
 } as const satisfies typeof StaticFeatureFlagsJSON;
 
 type StaticFeatureFlagsSchema = {

packages/react-native-reanimated/src/featureFlags/staticFlags.json

@@ -3,5 +3,6 @@
   "DISABLE_COMMIT_PAUSING_MECHANISM": false,
   "ANDROID_SYNCHRONOUSLY_UPDATE_UI_PROPS": false,
   "EXPERIMENTAL_CSS_ANIMATIONS_FOR_SVG_COMPONENTS": false,
-  "USE_SYNCHRONIZABLE_FOR_MUTABLES": false
+  "USE_SYNCHRONIZABLE_FOR_MUTABLES": false,
+  "USE_COMMIT_HOOK_ONLY_FOR_REACT_COMMITS": false
 }