Revert D60648823: ship use of passive effects in Animated

Differential Revision:
D60648823

Original commit changeset: 8efa1dac2a42

Original Phabricator Diff: D60648823

fbshipit-source-id: 6deb00df29f8e2ba8cb58d252c40144d2bed229e

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

@@ -52,6 +52,11 @@ 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:
@@ -194,9 +199,55 @@ function reduceAnimatedProps<TProps>(
  * 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(node: AnimatedProps): void {
+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`
+ * 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.
+ *
+ * NOTE: unlike `useAnimatedPropsLifecycle_layoutEffects`, this version uses passive effects to setup animation graph.
+ */
+function useAnimatedPropsLifecycle_passiveEffects(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 

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

@@ -300,6 +300,11 @@ 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<<a3dcd2d00c25e85277416a43a1a27b1c>>
+ * @generated SignedSource<<0b57a2e853d1f2872ddf0c0b610805bb>>
  * @flow strict-local
  */
 
@@ -36,6 +36,7 @@ export type ReactNativeFeatureFlagsJsOnly = {
   shouldUseRemoveClippedSubviewsAsDefaultOnIOS: Getter<boolean>,
   shouldUseSetNativePropsInFabric: Getter<boolean>,
   shouldUseSetNativePropsInNativeAnimationsInFabric: Getter<boolean>,
+  usePassiveEffectsForAnimations: Getter<boolean>,
   useRefsForTextInputState: Getter<boolean>,
 };
 
@@ -139,6 +140,11 @@ 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
  */