[General] Reduce the number of calls to useEvent (#3836)

## Description

During testing, I've noticed that calling `useEvent` from Reanimated is
relatively heavy. Since we're doing it three times, I thought it might
be worth exploring how much impact it has on our hooks. This PR reduces
the number of `useEvent` calls to one per gesture, which reduces the
execution time of `usePan` by ~10%. I'd assume the results for other
gestures will be the same, since they all depend on internal
`useGesture`.

## Test plan

<details>
<summary>Tested on this stress-test</summary>

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

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

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

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

  const pan = usePan({
    // disableReanimated: true,
    onUpdate: (event) => {
      'worklet';
      console.log('pan onUpdate', event.handlerData.changeX);
    },
    onStart: () => {
      'worklet';
      console.log('pan onStart');
    },
    onEnd: () => {
      'worklet';
      console.log('pan onEnd');
    },
    onBegin: () => {
      'worklet';
      console.log('pan onBegin');
    },
    onFinalize: () => {
      'worklet';
      console.log('pan onFinalize');
    },
    onTouchesDown: () => {
      'worklet';
      console.log('pan onTouchesDown');
    },
  });

  return null;
}

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

const TIMES = 35;

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

  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.shift();
      sortedTimes.pop();
      sortedTimes.pop();
      const avgTime =
        sortedTimes.reduce((sum, time) => sum + time, 0) / sortedTimes.length;

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

      // console.log(JSON.stringify(PerfMonitor.getMeasures(), null, 2));
      // PerfMonitor.clear();
    }
  }, [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>

Before: ~280ms, after: ~253ms

---------

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

Author: j-piasecki

packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper.ts

@@ -24,6 +24,11 @@ type WorkletFunction<
   TReturn = unknown,
 > = ((...args: TArgs) => TReturn) & WorkletProps;
 
+export type ReanimatedHandler<THandlerData> = {
+  doDependenciesDiffer: boolean;
+  context: ReanimatedContext<THandlerData>;
+};
+
 let Reanimated:
   | {
       default: {
@@ -33,10 +38,9 @@ let Reanimated:
           options?: unknown
         ): ComponentClass<P>;
       };
-      useHandler: <THandlerData>(handlers: GestureCallbacks<THandlerData>) => {
-        doDependenciesDiffer: boolean;
-        context: ReanimatedContext<THandlerData>;
-      };
+      useHandler: <THandlerData>(
+        handlers: GestureCallbacks<THandlerData>
+      ) => ReanimatedHandler<THandlerData>;
       useEvent: <T>(
         callback: (event: T) => void,
         events: string[],

packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureStateChangeEvent.ts

@@ -2,10 +2,12 @@ import { useMemo } from 'react';
 import { BaseGestureConfig } from '../../../types';
 import { prepareStateChangeHandlers } from '../../utils';
 import { getStateChangeHandler } from '../stateChangeHandler';
+import { ReanimatedContext } from 'packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper';
 
 export function useGestureStateChangeEvent<THandlerData, TConfig>(
   handlerTag: number,
-  config: BaseGestureConfig<THandlerData, TConfig>
+  config: BaseGestureConfig<THandlerData, TConfig>,
+  context: ReanimatedContext<THandlerData>
 ) {
   return useMemo(() => {
     const handlers = prepareStateChangeHandlers({
@@ -14,12 +16,13 @@ export function useGestureStateChangeEvent<THandlerData, TConfig>(
       onEnd: config.onEnd,
       onFinalize: config.onFinalize,
     });
-    return getStateChangeHandler(handlerTag, handlers);
+    return getStateChangeHandler(handlerTag, handlers, context);
   }, [
     handlerTag,
     config.onBegin,
     config.onStart,
     config.onEnd,
     config.onFinalize,
+    context,
   ]);
 }

packages/react-native-gesture-handler/src/v3/hooks/callbacks/js/useGestureUpdateEvent.ts

@@ -6,7 +6,8 @@ import { useMemo } from 'react';
 
 export function useGestureUpdateEvent<THandlerData, TConfig>(
   handlerTag: number,
-  config: BaseGestureConfig<THandlerData, TConfig>
+  config: BaseGestureConfig<THandlerData, TConfig>,
+  jsContext: ReanimatedContext<THandlerData>
 ) {
   return useMemo(() => {
     const { handlers, changeEventCalculator } = prepareUpdateHandlers(
@@ -16,10 +17,6 @@ export function useGestureUpdateEvent<THandlerData, TConfig>(
       config.changeEventCalculator
     );
 
-    const jsContext: ReanimatedContext<THandlerData> = {
-      lastUpdateEvent: undefined,
-    };
-
     return config.dispatchesAnimatedEvents
       ? undefined
       : getUpdateHandler(
@@ -33,5 +30,6 @@ export function useGestureUpdateEvent<THandlerData, TConfig>(
     config.onUpdate,
     config.dispatchesAnimatedEvents,
     config.changeEventCalculator,
+    jsContext,
   ]);
 }

packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedStateChangeEvent.ts

@@ -1,3 +1,4 @@
+import { ReanimatedContext } from 'packages/react-native-gesture-handler/src/handlers/gestures/reanimatedWrapper';
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import { State } from '../../../State';
 import {
@@ -13,7 +14,8 @@ import {
 
 export function getStateChangeHandler<THandlerData>(
   handlerTag: number,
-  callbacks: GestureCallbacks<THandlerData>
+  callbacks: GestureCallbacks<THandlerData>,
+  context?: ReanimatedContext<THandlerData>
 ) {
   return (sourceEvent: StateChangeEvent<THandlerData>) => {
     'worklet';
@@ -39,6 +41,10 @@ export function getStateChangeHandler<THandlerData>(
         runCallback(CALLBACK_TYPE.END, callbacks, event, true);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
+
+      if (context) {
+        context.lastUpdateEvent = undefined;
+      }
     } else if (
       (event.state === State.FAILED || event.state === State.CANCELLED) &&
       event.state !== event.oldState
@@ -47,6 +53,10 @@ export function getStateChangeHandler<THandlerData>(
         runCallback(CALLBACK_TYPE.END, callbacks, event, false);
       }
       runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);
+
+      if (context) {
+        context.lastUpdateEvent = undefined;
+      }
     }
   };
 }

packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedTouchEvent.ts

@@ -0,0 +1,68 @@
+import {
+  Reanimated,
+  ReanimatedHandler,
+} from '../../../handlers/gestures/reanimatedWrapper';
+import {
+  ChangeCalculatorType,
+  GestureCallbacks,
+  UnpackedGestureHandlerEvent,
+} from '../../types';
+import { getStateChangeHandler } from './stateChangeHandler';
+import { getTouchEventHandler } from './touchEventHandler';
+import { getUpdateHandler } from './updateHandler';
+
+export function useReanimatedEventHandler<THandlerData>(
+  handlerTag: number,
+  handlers: GestureCallbacks<THandlerData>,
+  reanimatedHandler: ReanimatedHandler<THandlerData> | undefined,
+  changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined
+) {
+  // We don't want to call hooks conditionally, `useEvent` will be always called.
+  // The only difference is whether we will send events to Reanimated or not.
+  // The problem here is that if someone passes `Animated.event` as `onUpdate` prop,
+  // it won't be workletized and therefore `useHandler` will throw. In that case we override it to empty `worklet`.
+  if (!Reanimated?.isWorkletFunction(handlers.onUpdate)) {
+    handlers.onUpdate = () => {
+      'worklet';
+      // no-op
+    };
+  }
+
+  const stateChangeCallback = getStateChangeHandler(
+    handlerTag,
+    handlers,
+    reanimatedHandler?.context
+  );
+
+  const updateCallback = getUpdateHandler(
+    handlerTag,
+    handlers,
+    reanimatedHandler?.context,
+    changeEventCalculator
+  );
+
+  const touchCallback = getTouchEventHandler(handlerTag, handlers);
+
+  const callback = (event: UnpackedGestureHandlerEvent<THandlerData>) => {
+    'worklet';
+    if ('oldState' in event && event.oldState !== undefined) {
+      stateChangeCallback(event);
+    } else if ('allTouches' in event) {
+      touchCallback(event);
+    } else {
+      updateCallback(event);
+    }
+  };
+
+  const reanimatedEvent = Reanimated?.useEvent(
+    callback,
+    [
+      'onGestureHandlerReanimatedEvent',
+      'onGestureHandlerReanimatedStateChange',
+      'onGestureHandlerReanimatedTouchEvent',
+    ],
+    !!reanimatedHandler?.doDependenciesDiffer
+  );
+
+  return reanimatedEvent;
+}

packages/react-native-gesture-handler/src/v3/hooks/callbacks/reanimated/useReanimatedUpdateEvent.ts

@@ -10,6 +10,7 @@ import {
 } from './utils';
 import { tagMessage } from '../../utils';
 import { BaseGestureConfig, SingleGesture, SingleGestureName } from '../types';
+import { Platform } from 'react-native';
 import { NativeProxy } from '../NativeProxy';
 
 export function useGesture<THandlerData, TConfig>(
@@ -35,9 +36,7 @@ export function useGesture<THandlerData, TConfig>(
     onGestureHandlerStateChange,
     onGestureHandlerEvent,
     onGestureHandlerTouchEvent,
-    onReanimatedStateChange,
-    onReanimatedUpdateEvent,
-    onReanimatedTouchEvent,
+    onReanimatedEvent,
     onGestureHandlerAnimatedEvent,
   } = useGestureCallbacks(tag, config);
 
@@ -52,12 +51,7 @@ export function useGesture<THandlerData, TConfig>(
     throw new Error(tagMessage('Failed to create event handlers.'));
   }
 
-  if (
-    config.shouldUseReanimatedDetector &&
-    (!onReanimatedStateChange ||
-      !onReanimatedUpdateEvent ||
-      !onReanimatedTouchEvent)
-  ) {
+  if (config.shouldUseReanimatedDetector && !onReanimatedEvent) {
     throw new Error(tagMessage('Failed to create reanimated event handlers.'));
   }
 
@@ -109,10 +103,24 @@ export function useGesture<THandlerData, TConfig>(
         onGestureHandlerStateChange,
         onGestureHandlerEvent,
         onGestureHandlerTouchEvent,
-        onReanimatedStateChange,
-        onReanimatedUpdateEvent,
-        onReanimatedTouchEvent,
         onGestureHandlerAnimatedEvent,
+        // On web, we're triggering Reanimated callbacks ourselves, based on the type.
+        // To handle this properly, we need to provide all three callbacks, so we set
+        // all three to the Reanimated event handler.
+        // On native, Reanimated handles routing internally based on the event names
+        // passed to the useEvent hook. We only need to pass it once, so that Reanimated
+        // can setup its internal listeners.
+        ...(Platform.OS === 'web'
+          ? {
+              onReanimatedUpdateEvent: onReanimatedEvent,
+              onReanimatedStateChange: onReanimatedEvent,
+              onReanimatedTouchEvent: onReanimatedEvent,
+            }
+          : {
+              onReanimatedUpdateEvent: onReanimatedEvent,
+              onReanimatedStateChange: undefined,
+              onReanimatedTouchEvent: undefined,
+            }),
       },
       gestureRelations,
     }),
@@ -123,9 +131,7 @@ export function useGesture<THandlerData, TConfig>(
       onGestureHandlerStateChange,
       onGestureHandlerEvent,
       onGestureHandlerTouchEvent,
-      onReanimatedStateChange,
-      onReanimatedUpdateEvent,
-      onReanimatedTouchEvent,
+      onReanimatedEvent,
       onGestureHandlerAnimatedEvent,
       gestureRelations,
     ]