[v4] | [v2] Memory leak, endless consumption when frequently changed state

[therealkeeg1]

Bug

Endless memory consumption when BottomSheet is mounted and a state is frequently changed. Doesn't matter if bottom sheet is open or closed. After 10 minutes the app crashes on my Samsung Galaxy s21. iOS doesn't crash but will lag extremely bad after 10-15 minutes (using 700+ mb of ram, iPhone 15 Pro).

Same example code but with the bottom sheet commented out

Environment info

Library	Version
@gorhom/bottom-sheet	^4.6.0
react-native	0.71.1
react-native-reanimated	^3.7.0
react-native-gesture-handler	^2.15.0

Steps To Reproduce

1. Create a bottom sheet (Doesn't matter if bottom sheet is open or not)
2. Create a frequently changing state. (For example, a setInterval)
3. Wait 1-5 minutes

Describe what you expected to happen:

1. I expected the frequently changing state to have zero effect on the bottom sheet.

Reproducible sample code

const snapPoints = useMemo(() => ['30%'], []);
const bottomSheetRef = useRef<BottomSheet>(null);
const [date, setDate] = useState(0)

useEffect(() => {
    let tmp = setInterval(() => {
        setDate(Date.now())
    }, 100)

    return () => {
        clearInterval(tmp)
    }
}, [])

return (
    <View style={{flex: 1, justifyContent:'center', alignItems:'center'}}>
        <TouchableOpacity onPress={() => {
            bottomSheetRef?.current?.snapToIndex(0)
        }} style={{backgroundColor:'red', padding: 20}}>
            <Text>Open</Text>
        </TouchableOpacity>

        <BottomSheet ref={bottomSheetRef} index={-1} snapPoints={snapPoints}>
            <Text>TEST</Text>
        </BottomSheet>
    </View>
)

[github-actions[bot]]

@therealkeeg1: hello! :wave:

This issue is being automatically closed because it does not follow the issue template.

[yadormad]

Similar issue, but reproduced on BottomSheetModal when opening/closing

Sample code:

const Content = () => {
  const [s, setState] = useState(false);
  useEffect(() => {
    setInterval(() => {
      setState(s => !s);
    }, 50);
  }, []);
  return <View />;
};

export const SimpleExample = () => {
  const isOpened = useRef(false);
  const bottomSheetRef = useRef<BottomSheetModal>(null);
  useEffect(() => {
    setInterval(() => {
      if (!isOpened.current) {
        bottomSheetRef.current!.present();
      } else {
        bottomSheetRef.current!.dismiss();
      }
    }, 50);
  }, []);
  const snapPoints = useMemo(() => ['25%', '50%'], []);

  const handleChange = useCallback((index: number) => {
    isOpened.current = index > -1;
  }, []);
  return (
    <GestureHandlerRootView style={styles.wrapper}>
      <BottomSheetModalProvider>
        <View style={styles.container}>
          <BottomSheetModal
            ref={bottomSheetRef}
            snapPoints={snapPoints}
            enablePanDownToClose
            enableDismissOnClose
            onChange={handleChange}>
            <Content />
          </BottomSheetModal>
        </View>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
  wrapper: {
    flex: 1,
  },
});

Library	Version
@gorhom/bottom-sheet	^4.6.1
react-native	0.73.4
react-native-reanimated	^3.7.0
react-native-gesture-handler	^2.15.0

Android studio profiler after 14 minutes test run

On production app where bottom sheets contain more complex content single bottom sheet open might increase RAM by 20mb

[KirillRodichevUtorg]

same issue

[TomCorvus]

You can include V5. I have migrated from react-native-modalize to bottomsheet, and performance is not the same. On certain screens, I have multiple API calls, 5-6 bottom sheet modals, in one word, more complex views than just a link to open a modal and the app is freezing, on performance monitor, JS is stuck to 0 during many seconds and my app is not reactive anymore. I precise that I had not had this problem before. To test, I commented all bottom sheet modals, and it fixes the performance problem. There is something in the source code that consumes a lot of memory. Maybe useless renders. I even logged the onClose method, and I was surprised that it fires on the first render while the bottom sheet is on index -1. Because of this issue, sometimes the enableDynamicSizing doesn't work as expected. The calculation is not good. I don't see a PR to fix this even though this is critical. This problem seems to occur with a minimal example, so I don't think it comes from my code.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 5 days with no activity.

[therealkeeg1]

@gorhom Any insight?

[edwinvrgs]

I believe this is still relevant, my app uses multiple bottom sheets and is facing performance issues.

[TomCorvus]

It all depends on the functionality you need for the modals, but you can code your own modal using the different examples available. you will stay in control and adjust according to your needs. It took me a few hours to get what I want and I have no performance issues. https://docs.swmansion.com/react-native-reanimated/examples/bottomsheet/ https://github.com/software-mansion-labs/reanimated-bottom-sheet-video

[dhaval97shah]

Why this is getting closed every time? the issue still persists