Skip to content

Commit 2781332

Browse files
authored
Unregister from oldGestureHandler when component unmounts (#3374)
## Description We might have discovered a memory leak associated with oldGestureHandler registry. Nothing ever gets removed from it. We noticed a lot of hanging GenericTouchable components at runtime associated with this registry. ## Test plan <details> <summary>Tested on the following code:</summary> ```jsx import { useState } from 'react'; import { Button, View } from 'react-native'; import { GestureHandlerRootView, PanGestureHandler, } from 'react-native-gesture-handler'; export default function App() { const [show, setShow] = useState(false); return ( <GestureHandlerRootView style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around' }}> <Button onPress={() => setShow((prev) => !prev)} title="Click me!" /> {show && ( <PanGestureHandler> <View style={{ width: 100, height: 100, backgroundColor: 'red' }} /> </PanGestureHandler> )} </GestureHandlerRootView> ); } ``` </details> with ```jsx setInterval(() => console.log(oldHandlers), 1000); ``` added in `handlersRegistry.tsx`
1 parent b696961 commit 2781332

File tree

2 files changed

+12
-1
lines changed

2 files changed

+12
-1
lines changed

src/handlers/createHandler.tsx

+8-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import {
88
import { customDirectEventTypes } from './customDirectEventTypes';
99
import RNGestureHandlerModule from '../RNGestureHandlerModule';
1010
import { State } from '../State';
11-
import { handlerIDToTag, registerOldGestureHandler } from './handlersRegistry';
11+
import {
12+
handlerIDToTag,
13+
registerOldGestureHandler,
14+
unregisterOldGestureHandler,
15+
} from './handlersRegistry';
1216
import { getNextHandlerTag } from './getNextHandlerTag';
1317

1418
import {
@@ -255,6 +259,9 @@ export default function createHandler<
255259
componentWillUnmount() {
256260
this.inspectorToggleListener?.remove();
257261
this.isMountedRef.current = false;
262+
if (Platform.OS !== 'web') {
263+
unregisterOldGestureHandler(this.handlerTag);
264+
}
258265
RNGestureHandlerModule.dropGestureHandler(this.handlerTag);
259266
scheduleFlushOperations();
260267
// We can't use this.props.id directly due to TS generic type narrowing bug, see https://github.com/microsoft/TypeScript/issues/13995 for more context

src/handlers/handlersRegistry.ts

+4
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export function registerOldGestureHandler(
2525
oldHandlers.set(handlerTag, handler);
2626
}
2727

28+
export function unregisterOldGestureHandler(handlerTag: number) {
29+
oldHandlers.delete(handlerTag);
30+
}
31+
2832
export function unregisterHandler(handlerTag: number, testID?: string) {
2933
gestures.delete(handlerTag);
3034
if (isTestEnv() && testID) {

0 commit comments

Comments
 (0)