[Android] Very high memory usage. App becomes very laggy!

[kesha-antonov]

Hello! I have an app with not very complex UI. But with lots of code. And it takes a lot of memory in android. And becomes very laggy after few screens loaded. In iOS code works without any lag in dev/prod modes.

Is this a bug report?

Yes. In iOS same code works great whether is in dev mode or production mode.

Here's memory usage without remote debugger turned on:

Here's memory usage with remote debugger turned on (see memory usage reduced):

Even if I reduce views - memory usage is still high:

Have you read the Contributing Guidelines?

Yes.

Environment

Environment:
OS: macOS High Sierra 10.13
Node: 6.11.3
Yarn: Not Found
npm: 5.4.2
Watchman: 4.9.0
Xcode: Xcode 9.0 Build version 9A235
Android Studio: 2.3 AI-162.3871768

Packages: (wanted => installed)
react: ^16.0.0 => 16.0.0
react-native: github:facebook/react-native#60c898d8643daf80ef8175af7dc8411709eff379 => 1000.0.0

RN - 0.50-rc

Steps to Reproduce

1. git clone https://github.com/kesha-antonov/rn_memory_usage_test_high_usage
2. cd rn_memory_usage_test_high_usage
3. npm i
4. nano node_modules/react-native-sentry/android/build.gradle
5. Change sdk tools to

    compileSdkVersion 25
    buildToolsVersion '25.0.3'

6. Set your android ndk, sdk paths in androids/local.properties
7. react-native run-android
8. adb shell dumpsys meminfo com.rn_memory_usage_test_high_usage
9. See a lot of memory used (115 MB and above with just 21 (!!!) views, 125.5 MB with 126 useless views)

Expected Behavior

25-75 MB of memory usage will be fine I guess.
With no lags, no frame drops

Actual Behavior

A lot of memory used: 165-261 MB
Users experience good look of first screen and when they go through the app it becomes laggy

Reproducible Demo

https://github.com/kesha-antonov/rn_memory_usage_test_high_usage

[kesha-antonov]

[kesha-antonov]

Anybody?

@javache @ide @hramos

[kesha-antonov]

I even see growing memory in sample app #16600

[kesha-antonov]

Maybe related #16732

[lhfiii]

Resolved? How? @kesha-antonov

[kesha-antonov]

Unfortunately now. Still very high memory usage @lhfiii

[lhfiii]

@kesha-antonov It may be related with memory leak. Try to display a number of image with FlatList. Even close the activity does not help. Especially on android 4

[lhfiii]

I have replace fresco with glide and the leak still exists. It seems that the leak comes from other native module. I have found a lot of YogaNode in the FinalizeReference chain.

[gold-duo]

YogaNodePool.get().clear(); release reference.

[kesha-antonov]

Hello @droidwolf !
Where to put it?

[gold-duo]

activity onDestory

[pavanmehta91]

Could you guide where to put it? and where's Activity onDestory()?

[1c7]

still unsolved?

my RN 0.52 app also take huge chunk memory and then crash.
( on certain model of qihoo 360 phone, not all of them, it work fine on my Samsung Galaxy Note 5)

base on a screenshot user provide to me, it's this phone: 360 F4 Pro
https://www.androidheadlines.com/2016/04/360-mobile-introduces-the-360-f4-pro-handset-with-3gb-of-ram.html
not sure what cause the problem, I am not try to blame on the phone, just provide more info here.

my app use react-native-image-crop-picker to choose multiple image and display them with <Image> in a <FlatList>

I am still researching how to debug high memory usage problem.
I am not a Mobile developer(Android/iOS),
I am a Web Developer who don't want spend a lot time learning Mobile development,
that's why I chose RN.

[tehong]

@kesha-antonov @droidwolf @1c7 @pavanmehta91
Has anyone resolved this problem. I also used react-native-image-crop-picker but I'm not sure that's related. My memory usage grows to 478MB from 250MB initially.

[1c7]

@tehong
nope,
I give up on this problem and decide not to waste more time on it.

I open an issue about this: #17801
and wrote demo app: https://github.com/1c7/react-native-image-memory-problem-demo-app
and a video using that demo app: https://youtu.be/Vgq-P826aqw

I am not an RN expert/mobile dev expert, so I can't solve this myself.
good luck with your project :D @tehong

[kesha-antonov]

Same as @1c7

[kelset]

Hi folks, going to close this in favour of #13413, so that we avoid redundancy - the core team is aware of this Android+Flat/SectionList+Images issue (going to write a follow up there).

[rahulnpadalkar]

@kesha-antonov which profiling tool is it. Looks really cool. Sorry new to react native.

[kesha-antonov]

@rahulnpadalkar It's Android Studio