react-native-reanimated: Massive memory leak with array values

Description

We use reanimated for graph charts, which requires us to use array values in reanimated shared values. When doing this memory is allocated but when the component un-mounts, this memory is not cleared.

Expected behavior

The memory is cleared when component un-mounts and shared values are not used anymore

Actual behavior & steps to reproduce

• Use a profiler to monitor memory usage of the app, in release mode
• Create a component that uses arrays in reanimated shared values
• un-mount this component
• watch the memory not being cleared
• mount & unmount this component until the app gets killed by the OS

Snack or minimal code example

Full minimal reproducible code here: https://github.com/Anybowdy/reanimated-leaks-example

Just need un-mount & remount a component like this multiple times:

export const AnimatedScreen: FC<Props> = ({ onPress }) => {
  const { goBack } = useNavigation();

  const largeArray = Array.from(Array(100000).keys());

  useSharedValue(largeArray);
  useSharedValue(largeArray);
  useSharedValue(largeArray);

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <StyledButton text="Navigate back" onPress={() => goBack()} />
    </View>
  );
};

Package versions

name	version
react-native	0.68.2
react-native-reanimated	2.8.0

Affected platforms

• Android (not tested on android)
• iOS
• Web

Video