[General] Reduce number of created closures (#3853)

## Description

I noticed that `useGestureCallbacks` still took significant time to run,
despite not doing that much. I narrowed it down to the fact that it
created a lot of closures for different events, while we only need two:
one for JS and the other for Reanimated.

This PR refactors how the state machine is created for gestures to
reduce the number of closures created to 2 per `useGestureCallbacks`
call.

## Test plan

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

```jsx
import React, { Profiler, useEffect, useRef } from 'react';
import { ScrollView, StyleSheet, View } from 'react-native';
import { Gesture, GestureDetector, usePanGesture } 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(500).fill(null).map((_, i) => `Item ${i + 1}`);

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

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

  const pan = usePanGesture({
    disableReanimated: false,
    onUpdate: (event) => {
      'worklet';
      console.log('pan onUpdate', event.changeX);
    },
    onActivate: () => {
      'worklet';
      console.log('pan onStart', _WORKLET);
    },
    onDeactivate: () => {
      'worklet';
      console.log('pan onEnd');
    },
    onBegin: () => {
      'worklet';
      console.log('pan onBegin');
    },
    onFinalize: () => {
      'worklet';
      console.log('pan onFinalize');
    },
    onTouchesDown: () => {
      'worklet';
      console.log('pan onTouchesDown');
    },
  });

  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 = 35;

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.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|After|
|-|-|-|
|Reanimated|549ms|519ms|
|No reanimated|472ms|460ms|

Author: j-piasecki

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

@@ -0,0 +1,127 @@
+import {
+  flattenAndFilterEvent,
+  isEventForHandlerWithTag,
+  maybeExtractNativeEvent,
+  runCallback,
+  touchEventTypeToCallbackType,
+} from '../utils';
+import { tagMessage } from '../../../utils';
+import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper';
+import {
+  ChangeCalculatorType,
+  GestureCallbacks,
+  GestureHandlerEventWithHandlerData,
+  GestureStateChangeEventWithHandlerData,
+  GestureUpdateEventWithHandlerData,
+} from '../../types';
+import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
+import { State } from '../../../State';
+import { TouchEventType } from '../../../TouchEventType';
+import { GestureTouchEvent } from '../../../handlers/gestureHandlerCommon';
+
+function handleStateChangeEvent<THandlerData>(
+  eventWithData: GestureStateChangeEventWithHandlerData<THandlerData>,
+  callbacks: GestureCallbacks<THandlerData>,
+  context: ReanimatedContext<THandlerData>
+) {
+  'worklet';
+  const { oldState, state } = eventWithData;
+  const event = flattenAndFilterEvent(eventWithData);
+
+  if (oldState === State.UNDETERMINED && state === State.BEGAN) {
+    runCallback(CALLBACK_TYPE.BEGAN, callbacks, event);
+  } else if (
+    (oldState === State.BEGAN || oldState === State.UNDETERMINED) &&
+    state === State.ACTIVE
+  ) {
+    runCallback(CALLBACK_TYPE.START, callbacks, event);
+  } else if (oldState !== state && state === State.END) {
+    if (oldState === State.ACTIVE) {
+      runCallback(CALLBACK_TYPE.END, callbacks, event, true);
+    }
+    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, true);
+
+    if (context) {
+      context.lastUpdateEvent = undefined;
+    }
+  } else if (
+    (state === State.FAILED || state === State.CANCELLED) &&
+    state !== oldState
+  ) {
+    if (oldState === State.ACTIVE) {
+      runCallback(CALLBACK_TYPE.END, callbacks, event, false);
+    }
+    runCallback(CALLBACK_TYPE.FINALIZE, callbacks, event, false);
+
+    if (context) {
+      context.lastUpdateEvent = undefined;
+    }
+  }
+}
+
+export function handleUpdateEvent<THandlerData>(
+  eventWithData: GestureUpdateEventWithHandlerData<THandlerData>,
+  handlers: GestureCallbacks<THandlerData>,
+  changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined,
+  context: ReanimatedContext<THandlerData>
+) {
+  'worklet';
+  const eventWithChanges = changeEventCalculator
+    ? changeEventCalculator(
+        eventWithData,
+        context ? context.lastUpdateEvent : undefined
+      )
+    : eventWithData;
+
+  const event = flattenAndFilterEvent(eventWithChanges);
+
+  // This should never happen, but since we don't want to call hooks conditionally, we have to mark
+  // context as possibly undefined to make TypeScript happy.
+  if (!context) {
+    throw new Error(tagMessage('Event handler context is not defined'));
+  }
+
+  runCallback(CALLBACK_TYPE.UPDATE, handlers, event);
+
+  context.lastUpdateEvent = eventWithData;
+}
+
+export function handleTouchEvent<THandlerData>(
+  event: GestureTouchEvent,
+  handlers: GestureCallbacks<THandlerData>
+) {
+  'worklet';
+
+  if (event.eventType !== TouchEventType.UNDETERMINED) {
+    runCallback(touchEventTypeToCallbackType(event.eventType), handlers, event);
+  }
+}
+
+export function eventHandler<THandlerData>(
+  handlerTag: number,
+  sourceEvent: GestureHandlerEventWithHandlerData<THandlerData>,
+  handlers: GestureCallbacks<THandlerData>,
+  changeEventCalculator: ChangeCalculatorType<THandlerData> | undefined,
+  jsContext: ReanimatedContext<THandlerData>,
+  dispatchesAnimatedEvents: boolean
+) {
+  'worklet';
+  const eventWithData = maybeExtractNativeEvent(sourceEvent);
+
+  if (!isEventForHandlerWithTag(handlerTag, eventWithData)) {
+    return;
+  }
+
+  if ('oldState' in eventWithData && eventWithData.oldState !== undefined) {
+    handleStateChangeEvent(eventWithData, handlers, jsContext);
+  } else if ('allTouches' in eventWithData) {
+    handleTouchEvent(eventWithData, handlers);
+  } else if (!dispatchesAnimatedEvents) {
+    handleUpdateEvent(
+      eventWithData,
+      handlers,
+      changeEventCalculator,
+      jsContext
+    );
+  }
+}

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

@@ -0,0 +1,39 @@
+import { ReanimatedContext } from '../../../handlers/gestures/reanimatedWrapper';
+import {
+  BaseGestureConfig,
+  GestureCallbacks,
+  GestureHandlerEventWithHandlerData,
+} from '../../types';
+import { useMemo } from 'react';
+import { eventHandler } from './eventHandler';
+
+export function useGestureEventHandler<THandlerData, TConfig>(
+  handlerTag: number,
+  handlers: GestureCallbacks<THandlerData>,
+  config: BaseGestureConfig<THandlerData, TConfig>
+) {
+  const jsContext: ReanimatedContext<THandlerData> = useMemo(() => {
+    return {
+      lastUpdateEvent: undefined,
+    };
+  }, []);
+
+  return useMemo(() => {
+    return (event: GestureHandlerEventWithHandlerData<THandlerData>) => {
+      eventHandler(
+        handlerTag,
+        event,
+        handlers,
+        config.changeEventCalculator,
+        jsContext,
+        !!config.dispatchesAnimatedEvents
+      );
+    };
+  }, [
+    handlerTag,
+    handlers,
+    config.changeEventCalculator,
+    config.dispatchesAnimatedEvents,
+    jsContext,
+  ]);
+}

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import {
   Reanimated,
   ReanimatedHandler,
@@ -7,53 +8,47 @@ import {
   GestureCallbacks,
   UnpackedGestureHandlerEventWithHandlerData,
 } from '../../types';
-import { getStateChangeHandler } from './stateChangeHandler';
-import { getTouchEventHandler } from './touchEventHandler';
-import { getUpdateHandler } from './updateHandler';
+import { eventHandler } from './eventHandler';
+
+const workletNOOP = () => {
+  'worklet';
+  // no-op
+};
 
 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 workletizedHandlers = useMemo(() => {
+    // 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)) {
+      return {
+        ...handlers,
+        onUpdate: workletNOOP,
+      };
+    }
 
-  const touchCallback = getTouchEventHandler(handlerTag, handlers);
+    return handlers;
+  }, [handlers]);
 
   const callback = (
     event: UnpackedGestureHandlerEventWithHandlerData<THandlerData>
   ) => {
     'worklet';
-    if ('oldState' in event && event.oldState !== undefined) {
-      stateChangeCallback(event);
-    } else if ('allTouches' in event) {
-      touchCallback(event);
-    } else {
-      updateCallback(event);
-    }
+    eventHandler(
+      handlerTag,
+      event,
+      workletizedHandlers,
+      changeEventCalculator,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      reanimatedHandler?.context!,
+      false
+    );
   };
 
   const reanimatedEvent = Reanimated?.useEvent(

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

@@ -33,24 +33,11 @@ export function useGesture<THandlerData, TConfig>(
 
   // TODO: Call only necessary hooks depending on which callbacks are defined (?)
   const {
-    onGestureHandlerStateChange,
     onGestureHandlerEvent,
-    onGestureHandlerTouchEvent,
     onReanimatedEvent,
     onGestureHandlerAnimatedEvent,
   } = useGestureCallbacks(tag, config);
 
-  // This should never happen, but since we don't want to call hooks conditionally,
-  // we have to mark these as possibly undefined to make TypeScript happy.
-  if (
-    !onGestureHandlerStateChange ||
-    // If onUpdate is an AnimatedEvent, `onGestureHandlerEvent` will be undefined and vice versa.
-    (!onGestureHandlerEvent && !onGestureHandlerAnimatedEvent) ||
-    !onGestureHandlerTouchEvent
-  ) {
-    throw new Error(tagMessage('Failed to create event handlers.'));
-  }
-
   if (config.shouldUseReanimatedDetector && !onReanimatedEvent) {
     throw new Error(tagMessage('Failed to create reanimated event handlers.'));
   }
@@ -95,14 +82,14 @@ export function useGesture<THandlerData, TConfig>(
   }, [tag, config, type]);
 
   return useMemo(
-    () => ({
+    (): SingleGesture<THandlerData, TConfig> => ({
       tag,
       type,
       config,
       detectorCallbacks: {
-        onGestureHandlerStateChange,
-        onGestureHandlerEvent,
-        onGestureHandlerTouchEvent,
+        onGestureHandlerStateChange: onGestureHandlerEvent,
+        onGestureHandlerEvent: onGestureHandlerEvent,
+        onGestureHandlerTouchEvent: onGestureHandlerEvent,
         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
@@ -128,9 +115,7 @@ export function useGesture<THandlerData, TConfig>(
       tag,
       type,
       config,
-      onGestureHandlerStateChange,
       onGestureHandlerEvent,
-      onGestureHandlerTouchEvent,
       onReanimatedEvent,
       onGestureHandlerAnimatedEvent,
       gestureRelations,