Search code examples
react-nativememory-leaksreact-native-flatlistinfinite-scrollreact-query

React native - consuming too much RAM but not getting released in FlatList with large data


in a React Native project, using react query to bring infinite scroll in feeds - RAM getting consumed more and more but not releasing the memory for the component which are out of sight (starting from almost 170 mb and reaching way upto 2 gb and app crashes).

any help is much appreciated.

"react-native": "0.72.4", "@tanstack/react-query": "^4.29.17"

page is scrolled infinitely and paginated API gets called for every 10 items, with every scroll RAM is increasing and it has to be in an average size. and ram has to be freed for items which are out of window.

expecting a memory leak, but returned only a Text and it still increasing memory but a lesser count


Solution

  • What was consuming the memory was the items which are out of window are not removed. I achieved it by giving removeClippedSubViews prop to true for a scrollview wrapping the FlatList and giving overflow:"hidden" style to the items mapped in it