Animated: Hoist Non-Lifecycle Logic from useAnimatedPropsLifecycle (facebook#48877)

Summary:
Pull Request resolved: facebook#48877

This is a minor refactor to hoist logic that is not actually specific to the `AnimatedProps` lifecycle out of the hook named `useAnimatedPropsLifecycle`.

This will make it easier to iterate on the implementation of `useAnimatedPropsLifecycle` using a feature flag in a subsequent diff.

This has no behavior change.

Changelog:
[Internal]

Reviewed By: javache

Differential Revision: D68516034

fbshipit-source-id: 2cd6d9b0f2a5c0ada10cf01c8c14ed5510fbf25a

Author: yungsters

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

@@ -58,6 +58,26 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
   const useNativePropsInFabric =
     ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
 
+  useEffect(() => {
+    // If multiple components call `flushQueue`, the first one will flush the
+    // queue and subsequent ones will do nothing.
+    NativeAnimatedHelper.API.flushQueue();
+    let drivenAnimationEndedListener: ?EventSubscription = null;
+    if (node.__isNative) {
+      drivenAnimationEndedListener =
+        NativeAnimatedHelper.nativeEventEmitter.addListener(
+          'onUserDrivenAnimationEnded',
+          data => {
+            node.update();
+          },
+        );
+    }
+
+    return () => {
+      drivenAnimationEndedListener?.remove();
+    };
+  });
+
   useAnimatedPropsLifecycle(node);
 
   // TODO: This "effect" does three things:
@@ -232,27 +252,6 @@ function useAnimatedPropsLifecycle(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();
-    let drivenAnimationEndedListener: ?EventSubscription = null;
-    if (node.__isNative) {
-      drivenAnimationEndedListener =
-        NativeAnimatedHelper.nativeEventEmitter.addListener(
-          'onUserDrivenAnimationEnded',
-          data => {
-            node.update();
-          },
-        );
-    }
-
-    return () => {
-      drivenAnimationEndedListener?.remove();
-    };
-  });
-
   useInsertionEffect(() => {
     isUnmountingRef.current = false;
     return () => {