Use useDebouncedEffect for managing animated props lifecycle

Summary:
This diff sets up an experiment to use `useDebouncedEffect` for managing animated props lifecycle.

Changelog: [Internal]

bypass-github-export-checks

Facebook
This diff also defaults to `useDebouncedEffect` for managing animated props lifecycle in IGVR and FBVR.

Based on local tracing of FBVR, `useDebouncedEffect` results in **~19ms faster visual completion**.
Before we executed **54.2 ms** of passive effects vs **35.6 ms** after.

Reviewed By: josephsavona, rubennorte

Differential Revision: D60834116

fbshipit-source-id: 35d5eb4c4be18e716f96129911e66eaffe54bb17

packages/react-native/Libraries/Animated/useAnimatedProps.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+import useDebouncedEffect from '../../src/private/hooks/useDebouncedEffect';
 import {isPublicInstance as isFabricPublicInstance} from '../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import useRefEffect from '../Utilities/useRefEffect';
 import {AnimatedEvent} from './AnimatedEvent';
@@ -265,7 +266,12 @@ function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
     };
   }, []);
 
-  useEffect(() => {
+  const useEffectImpl =
+    ReactNativeFeatureFlags.shouldUseDebouncedEffectsForAnimated()
+      ? useDebouncedEffect
+      : useEffect;
+
+  useEffectImpl(() => {
     node.__attach();
     if (prevNodeRef.current != null) {
       const prevNode = prevNodeRef.current;

packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js

@@ -286,6 +286,11 @@ const definitions: FeatureFlagDefinitions = {
       description:
         'Enables use of AnimatedObject for animating transform values.',
     },
+    shouldUseDebouncedEffectsForAnimated: {
+      defaultValue: false,
+      description:
+        'Use new `useDebouncedEffects` hook for manging animated props lifecycle.',
+    },
     shouldUseRemoveClippedSubviewsAsDefaultOnIOS: {
       defaultValue: false,
       description:

packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js

@@ -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<<453a0231b2d396d59727425f008c65b8>>
+ * @generated SignedSource<<600cf82829a6912271f0e5d4cde3f9c8>>
  * @flow strict-local
  */
 
@@ -33,6 +33,7 @@ export type ReactNativeFeatureFlagsJsOnly = {
   isLayoutAnimationEnabled: Getter<boolean>,
   shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean>,
   shouldUseAnimatedObjectForTransform: Getter<boolean>,
+  shouldUseDebouncedEffectsForAnimated: Getter<boolean>,
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
   shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean>,
@@ -125,6 +126,11 @@ export const shouldSkipStateUpdatesForLoopingAnimations: Getter<boolean> = creat
  */
 export const shouldUseAnimatedObjectForTransform: Getter<boolean> = createJavaScriptFlagGetter('shouldUseAnimatedObjectForTransform', false);
 
+/**
+ * Use new `useDebouncedEffects` hook for manging animated props lifecycle.
+ */
+export const shouldUseDebouncedEffectsForAnimated: Getter<boolean> = createJavaScriptFlagGetter('shouldUseDebouncedEffectsForAnimated', false);
+
 /**
  * removeClippedSubviews prop will be used as the default in FlatList on iOS to match Android
  */