Apply more granular memoization (#3815)

## Description

Hooks and utils for creating event handlers and gesture relations were
always relying on the entire config, while they require only a subset of
its fields. This PR changes those to only work with what they actually
need and updates the dependency arrays.

## Test plan

Verify that created handlers are stable between renders, assuming the
original callback is memoized.

Author: j-piasecki

packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import HostGestureDetector from './HostGestureDetector';
 import { configureRelations, ensureNativeDetectorComponent } from './utils';
 import { isComposedGesture } from '../hooks/utils/relationUtils';
@@ -22,6 +22,10 @@ export function NativeDetector<THandlerData, TConfig>({
   ensureNativeDetectorComponent(NativeDetectorComponent);
   configureRelations(gesture);
 
+  const handlerTags = useMemo(() => {
+    return isComposedGesture(gesture) ? gesture.tags : [gesture.tag];
+  }, [gesture]);
+
   return (
     <NativeDetectorComponent
       // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
@@ -50,7 +54,7 @@ export function NativeDetector<THandlerData, TConfig>({
         gesture.detectorCallbacks.onGestureHandlerAnimatedEvent
       }
       moduleId={globalThis._RNGH_MODULE_ID}
-      handlerTags={isComposedGesture(gesture) ? gesture.tags : [gesture.tag]}
+      handlerTags={handlerTags}
       style={nativeDetectorStyles.detector}>
       {children}
     </NativeDetectorComponent>

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

@@ -1,14 +1,25 @@
 import { useMemo } from 'react';
 import { BaseGestureConfig } from '../../../types';
-import { extractStateChangeHandlers } from '../../utils';
+import { prepareStateChangeHandlers } from '../../utils';
 import { getStateChangeHandler } from '../stateChangeHandler';
 
 export function useGestureStateChangeEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
   return useMemo(() => {
-    const handlers = extractStateChangeHandlers(config);
+    const handlers = prepareStateChangeHandlers({
+      onBegin: config.onBegin,
+      onStart: config.onStart,
+      onEnd: config.onEnd,
+      onFinalize: config.onFinalize,
+    });
     return getStateChangeHandler(handlerTag, handlers);
-  }, [handlerTag, config]);
+  }, [
+    handlerTag,
+    config.onBegin,
+    config.onStart,
+    config.onEnd,
+    config.onFinalize,
+  ]);
 }

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

@@ -1,14 +1,25 @@
 import { useMemo } from 'react';
 import { BaseGestureConfig } from '../../../types';
-import { extractTouchHandlers } from '../../utils';
+import { prepareTouchHandlers } from '../../utils';
 import { getTouchEventHandler } from '../touchEventHandler';
 
 export function useGestureTouchEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
   return useMemo(() => {
-    const handlers = extractTouchHandlers(config);
+    const handlers = prepareTouchHandlers({
+      onTouchesDown: config.onTouchesDown,
+      onTouchesMove: config.onTouchesMove,
+      onTouchesUp: config.onTouchesUp,
+      onTouchesCancel: config.onTouchesCancel,
+    });
     return getTouchEventHandler(handlerTag, handlers);
-  }, [handlerTag, config]);
+  }, [
+    handlerTag,
+    config.onTouchesDown,
+    config.onTouchesMove,
+    config.onTouchesUp,
+    config.onTouchesCancel,
+  ]);
 }

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

@@ -1,4 +1,4 @@
-import { extractUpdateHandlers, isAnimatedEvent } from '../../utils';
+import { prepareUpdateHandlers, isAnimatedEvent } from '../../utils';
 import { ReanimatedContext } from '../../../../handlers/gestures/reanimatedWrapper';
 import { getUpdateHandler } from '../updateHandler';
 import { BaseGestureConfig } from '../../../types';
@@ -9,7 +9,12 @@ export function useGestureUpdateEvent<THandlerData, TConfig>(
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
   return useMemo(() => {
-    const { handlers, changeEventCalculator } = extractUpdateHandlers(config);
+    const { handlers, changeEventCalculator } = prepareUpdateHandlers(
+      {
+        onUpdate: config.onUpdate,
+      },
+      config.changeEventCalculator
+    );
 
     const jsContext: ReanimatedContext<THandlerData> = {
       lastUpdateEvent: undefined,
@@ -23,5 +28,5 @@ export function useGestureUpdateEvent<THandlerData, TConfig>(
           jsContext,
           changeEventCalculator
         );
-  }, [handlerTag, config]);
+  }, [handlerTag, config.onUpdate, config.changeEventCalculator]);
 }

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

@@ -1,13 +1,18 @@
 import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper';
 import { BaseGestureConfig } from '../../../types';
-import { extractStateChangeHandlers } from '../../utils';
+import { prepareStateChangeHandlers } from '../../utils';
 import { getStateChangeHandler } from '../stateChangeHandler';
 
 export function useReanimatedStateChangeEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
-  const handlers = extractStateChangeHandlers(config);
+  const handlers = prepareStateChangeHandlers({
+    onBegin: config.onBegin,
+    onStart: config.onStart,
+    onEnd: config.onEnd,
+    onFinalize: config.onFinalize,
+  });
 
   const callback = getStateChangeHandler(handlerTag, handlers);
 

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

@@ -1,13 +1,18 @@
 import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper';
 import { BaseGestureConfig } from '../../../types';
-import { extractTouchHandlers } from '../../utils';
+import { prepareTouchHandlers } from '../../utils';
 import { getTouchEventHandler } from '../touchEventHandler';
 
 export function useReanimatedTouchEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
-  const handlers = extractTouchHandlers(config);
+  const handlers = prepareTouchHandlers({
+    onTouchesDown: config.onTouchesDown,
+    onTouchesMove: config.onTouchesMove,
+    onTouchesUp: config.onTouchesUp,
+    onTouchesCancel: config.onTouchesCancel,
+  });
 
   const callback = getTouchEventHandler(handlerTag, handlers);
 

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

@@ -1,13 +1,18 @@
 import { Reanimated } from '../../../../handlers/gestures/reanimatedWrapper';
 import { BaseGestureConfig } from '../../../types';
-import { extractUpdateHandlers } from '../../utils';
+import { prepareUpdateHandlers } from '../../utils';
 import { getUpdateHandler } from '../updateHandler';
 
 export function useReanimatedUpdateEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
-  const { handlers, changeEventCalculator } = extractUpdateHandlers(config);
+  const { handlers, changeEventCalculator } = prepareUpdateHandlers(
+    {
+      onUpdate: config.onUpdate,
+    },
+    config.changeEventCalculator
+  );
 
   // We don't want to call hooks conditionally, therefore `useHandler` and `useEvent` will be always called.
   // The only difference is whether we will send events to Reanimated or not.

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

@@ -70,8 +70,16 @@ export function useGesture<THandlerData, TConfig>(
   }
 
   const gestureRelations = useMemo(
-    () => prepareRelations(config, tag),
-    [config, tag]
+    () =>
+      prepareRelations(
+        {
+          simultaneousWith: config.simultaneousWith,
+          requireToFail: config.requireToFail,
+          block: config.block,
+        },
+        tag
+      ),
+    [tag, config.simultaneousWith, config.requireToFail, config.block]
   );
 
   const currentGestureRef = useRef({ type: '', tag: -1 });

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

@@ -1,17 +1,16 @@
 import { TouchEventType } from '../../../TouchEventType';
 import { CALLBACK_TYPE } from '../../../handlers/gestures/gesture';
 import {
-  BaseGestureConfig,
   ChangeCalculatorType,
   UnpackedGestureHandlerEvent,
   GestureCallbacks,
 } from '../../types';
 
-export function extractStateChangeHandlers<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>
+export function prepareStateChangeHandlers<THandlerData>(
+  callbacks: GestureCallbacks<THandlerData>
 ): GestureCallbacks<THandlerData> {
   'worklet';
-  const { onBegin, onStart, onEnd, onFinalize } = config;
+  const { onBegin, onStart, onEnd, onFinalize } = callbacks;
 
   const handlers: GestureCallbacks<THandlerData> = {
     ...(onBegin ? { onBegin } : {}),
@@ -28,11 +27,12 @@ type UpdateHandlersReturnType<THandlerData> = {
   changeEventCalculator?: ChangeCalculatorType<THandlerData>;
 };
 
-export function extractUpdateHandlers<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>
+export function prepareUpdateHandlers<THandlerData>(
+  callbacks: GestureCallbacks<THandlerData>,
+  changeEventCalculator?: ChangeCalculatorType<THandlerData>
 ): UpdateHandlersReturnType<THandlerData> {
   'worklet';
-  const { onUpdate, changeEventCalculator } = config;
+  const { onUpdate } = callbacks;
 
   const handlers: GestureCallbacks<THandlerData> = {
     ...(onUpdate ? { onUpdate } : {}),
@@ -41,10 +41,11 @@ export function extractUpdateHandlers<THandlerData, TConfig>(
   return { handlers, changeEventCalculator };
 }
 
-export function extractTouchHandlers<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>
+export function prepareTouchHandlers<THandlerData>(
+  callbacks: GestureCallbacks<THandlerData>
 ): GestureCallbacks<THandlerData> {
-  const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancel } = config;
+  const { onTouchesDown, onTouchesMove, onTouchesUp, onTouchesCancel } =
+    callbacks;
 
   const handlers: GestureCallbacks<THandlerData> = {
     ...(onTouchesDown ? { onTouchesDown } : {}),

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

@@ -1,6 +1,6 @@
 import {
-  BaseGestureConfig,
   ComposedGesture,
+  ExternalRelations,
   Gesture,
   GestureRelations,
 } from '../../types';
@@ -58,16 +58,16 @@ function makeSimultaneousWithSymmetric(
   }
 }
 
-export function prepareRelations<THandlerData, TConfig>(
-  config: BaseGestureConfig<THandlerData, TConfig>,
+export function prepareRelations(
+  relations: ExternalRelations,
   handlerTag: number
 ): GestureRelations {
-  makeSimultaneousWithSymmetric(config.simultaneousWith, handlerTag);
+  makeSimultaneousWithSymmetric(relations.simultaneousWith, handlerTag);
 
   return {
-    simultaneousHandlers: extractHandlerTags(config.simultaneousWith),
-    waitFor: extractHandlerTags(config.requireToFail),
-    blocksHandlers: extractHandlerTags(config.block),
+    simultaneousHandlers: extractHandlerTags(relations.simultaneousWith),
+    waitFor: extractHandlerTags(relations.requireToFail),
+    blocksHandlers: extractHandlerTags(relations.block),
   };
 }