Skip to content

Memoize cloned configs in gesture hooks #3816

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 14, 2025
Merged

Memoize cloned configs in gesture hooks #3816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3dbb0f9
Memoize cloned configs
j-piasecki Nov 13, 2025
01b6be2
Remove the last generic type
j-piasecki Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/fling/useFling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
}
25 changes: 19 additions & 6 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/hover/useHover.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
}
26 changes: 14 additions & 12 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/longPress/useLongPress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
GestureUpdateEvent,
} from '../../../types';
import { useGesture } from '../../useGesture';
import { cloneConfig, remapProps } from '../../utils';
import { useClonedAndRemappedConfig } from '../../utils';
import {
LongPressGestureExternalProperties,
LongPressGestureNativeProperties,
Expand Down Expand Up @@ -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,
Expand Down
10 changes: 6 additions & 4 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/manual/useManual.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -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);
}
5 changes: 3 additions & 2 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/native/useNative.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -38,8 +38,9 @@ export type NativeGesture = SingleGesture<
>;

export function useNative(config: NativeViewGestureConfig): NativeGesture {
const nativeConfig = cloneConfig<
const nativeConfig = useClonedAndRemappedConfig<
NativeViewHandlerData,
NativeViewGestureProperties,
NativeViewGestureProperties
>(config);

Expand Down
47 changes: 23 additions & 24 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/pan/usePan.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import { useGesture } from '../../useGesture';
import {
getChangeEventCalculator,
maybeUnpackValue,
remapProps,
cloneConfig,
useClonedAndRemappedConfig,
} from '../../utils';
import {
OffsetProps,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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,
Expand Down
24 changes: 20 additions & 4 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/pinch/usePinch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);

Expand Down
26 changes: 19 additions & 7 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/rotation/useRotation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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);
}
22 changes: 7 additions & 15 deletions packages/react-native-gesture-handler/src/v3/hooks/gestures/tap/useTap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
WithSharedValue,
} from '../../../types';
import { useGesture } from '../../useGesture';
import { cloneConfig, remapProps } from '../../utils';
import { useClonedAndRemappedConfig } from '../../utils';
import {
TapGestureExternalConfig,
TapGestureNativeConfig,
Expand All @@ -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<
Expand All @@ -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,
Expand Down
Loading
Loading