Memoze event handlers

Author: j-piasecki

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { BaseGestureConfig } from '../../../types';
 import { extractStateChangeHandlers } from '../../utils';
 import { getStateChangeHandler } from '../stateChangeHandler';
@@ -6,7 +7,8 @@ export function useGestureStateChangeEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
-  const handlers = extractStateChangeHandlers(config);
-
-  return getStateChangeHandler(handlerTag, handlers);
+  return useMemo(() => {
+    const handlers = extractStateChangeHandlers(config);
+    return getStateChangeHandler(handlerTag, handlers);
+  }, [handlerTag, config]);
 }

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { BaseGestureConfig } from '../../../types';
 import { extractTouchHandlers } from '../../utils';
 import { getTouchEventHandler } from '../touchEventHandler';
@@ -6,7 +7,8 @@ export function useGestureTouchEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
-  const handlers = extractTouchHandlers(config);
-
-  return getTouchEventHandler(handlerTag, handlers);
+  return useMemo(() => {
+    const handlers = extractTouchHandlers(config);
+    return getTouchEventHandler(handlerTag, handlers);
+  }, [handlerTag, config]);
 }

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

@@ -2,18 +2,26 @@ import { extractUpdateHandlers, isAnimatedEvent } from '../../utils';
 import { ReanimatedContext } from '../../../../handlers/gestures/reanimatedWrapper';
 import { getUpdateHandler } from '../updateHandler';
 import { BaseGestureConfig } from '../../../types';
+import { useMemo } from 'react';
 
 export function useGestureUpdateEvent<THandlerData, TConfig>(
   handlerTag: number,
   config: BaseGestureConfig<THandlerData, TConfig>
 ) {
-  const { handlers, changeEventCalculator } = extractUpdateHandlers(config);
+  return useMemo(() => {
+    const { handlers, changeEventCalculator } = extractUpdateHandlers(config);
 
-  const jsContext: ReanimatedContext<THandlerData> = {
-    lastUpdateEvent: undefined,
-  };
+    const jsContext: ReanimatedContext<THandlerData> = {
+      lastUpdateEvent: undefined,
+    };
 
-  return isAnimatedEvent(config.onUpdate)
-    ? undefined
-    : getUpdateHandler(handlerTag, handlers, jsContext, changeEventCalculator);
+    return isAnimatedEvent(config.onUpdate)
+      ? undefined
+      : getUpdateHandler(
+          handlerTag,
+          handlers,
+          jsContext,
+          changeEventCalculator
+        );
+  }, [handlerTag, config]);
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 import { getNextHandlerTag } from '../../handlers/getNextHandlerTag';
 import RNGestureHandlerModule from '../../RNGestureHandlerModule';
 import { useGestureCallbacks } from './useGestureCallbacks';
@@ -69,12 +69,20 @@ export function useGesture<THandlerData, TConfig>(
     throw new Error(tagMessage('Failed to create reanimated event handlers.'));
   }
 
-  const gestureRelations = prepareRelations(config, tag);
+  const gestureRelations = useMemo(
+    () => prepareRelations(config, tag),
+    [config, tag]
+  );
 
-  useMemo(() => {
+  const currentGestureRef = useRef({ type: '', tag: -1 });
+  if (
+    currentGestureRef.current.tag !== tag ||
+    currentGestureRef.current.type !== (type as string)
+  ) {
+    currentGestureRef.current = { type, tag };
     RNGestureHandlerModule.createGestureHandler(type, tag, {});
     RNGestureHandlerModule.flushOperations();
-  }, [type, tag]);
+  }
 
   useEffect(() => {
     return () => {
@@ -93,21 +101,36 @@ export function useGesture<THandlerData, TConfig>(
     return () => {
       unbindSharedValues(config, tag);
     };
-  }, [tag, config]);
+  }, [tag, config, type]);
 
-  return {
-    tag,
-    type,
-    config,
-    detectorCallbacks: {
+  return useMemo(
+    () => ({
+      tag,
+      type,
+      config,
+      detectorCallbacks: {
+        onGestureHandlerStateChange,
+        onGestureHandlerEvent,
+        onGestureHandlerTouchEvent,
+        onReanimatedStateChange,
+        onReanimatedUpdateEvent,
+        onReanimatedTouchEvent,
+        onGestureHandlerAnimatedEvent,
+      },
+      gestureRelations,
+    }),
+    [
+      tag,
+      type,
+      config,
       onGestureHandlerStateChange,
       onGestureHandlerEvent,
       onGestureHandlerTouchEvent,
       onReanimatedStateChange,
       onReanimatedUpdateEvent,
       onReanimatedTouchEvent,
       onGestureHandlerAnimatedEvent,
-    },
-    gestureRelations,
-  };
+      gestureRelations,
+    ]
+  );
 }