Question 264335 in React native Question posted in
The official React Native documentation can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    and ram has to be freed for items which are out of window.

    React Query caches data in memory, so it cannot be freed just because it’s out of the viewport.

    There are a couple of improvements here in v5:

    • maxPages – a new option to limit the number of pages that are stored in the cache
    • fine-grained persistence – an experimental plugin to offload queries to an external storage so that you can remove it from memory when its unused

    For your case, please try out the maxPages option.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search