Replace setImmediate and requestAnimationFrame with `queueMicrota…

…sk` (#2467)

## Description

- `setImmediate` is not available on web & when using
server-side-rendering
- `requestAnimationFrame` is not available when using
server-side-rendering

## Test plan

Test on Example and FabricExample apps.

src/handlers/createHandler.tsx

@@ -174,16 +174,17 @@ export default function createHandler<
     private handlerTag: number;
     private config: Record<string, unknown>;
     private propsRef: React.MutableRefObject<unknown>;
+    private isMountedRef: React.MutableRefObject<boolean | null>;
     private viewNode: any;
     private viewTag?: number;
-    private updateEnqueued: ReturnType<typeof setImmediate> | null = null;
     private inspectorToggleListener?: EmitterSubscription;
 
     constructor(props: T & InternalEventHandlers) {
       super(props);
       this.handlerTag = getNextHandlerTag();
       this.config = {};
       this.propsRef = React.createRef();
+      this.isMountedRef = React.createRef();
       this.state = { allowTouches };
       if (props.id) {
         if (handlerIDToTag[props.id] !== undefined) {
@@ -195,6 +196,7 @@ export default function createHandler<
 
     componentDidMount() {
       const props: HandlerProps<U> = this.props;
+      this.isMountedRef.current = true;
 
       if (DEV_ON_ANDROID) {
         this.inspectorToggleListener = DeviceEventEmitter.addListener(
@@ -209,11 +211,10 @@ export default function createHandler<
         // If there are unresolved refs (e.g. ".current" has not yet been set)
         // passed as `simultaneousHandlers` or `waitFor`, we enqueue a call to
         // _update method that will try to update native handler props using
-        // setImmediate. This makes it so update() function gets called after all
+        // queueMicrotask. This makes it so update() function gets called after all
         // react components are mounted and we expect the missing ref object to
         // be resolved by then.
-        this.updateEnqueued = setImmediate(() => {
-          this.updateEnqueued = null;
+        queueMicrotask(() => {
           this.update(UNRESOLVED_REFS_RETRY_LIMIT);
         });
       }
@@ -239,11 +240,9 @@ export default function createHandler<
 
     componentWillUnmount() {
       this.inspectorToggleListener?.remove();
+      this.isMountedRef.current = false;
       RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
       scheduleFlushOperations();
-      if (this.updateEnqueued) {
-        clearImmediate(this.updateEnqueued);
-      }
       // We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context
       const handlerID: string | undefined = this.props.id;
       if (handlerID) {
@@ -367,14 +366,17 @@ export default function createHandler<
     };
 
     private update(remainingTries: number) {
+      if (!this.isMountedRef.current) {
+        return;
+      }
+
       const props: HandlerProps<U> = this.props;
 
       // When ref is set via a function i.e. `ref={(r) => refObject.current = r}` instead of
       // `ref={refObject}` it's possible that it won't be resolved in time. Seems like trying
       // again is easy enough fix.
       if (hasUnresolvedRefs(props) && remainingTries > 0) {
-        this.updateEnqueued = setImmediate(() => {
-          this.updateEnqueued = null;
+        queueMicrotask(() => {
           this.update(remainingTries - 1);
         });
       } else {

src/handlers/gestureHandlerCommon.ts

@@ -191,16 +191,15 @@ export function findNodeHandle(
   return findNodeHandleRN(node);
 }
 
-let scheduledFlushOperationsId: ReturnType<
-  typeof requestAnimationFrame
-> | null = null;
+let flushOperationsScheduled = false;
 
 export function scheduleFlushOperations() {
-  if (scheduledFlushOperationsId === null) {
-    scheduledFlushOperationsId = requestAnimationFrame(() => {
+  if (!flushOperationsScheduled) {
+    flushOperationsScheduled = true;
+    queueMicrotask(() => {
       RNGestureHandlerModule.flushOperations();
 
-      scheduledFlushOperationsId = null;
+      flushOperationsScheduled = false;
     });
   }
 }

src/handlers/gestures/GestureDetector.tsx

@@ -71,9 +71,6 @@ export type GestureConfigReference = {
   useReanimatedHook: boolean;
 };
 
-const scheduleUpdate =
-  Platform.OS === 'web' ? requestAnimationFrame : setImmediate;
-
 function convertToHandlerTag(ref: GestureRef): number {
   if (typeof ref === 'number') {
     return ref;
@@ -153,9 +150,9 @@ function attachHandlers({
     preparedGesture.firstExecution = false;
   }
 
-  // use scheduleUpdate to extract handlerTags, because all refs should be initialized
+  // use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
-  scheduleUpdate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -173,9 +170,9 @@ function attachHandlers({
     registerHandler(handler.handlerTag, handler, handler.config.testId);
   }
 
-  // use scheduleUpdate to extract handlerTags, because all refs should be initialized
+  // use queueMicrotask to extract handlerTags, because all refs should be initialized
   // when it's ran
-  scheduleUpdate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }
@@ -260,10 +257,10 @@ function updateHandlers(
     }
   }
 
-  // use scheduleUpdate to extract handlerTags, because when it's ran, all refs should be updated
+  // use queueMicrotask to extract handlerTags, because when it's ran, all refs should be updated
   // and handlerTags in BaseGesture references should be updated in the loop above (we need to wait
   // in case of external relations)
-  scheduleUpdate(() => {
+  queueMicrotask(() => {
     if (!mountedRef.current) {
       return;
     }

src/web_hammer/GestureHandler.ts

@@ -508,7 +508,7 @@ abstract class GestureHandler {
         .filter((v) => v);
 
       if (shouldUseTouchEvents !== this.shouldUseTouchEvents(props)) {
-        requestAnimationFrame(() => {
+        queueMicrotask(() => {
           // if the undelying event API needs to be changed, we need to unmount and mount
           // the hammer instance again.
           this.destroy();