ship use of passive effects in Animated (#45893)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/45893

changelog: [internal]

This is mainly impact for the Event Loop where setting up of animation graph will no longer block paint.

Reviewed By: rubennorte

Differential Revision: D60648823

fbshipit-source-id: 8efa1dac2a42b14a609adae05e9266f78a181d43

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

@@ -52,11 +52,6 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   const useSetNativePropsInNativeAnimationsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInNativeAnimationsInFabric();
 
-  const useAnimatedPropsLifecycle =
-    ReactNativeFeatureFlags.usePassiveEffectsForAnimations()
-      ? useAnimatedPropsLifecycle_passiveEffects
-      : useAnimatedPropsLifecycle_layoutEffects;
-
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -193,51 +188,6 @@ function reduceAnimatedProps<TProps>(
   };
 }
 
-/**
- * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
- * and `__detach`. However, this is more complicated because `AnimatedProps`
- * uses reference counting to determine when to recursively detach its children
- * nodes. So in order to optimize this, we avoid detaching until the next attach
- * unless we are unmounting.
- */
-function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
-  const prevNodeRef = useRef<?AnimatedProps>(null);
-  const isUnmountingRef = useRef<boolean>(false);
-
-  useEffect(() => {
-    // It is ok for multiple components to call `flushQueue` because it noops
-    // if the queue is empty. When multiple animated components are mounted at
-    // the same time. Only first component flushes the queue and the others will noop.
-    NativeAnimatedHelper.API.flushQueue();
-  });
-
-  useLayoutEffect(() => {
-    isUnmountingRef.current = false;
-    return () => {
-      isUnmountingRef.current = true;
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    node.__attach();
-    if (prevNodeRef.current != null) {
-      const prevNode = prevNodeRef.current;
-      // TODO: Stop restoring default values (unless `reset` is called).
-      prevNode.__restoreDefaultValues();
-      prevNode.__detach();
-      prevNodeRef.current = null;
-    }
-    return () => {
-      if (isUnmountingRef.current) {
-        // NOTE: Do not restore default values on unmount, see D18197735.
-        node.__detach();
-      } else {
-        prevNodeRef.current = node;
-      }
-    };
-  }, [node]);
-}
-
 /**
  * Manages the lifecycle of the supplied `AnimatedProps` by invoking `__attach`
  * and `__detach`. However, this is more complicated because `AnimatedProps`
@@ -245,9 +195,8 @@ function useAnimatedPropsLifecycle_layoutEffects(node: AnimatedProps): void {
  * nodes. So in order to optimize this, we avoid detaching until the next attach
  * unless we are unmounting.
  *
- * NOTE: unlike `useAnimatedPropsLifecycle_layoutEffects`, this version uses passive effects to setup animation graph.
  */
-function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
+function useAnimatedPropsLifecycle(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 

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

@@ -300,11 +300,6 @@ const definitions: FeatureFlagDefinitions = {
       description:
         'Enables use of setNativeProps in Native driven animations in Fabric.',
     },
-    usePassiveEffectsForAnimations: {
-      defaultValue: false,
-      description:
-        'Enable a variant of useAnimatedPropsLifecycle hook that constructs the animation graph in passive effect instead of layout effect',
-    },
     useRefsForTextInputState: {
       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<<0b57a2e853d1f2872ddf0c0b610805bb>>
+ * @generated SignedSource<<a3dcd2d00c25e85277416a43a1a27b1c>>
  * @flow strict-local
  */
 
@@ -36,7 +36,6 @@ export type ReactNativeFeatureFlagsJsOnly = {
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
   shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean>,
-  usePassiveEffectsForAnimations: Getter<boolean>,
   useRefsForTextInputState: Getter<boolean>,
 };
 
@@ -140,11 +139,6 @@ export const shouldUseSetNativePropsInFabric: Getter<boolean> = createJavaScript
  */
 export const shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean> = createJavaScriptFlagGetter('shouldUseSetNativePropsInNativeAnimationsInFabric', false);
 
-/**
- * Enable a variant of useAnimatedPropsLifecycle hook that constructs the animation graph in passive effect instead of layout effect
- */
-export const usePassiveEffectsForAnimations: Getter<boolean> = createJavaScriptFlagGetter('usePassiveEffectsForAnimations', false);
-
 /**
  * Enable a variant of TextInput that moves some state to refs to avoid unnecessary re-renders
  */