Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Potential leak on FlatList + images #15930

Closed
mfrachet opened this issue Sep 13, 2017 · 21 comments
Closed

Potential leak on FlatList + images #15930

mfrachet opened this issue Sep 13, 2017 · 21 comments
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@mfrachet
Copy link

Is this a bug report?

Yes, it seems so

Have you read the Contributing Guidelines?

Yes

Environment

  1. react-native -v:
  • react-native-cli: 2.0.1
  • react-native: 0.47.2
  1. node -v: v8.4.0
  2. npm -v: v5.3.0
  3. yarn --version: v1.0.0
  • Target Platform: Android
  • Development Operating System: macOS Sierra v10.12.6

Steps to Reproduce

(Write your steps here:)

  1. use a low memory device (128mb for example)
  2. create a FlatList with "infinite" images
  3. See the app crash and android monitor

Expected Behavior

Image are well garbaged while scrolling FlatList (recycle view + fresco disk caching ?)

Actual Behavior

It 'actually throws OOM errors :

capture d ecran 2017-09-13 a 14 31 06

Here's the Android monitoring shot while I m playing with the app. We can see that the memory is always jumping but rarely dropping, and so forth, OOM at some moment

rn

And here's what I can see from the Eclipse Memory Analyzer stuff :

image quand tu nous tiens

Reproducible Demo

@robbywh
Copy link

robbywh commented Sep 18, 2017

I encountered the same problem, any solution for this problem ?

@mfrachet
Copy link
Author

Just a little up to not forget :/

@irwing-reza
Copy link

Any updates?

@kesha-antonov
Copy link
Contributor

kesha-antonov commented Nov 2, 2017

👍 +1

@ngoducduy
Copy link

Any solution for this ?

1 similar comment
@suetming
Copy link

Any solution for this ?

@nico1510
Copy link

I'm seeing this too 🙁

@cglacet
Copy link

cglacet commented Nov 30, 2017

Its been two months, did you had any feedback on this?

@cglacet
Copy link

cglacet commented Nov 30, 2017

Isn't it related to this. I haven't ran your code, but mine had similar issue and stoping remote debugging worked.

@mfrachet
Copy link
Author

mfrachet commented Dec 1, 2017

We have this bug in production, the repo is simply a reproduction in dev mode, but it exists for us in production.

No feedbacks for now :/

@RafaelMagalhaesN
Copy link
Contributor

RafaelMagalhaesN commented Dec 2, 2017

Last month I had the same problem/bug with the app in production.

I found a momentary solution (workaround?) when I added the property 'removeClippedSubviews' in FlatList.

<FlatList data={this.state.dataSet} keyExtractor={this._keyExtractor} renderItem={this._renderItem} removeClippedSubviews />

In my case, it worked well and decreased memory leaks.

@lhfiii
Copy link

lhfiii commented Dec 5, 2017

@RafaelMagalhaesN tried, but no help

@pavanmehta91
Copy link

Any solutions for this yet? Can anybody explain why it's happening despite using flatlist? Does flatlist not automatically garbage collect or free the memory of the images not in the view?

@pavanmehta91
Copy link

according to the docs removeClippedSubviews is by default true for FlatList

@pavanmehta91
Copy link

Okay

@brentvatne
Copy link
Collaborator

use removeClippedSubviews, it does not defualt to true for FlatList or SectionList, only for ListView

@react-native-bot
Copy link
Collaborator

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

How to ContributeWhat to Expect from Maintainers

@react-native-bot react-native-bot added Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon. labels Feb 24, 2018
@kelset
Copy link
Contributor

kelset commented Mar 1, 2018

(FYI, refer to #13413 for followup on this)

@alzalabany
Copy link

this is still active on .54, adding an Image to Flatlist cause huge memory leak on android.

@thewalrusisben
Copy link

I had been running to this with my application, which is a Flatlist that contains between 10 - 20 GIFs at a time. I was able to solve the crashing and subsequent choppiness that I got from using removeClippedSubviews by also implementing FLAnimatedImage. Here's what ended up doing the trick, in total:

  1. Add removeClippedSubviews
  2. Set initialNumToRender to some appropriate value that covers the contents of the initial view
  3. Pass in State to extraData as recommended in the React Native Docs (0.54)
  4. Implement my Flatlist's renderItem as a PureComponent.
  5. Swap out Image elements for FLAnimatedImages instead.

1 - 4 all had performance benefits, and helped drastically reduce the total memory load, and #5 took it over the edge with extra memory reduction and (mostly) substantially smoother scrolling.

I haven't verified yet which of these changes are doing the heavy lifting, but all of them taken together definitely made the difference.

Also, don't forget to turn off the remote debugger when working with a real device.

hope this helps someone else!

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Ran Commands One of our bots successfully processed a command. Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

17 participants