Memory leak when updating stateful value in component

Description

After implementing a swipe gesture on list items inspired by SwipeableListExample.js I noticed a memory leak in my app. I’ve been able to reproduce with minimal changes to SwipeableListExample.js in Reanimated example project.

It seems that calling a function declared in the same component as the worklet calling it, is creating a memory leak.

Maybe I’m misusing the library but I haven’t found any reference to that in the documentation so I’m assuming this is a bug.

Steps To Reproduce

1. Open SwipeableListExample.js in the Example project
2. Declare a stateful value with useState() in the ListItem component.
3. Change the stateful value in the useAnimatedGestureHandler worklet.
4. Take an initial memory snapshot using Safari
5. Run project and navigate multiple times between home and the Swipeable List example
6. Take a second memory snapshot using Safari and look for the number of PanGestureHandler

Expected behavior

Previous PanGestureHandler components and their children should be deallocated when their parent is deallocated or no longer attached to any parent. This is the behavior of the example project without modifications.

Actual behavior

All PanGestureHandler components and their children stay in memory until application is killed.

Screenshots

Safari Dev Tools, list of new PanGestureHandler in memory since initial snapshot.

Detail of one retained PanGestureHandler

Snack or minimal code example

Edited part of SwipeableList.js (see comments):

function ListItem({ item, onRemove }) {
  const isRemoving = useSharedValue(false);
  const translateX = useSharedValue(0);
  // Declare stateful value
  const [isSwiping, setIsSwiping] = useState(false);

  const handler = useAnimatedGestureHandler({
    onStart: (evt, ctx) => {
      ctx.startX = translateX.value;
      // Modify stateful value from worklet
      runOnJS(setIsSwiping)(true);
    },

    onActive: (evt, ctx) => {
      const nextTranslate = evt.translationX + ctx.startX;
      translateX.value = Math.min(0, Math.max(nextTranslate, MAX_TRANSLATE));
    },

    onEnd: (evt) => {
      if (evt.velocityX < -20) {
        translateX.value = withSpring(
          MAX_TRANSLATE,
          springConfig(evt.velocityX)
        );
      } else {
        translateX.value = withSpring(0, springConfig(evt.velocityX));
      }
    },
  });
 
// ... Rest of ListItem implementation. Truncated for clarity
}

I can provide a project on Github if it helps.

Package versions

• React: 16.13.1
• React Native: 0.63.0
• React Native Reanimated: Master @ 29491efc1851df320c2fa1ba90b5c217bd7a22cc (Nov 30th)
• react-native-gesture-handler: 1.8.0
• NodeJS: 12.16.1

[rrebase]

🏓 Any updates or workaround for this? It seems like the cause of leak is different after latest improvements. Maybe open a separate issue for discussing it? Having useAnimatedGestureHandler in a flatlist with a few timing worklets makes the leak a big issue.

Just want to note that you guys are doing amazing work here 💪 Would totally look into this myself, but don’t have the cpp experience.

[karol-bisztyga]

Today I discovered that it could just be a problem of the gesture handler itself. Such code leaks memory:

import React from 'react';
import { View, Text } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

export default function App() {

  const handler = (e) => {};

  return (
    <View>
      <PanGestureHandler activeOffsetX={[-10, 10]} onGestureEvent={handler}>
        <Text>AAA</Text>
      </PanGestureHandler>
    </View>
  );
}

It has nothing to do with reanimated.

We will let you know when we check the GH.