Memoize cloned configs in gesture hooks (#3816)

## Description

Currently config is cloned and modified on every render in gesture
hooks. This PR changes that, so that it's memoized assuming the input is
also stable.

## Test plan

Verify that if the input config is memoized, the returned gesture
reference is stable as long as the config doesn't change (will require
other PRs to be merged first).
-
#3815
-
#3812

Author: j-piasecki

packages/react-native-gesture-handler/src/v3/hooks/gestures/fling/useFling.ts

@@ -8,7 +8,7 @@ import {
   GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig } from '../../utils';
+import { useClonedAndRemappedConfig } from '../../utils';
 import type { FlingGestureNativeProperties } from './FlingProperties';
 
 type FlingHandlerData = {
@@ -39,9 +39,11 @@ export type FlingGesture = SingleGesture<
 >;
 
 export function useFling(config: FlingGestureConfig): FlingGesture {
-  const flingConfig = cloneConfig<FlingHandlerData, FlingGestureProperties>(
-    config
-  );
+  const flingConfig = useClonedAndRemappedConfig<
+    FlingHandlerData,
+    FlingGestureProperties,
+    FlingGestureProperties
+  >(config);
 
   return useGesture(SingleGestureName.Fling, flingConfig);
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/hover/useHover.ts

@@ -11,7 +11,10 @@ import {
   GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig, getChangeEventCalculator } from '../../utils';
+import {
+  useClonedAndRemappedConfig,
+  getChangeEventCalculator,
+} from '../../utils';
 import { HoverGestureNativeProperties } from './HoverProperties';
 
 type HoverHandlerData = {
@@ -58,12 +61,22 @@ function diffCalculator(
   };
 }
 
-export function useHover(config: HoverGestureConfig): HoverGesture {
-  const hoverConfig = cloneConfig<HoverHandlerData, HoverGestureProperties>(
-    config
-  );
+function transformHoverProps(
+  config: HoverGestureConfig & HoverGestureInternalConfig
+) {
+  config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
 
-  hoverConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+  return config;
+}
+
+const HoverPropsMapping = new Map<string, string>();
+
+export function useHover(config: HoverGestureConfig): HoverGesture {
+  const hoverConfig = useClonedAndRemappedConfig<
+    HoverHandlerData,
+    HoverGestureProperties,
+    HoverGestureProperties
+  >(config, HoverPropsMapping, transformHoverProps);
 
   return useGesture(SingleGestureName.Hover, hoverConfig);
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/longPress/useLongPress.ts

@@ -8,7 +8,7 @@ import {
   GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig, remapProps } from '../../utils';
+import { useClonedAndRemappedConfig } from '../../utils';
 import {
   LongPressGestureExternalProperties,
   LongPressGestureNativeProperties,
@@ -56,20 +56,22 @@ const LongPressPropsMapping = new Map<
   ['maxDistance', 'maxDist'],
 ]);
 
+function transformLongPressProps(
+  config: LongPressGestureConfig & LongPressGestureInternalConfig
+) {
+  if (config.shouldCancelWhenOutside === undefined) {
+    config.shouldCancelWhenOutside = true;
+  }
+
+  return config;
+}
+
 export function useLongPress(config: LongPressGestureConfig): LongPressGesture {
-  const longPressConfig = cloneConfig<
+  const longPressConfig = useClonedAndRemappedConfig<
     LongPressHandlerData,
+    LongPressGestureProperties,
     LongPressGestureInternalProperties
-  >(config);
-
-  remapProps<LongPressGestureConfig, LongPressGestureInternalConfig>(
-    longPressConfig,
-    LongPressPropsMapping
-  );
-
-  if (longPressConfig.shouldCancelWhenOutside === undefined) {
-    longPressConfig.shouldCancelWhenOutside = true;
-  }
+  >(config, LongPressPropsMapping, transformLongPressProps);
 
   return useGesture<LongPressHandlerData, LongPressGestureInternalProperties>(
     SingleGestureName.LongPress,

packages/react-native-gesture-handler/src/v3/hooks/gestures/manual/useManual.ts

@@ -7,7 +7,7 @@ import {
   GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig } from '../../utils';
+import { useClonedAndRemappedConfig } from '../../utils';
 import { ManualGestureNativeProperties } from './ManualProperties';
 
 type ManualHandlerData = Record<string, never>;
@@ -32,9 +32,11 @@ export type ManualGesture = SingleGesture<
 >;
 
 export function useManual(config: ManualGestureConfig): ManualGesture {
-  const manualConfig = cloneConfig<ManualHandlerData, ManualGestureProperties>(
-    config
-  );
+  const manualConfig = useClonedAndRemappedConfig<
+    ManualHandlerData,
+    ManualGestureProperties,
+    ManualGestureProperties
+  >(config);
 
   return useGesture(SingleGestureName.Manual, manualConfig);
 }

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

@@ -8,7 +8,7 @@ import {
   GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig } from '../../utils';
+import { useClonedAndRemappedConfig } from '../../utils';
 import { NativeGestureNativeProperties } from './NativeProperties';
 
 type NativeViewHandlerData = {
@@ -38,8 +38,9 @@ export type NativeGesture = SingleGesture<
 >;
 
 export function useNative(config: NativeViewGestureConfig): NativeGesture {
-  const nativeConfig = cloneConfig<
+  const nativeConfig = useClonedAndRemappedConfig<
     NativeViewHandlerData,
+    NativeViewGestureProperties,
     NativeViewGestureProperties
   >(config);
 

packages/react-native-gesture-handler/src/v3/hooks/gestures/pan/usePan.ts

@@ -13,8 +13,7 @@ import { useGesture } from '../../useGesture';
 import {
   getChangeEventCalculator,
   maybeUnpackValue,
-  remapProps,
-  cloneConfig,
+  useClonedAndRemappedConfig,
 } from '../../utils';
 import {
   OffsetProps,
@@ -56,7 +55,10 @@ export type PanGestureStateChangeEvent =
 
 export type PanGestureUpdateEvent = GestureUpdateEvent<PanHandlerData>;
 
-export type PanGesture = SingleGesture<PanHandlerData, PanGestureProperties>;
+export type PanGesture = SingleGesture<
+  PanHandlerData,
+  PanGestureInternalProperties
+>;
 
 const PanPropsMapping = new Map<
   keyof PanGestureProperties,
@@ -137,15 +139,6 @@ function transformOffsetProp(
   delete config[propName];
 }
 
-function transformPanProps(
-  config: PanGestureConfig & PanGestureInternalConfig
-) {
-  transformOffsetProp(config, 'activeOffsetY');
-  transformOffsetProp(config, 'failOffsetX');
-  transformOffsetProp(config, 'failOffsetY');
-  transformOffsetProp(config, 'activeOffsetX');
-}
-
 function diffCalculator(
   current: HandlerData<PanHandlerData>,
   previous: HandlerData<PanHandlerData> | null
@@ -161,23 +154,29 @@ function diffCalculator(
   };
 }
 
+function transformPanProps(
+  config: PanGestureConfig & PanGestureInternalConfig
+) {
+  transformOffsetProp(config, 'activeOffsetY');
+  transformOffsetProp(config, 'failOffsetX');
+  transformOffsetProp(config, 'failOffsetY');
+  transformOffsetProp(config, 'activeOffsetX');
+
+  config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
+  return config;
+}
+
 export function usePan(config: PanGestureConfig): PanGesture {
   if (__DEV__) {
     validatePanConfig(config);
   }
 
-  const panConfig = cloneConfig<PanHandlerData, PanGestureInternalProperties>(
-    config
-  );
-
-  remapProps<PanGestureConfig, PanGestureInternalConfig>(
-    panConfig,
-    PanPropsMapping
-  );
-
-  transformPanProps(panConfig);
-
-  panConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+  const panConfig = useClonedAndRemappedConfig<
+    PanHandlerData,
+    PanGestureProperties,
+    PanGestureInternalProperties
+  >(config, PanPropsMapping, transformPanProps);
 
   return useGesture<PanHandlerData, PanGestureInternalProperties>(
     SingleGestureName.Pan,

packages/react-native-gesture-handler/src/v3/hooks/gestures/pinch/usePinch.ts

@@ -8,7 +8,10 @@ import {
   GestureStateChangeEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig, getChangeEventCalculator } from '../../utils';
+import {
+  useClonedAndRemappedConfig,
+  getChangeEventCalculator,
+} from '../../utils';
 import { PinchGestureNativeProperties } from './PinchProperties';
 
 type PinchHandlerData = {
@@ -49,10 +52,23 @@ function diffCalculator(
   };
 }
 
+function transformPinchProps(
+  config: PinchGestureConfig & PinchGestureInternalConfig
+) {
+  config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
+  return config;
+}
+
+const PinchPropsMapping = new Map<string, string>();
+
 export function usePinch(config: PinchGestureConfig): PinchGesture {
-  const pinchConfig = cloneConfig<PinchHandlerData, PinchGestureProperties>(
-    config
-  );
+  const pinchConfig = useClonedAndRemappedConfig<
+    PinchHandlerData,
+    PinchGestureProperties,
+    // no internal props, pass record as PinchGestureProperties maps everything to never
+    Record<string, unknown>
+  >(config, PinchPropsMapping, transformPinchProps);
 
   pinchConfig.changeEventCalculator = getChangeEventCalculator(diffCalculator);
 

packages/react-native-gesture-handler/src/v3/hooks/gestures/rotation/useRotation.ts

@@ -8,7 +8,10 @@ import {
   GestureUpdateEvent,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig, getChangeEventCalculator } from '../../utils';
+import {
+  useClonedAndRemappedConfig,
+  getChangeEventCalculator,
+} from '../../utils';
 import { RotationGestureNativeProperties } from './RotationProperties';
 
 type RotationHandlerData = {
@@ -52,14 +55,23 @@ function diffCalculator(
   };
 }
 
+function transformRotationProps(
+  config: RotationGestureConfig & RotationGestureInternalConfig
+) {
+  config.changeEventCalculator = getChangeEventCalculator(diffCalculator);
+
+  return config;
+}
+
+const RotationPropsMapping = new Map<string, string>();
+
 export function useRotation(config: RotationGestureConfig): RotationGesture {
-  const rotationConfig = cloneConfig<
+  const rotationConfig = useClonedAndRemappedConfig<
     RotationHandlerData,
-    RotationGestureProperties
-  >(config);
-
-  rotationConfig.changeEventCalculator =
-    getChangeEventCalculator(diffCalculator);
+    RotationGestureProperties,
+    // no internal props, pass record as RotationGestureProperties maps everything to never
+    Record<string, unknown>
+  >(config, RotationPropsMapping, transformRotationProps);
 
   return useGesture(SingleGestureName.Rotation, rotationConfig);
 }

packages/react-native-gesture-handler/src/v3/hooks/gestures/tap/useTap.ts

@@ -8,7 +8,7 @@ import {
   WithSharedValue,
 } from '../../../types';
 import { useGesture } from '../../useGesture';
-import { cloneConfig, remapProps } from '../../utils';
+import { useClonedAndRemappedConfig } from '../../utils';
 import {
   TapGestureExternalConfig,
   TapGestureNativeConfig,
@@ -29,19 +29,14 @@ export type TapGestureConfig = ExcludeInternalConfigProps<
   BaseDiscreteGestureConfig<TapHandlerData, TapGestureProperties>
 >;
 
-type TapGestureInternalConfig = BaseDiscreteGestureConfig<
-  TapHandlerData,
-  TapGestureInternalProperties
->;
-
 export type TapGestureStateChangeEvent =
   GestureStateChangeEvent<TapHandlerData>;
 
 export type TapGestureUpdateEvent = GestureUpdateEvent<TapHandlerData>;
 
 export type TapGesture = DiscreteSingleGesture<
   TapHandlerData,
-  TapGestureProperties
+  TapGestureInternalProperties
 >;
 
 const TapPropsMapping = new Map<
@@ -54,14 +49,11 @@ const TapPropsMapping = new Map<
 ]);
 
 export function useTap(config: TapGestureConfig): TapGesture {
-  const tapConfig = cloneConfig<TapHandlerData, TapGestureInternalProperties>(
-    config
-  );
-
-  remapProps<TapGestureConfig, TapGestureInternalConfig>(
-    tapConfig,
-    TapPropsMapping
-  );
+  const tapConfig = useClonedAndRemappedConfig<
+    TapHandlerData,
+    TapGestureProperties,
+    TapGestureInternalProperties
+  >(config, TapPropsMapping);
 
   return useGesture<TapHandlerData, TapGestureInternalProperties>(
     SingleGestureName.Tap,