diff --git a/packages/react-native/Libraries/Animated/useAnimatedProps.js b/packages/react-native/Libraries/Animated/useAnimatedProps.js index 97472a9f53c..1d1dadf017f 100644 --- a/packages/react-native/Libraries/Animated/useAnimatedProps.js +++ b/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; diff --git a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js b/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js index a85eb9e1dac..2bb8924b9b6 100644 --- a/packages/react-native/scripts/featureflags/ReactNativeFeatureFlags.config.js +++ b/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: diff --git a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js b/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js index 37ac42ca720..3d2ac1398e0 100644 --- a/packages/react-native/src/private/featureflags/ReactNativeFeatureFlags.js +++ b/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, shouldSkipStateUpdatesForLoopingAnimations: Getter, shouldUseAnimatedObjectForTransform: Getter, + shouldUseDebouncedEffectsForAnimated: Getter, shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter, shouldUseSetNativePropsInFabric: Getter, shouldUseSetNativePropsInNativeAnimationsInFabric: Getter, @@ -125,6 +126,11 @@ export const shouldSkipStateUpdatesForLoopingAnimations: Getter = creat */ export const shouldUseAnimatedObjectForTransform: Getter = createJavaScriptFlagGetter('shouldUseAnimatedObjectForTransform', false); +/** + * Use new `useDebouncedEffects` hook for manging animated props lifecycle. + */ +export const shouldUseDebouncedEffectsForAnimated: Getter = createJavaScriptFlagGetter('shouldUseDebouncedEffectsForAnimated', false); + /** * removeClippedSubviews prop will be used as the default in FlatList on iOS to match Android */