Flush animation queue directly in useAnimatedProps

Summary:
changelog: [internal]

Call flushQueue directly from useAnimatedProps to avoid mismatch between `NativeAnimatedHelper.API.setWaitingForIdentifier` and `NativeAnimatedHelper.API.unsetWaitingForIdentifier`

Previously, animation queue only got called if every `setWaitingForIdentifier` call was matched by `unsetWaitingForIdentifier`. If an error is thrown, this is not the case and they get out of sync. WHen they get out of sync, they never recover and animation queue is never flushedddddd.

Reviewed By: yungsters

Differential Revision: D38938858

fbshipit-source-id: c38fdef05cc70ce274b8e16114ffe49cc2dcb9b3

Author: sammy-SC

Libraries/Animated/useAnimatedProps.js

@@ -21,7 +21,6 @@ import {
   useMemo,
   useReducer,
   useRef,
-  useState,
 } from 'react';
 
 type ReducedProps<TProps> = {
@@ -31,8 +30,6 @@ type ReducedProps<TProps> = {
 };
 type CallbackRef<T> = T => mixed;
 
-let animatedComponentNextId = 1;
-
 export default function useAnimatedProps<TProps: {...}, TInstance>(
   props: TProps,
 ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
@@ -141,16 +138,11 @@ function useAnimatedPropsLifecycle(node: AnimatedProps): void {
   const prevNodeRef = useRef<?AnimatedProps>(null);
   const isUnmountingRef = useRef<boolean>(false);
 
-  const [animatedComponentId] = useState(
-    () => `${animatedComponentNextId++}:animatedComponent`,
-  );
-
-  useLayoutEffect(() => {
-    NativeAnimatedHelper.API.setWaitingForIdentifier(animatedComponentId);
-  });
-
   useEffect(() => {
-    NativeAnimatedHelper.API.unsetWaitingForIdentifier(animatedComponentId);
+    // 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(() => {