[General] Schedule flushes instead of flushing immediately (#3830)

## Description

Currently, when creating a gesture or configuring relations,
`flushOperations` is called immediately. When rendering multiple
detectors in the same batch, this adds unnecessary overhead as it can be
done a single time at the end of the batch. This PR changes that.

I also noticed that `createGestureHandler` is scheduled on the UI
anyway, so I figured there may be no point in keeping it synchronous.

## Test plan

<details>
<summary>Used this stress test to measure impact:</summary>

```js
import React, { Profiler, useEffect, useRef } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { GestureDetector, usePan } from 'react-native-gesture-handler';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';

const DATA = new Array(500).fill(null).map((_, i) => `Item ${i + 1}`);

function Item() {
  const translateX = useSharedValue(0);

  const style = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: translateX.value }],
    };
  });

  const pan = usePan({
    onUpdate: (event) => {
      'worklet';
      translateX.value += event.handlerData.changeX;
    },
  });

  return (
    <View style={{ height: 80, padding: 16, backgroundColor: 'gray' }}>
      <GestureDetector gesture={pan}>
        {/* <View collapsable={false} style={{opacity: 0.5}}> */}
        <Animated.View
          style={[
            { backgroundColor: 'red', height: '100%', aspectRatio: 1 },
            style,
          ]}
        />
        {/* </View> */}
      </GestureDetector>
    </View>
  );
}

function Benchmark() {
  return (
    <ScrollView
      style={{ flex: 1 }}
      contentContainerStyle={{ flexGrow: 1, gap: 8 }}>
      {DATA.map((_, index) => (
        <Item key={index} />
      ))}
    </ScrollView>
  );
}

const TIMES = 30;

export default function EmptyExample() {
  const times = useRef<number[]>([]).current;
  const [visible, setVisible] = React.useState(false);

  useEffect(() => {
    if (!visible && times.length < TIMES) {
      setTimeout(() => {
        setVisible(true);
      }, 24);
    }

    if (times.length === TIMES) {
      // calculate average, but remove highest and lowest
      const sortedTimes = [...times].sort((a, b) => a - b);
      sortedTimes.shift();
      sortedTimes.pop();
      const avgTime =
        sortedTimes.reduce((sum, time) => sum + time, 0) / sortedTimes.length;

      console.log(`Average render time: ${avgTime} ms`);
    }
  }, [visible]);

  return (
    <View style={styles.container}>
      {visible && (
        <Profiler
          id="v3"
          onRender={(_id, _phase, actualDuration) => {
            times.push(actualDuration);
            setTimeout(() => {
              setVisible(false);
            }, 24);
          }}>
          <Benchmark />
        </Profiler>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
```

</details>

I saw the average time fall from ~610ms to ~595ms.

---------

Co-authored-by: Michał Bert <[email protected]>

Author: j-piasecki

packages/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerModule.kt

@@ -61,16 +61,14 @@ class RNGestureHandlerModule(reactContext: ReactApplicationContext?) :
   }
 
   @ReactMethod
-  override fun createGestureHandler(handlerName: String, handlerTagDouble: Double, config: ReadableMap): Boolean {
+  override fun createGestureHandler(handlerName: String, handlerTagDouble: Double, config: ReadableMap) {
     if (ReanimatedProxy.REANIMATED_INSTALLED && !uiRuntimeDecorated) {
       uiRuntimeDecorated = decorateUIRuntime()
     }
 
     val handlerTag = handlerTagDouble.toInt()
 
     createGestureHandlerHelper<GestureHandler>(handlerName, handlerTag, config)
-
-    return true
   }
 
   @ReactMethod

packages/react-native-gesture-handler/apple/RNGestureHandlerModule.mm

@@ -119,7 +119,7 @@ - (bool)installUIRuntimeBindings
   });
 }
 
-- (NSNumber *)createGestureHandler:(NSString *)handlerName handlerTag:(double)handlerTag config:(NSDictionary *)config
+- (void)createGestureHandler:(NSString *)handlerName handlerTag:(double)handlerTag config:(NSDictionary *)config
 {
   if (!_checkedIfReanimatedIsAvailable) {
     _isReanimatedAvailable = [self.moduleRegistry moduleForName:"ReanimatedModule"] != nil;
@@ -132,8 +132,6 @@ - (NSNumber *)createGestureHandler:(NSString *)handlerName handlerTag:(double)ha
   [self addOperationBlock:^(RNGestureHandlerManager *manager) {
     [manager createGestureHandler:handlerName tag:[NSNumber numberWithDouble:handlerTag] config:config];
   }];
-
-  return @1;
 }
 
 - (void)attachGestureHandler:(double)handlerTag newView:(double)viewTag actionType:(double)actionType

packages/react-native-gesture-handler/src/specs/NativeRNGestureHandlerModule.ts

@@ -10,7 +10,7 @@ export interface Spec extends TurboModule {
     // Record<> is not supported by codegen
     // eslint-disable-next-line @typescript-eslint/ban-types
     config: Object
-  ) => boolean;
+  ) => void;
   attachGestureHandler: (
     handlerTag: Double,
     newView: Double,

packages/react-native-gesture-handler/src/v3/detectors/utils.ts

@@ -4,6 +4,7 @@
 // For `waitFor` we need array as order of the gestures matters.
 // For `simultaneousHandlers` we use Set as the order doesn't matter.
 
+import { scheduleFlushOperations } from '../../handlers/utils';
 import RNGestureHandlerModule from '../../RNGestureHandlerModule';
 import { tagMessage } from '../../utils';
 import {
@@ -148,7 +149,7 @@ export function configureRelations<THandlerData, TConfig>(
     );
   }
 
-  RNGestureHandlerModule.flushOperations();
+  scheduleFlushOperations();
 }
 
 export function ensureNativeDetectorComponent(

packages/react-native-gesture-handler/src/v3/hooks/useGesture.ts

@@ -11,6 +11,7 @@ import {
 } from './utils';
 import { tagMessage } from '../../utils';
 import { BaseGestureConfig, SingleGesture, SingleGestureName } from '../types';
+import { scheduleFlushOperations } from '../../handlers/utils';
 
 export function useGesture<THandlerData, TConfig>(
   type: SingleGestureName,
@@ -81,20 +82,21 @@ export function useGesture<THandlerData, TConfig>(
   ) {
     currentGestureRef.current = { type, tag };
     RNGestureHandlerModule.createGestureHandler(type, tag, {});
-    RNGestureHandlerModule.flushOperations();
+    // It's possible that this can cause errors about handler not being created when attempting to mount NativeDetector
+    scheduleFlushOperations();
   }
 
   useEffect(() => {
     return () => {
       RNGestureHandlerModule.dropGestureHandler(tag);
-      RNGestureHandlerModule.flushOperations();
+      scheduleFlushOperations();
     };
   }, [type, tag]);
 
   useEffect(() => {
     const preparedConfig = prepareConfigForNativeSide(type, config);
     RNGestureHandlerModule.setGestureHandlerConfig(tag, preparedConfig);
-    RNGestureHandlerModule.flushOperations();
+    scheduleFlushOperations();
 
     bindSharedValues(config, tag);