React Native 0.63.3 is extremely slow

[Anujmoglix]

My updated App is very slow . It was working smooth in 0.59.9 but now it's performance is getting worse .
I am trying to downgrade it but getting lots of issues . What to do now? Is React Native Team working on that issue because lots of people are already facing that and there is no proper solution available here.

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[Anujmoglix]

OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Memory: 321.04 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 14.4.0 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
Android SDK:
API Levels: 23, 24, 25, 26, 27, 28, 29
Build Tools: 26.0.3, 28.0.3, 29.0.0, 29.0.2
Android NDK: Not Found
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.6010548
Xcode: 11.3/11C29 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_231 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.3 => 0.63.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

[github-actions]

⚠️	Missing Required Fields
ℹ️	It looks like your issue may be missing some necessary information. GitHub provides an example template whenever a new issue is created. Could you go back and make sure to fill out the template? You may edit this issue, or close it and open a new one.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[Anujmoglix]

What type of information you want ? I can share performance monitoring video of my app with comparison of 0.63.3 to 0.59.9

[chrisglein]

What type of information you want ? I can share performance monitoring video of my app with comparison of 0.63.3 to 0.59.9

More details would definitely help. As is this issue isn't particularly actionable. A repro, data, or references.

Also FYI the issue title says 0.60 instead of 0.63, but based on your following information I assume we're talking about 0.63 (aka latest).

Is React Native Team working on that issue because lots of people are already facing that and there is no proper solution available here.

Can you provide references to the other discussions/issues people are hitting?

[Anujmoglix]

Hi @chrisglein ,
Sorry My mistake for version info . Edited that. Check following links. I can share more also if you want. My current App is having around 1L + active users and they are reporting laziness now but there was no issue in 0.59.9 version .
I am also getting Slow Frame rate in current version on play console + firebase console.

#29589

#27898

https://stackoverflow.com/questions/63305308/react-native-0-63-version-performance-issue-in-android-devices

https://www.gitmemory.com/issue/facebook/react-native/29589/671923038. [Same issue]

[ZComwiz]

Seconded. This is a huge issue.

[Anujmoglix]

Hermes Engine did work for me :)
Now app performance is better .
Still solution required from dev side .

[ZComwiz]

@Anujmoglix — My understanding is that Hermes decreases bundle size, startup time and memory— but I'm not sure that has any impact on general app sluggishness when loaded up RE: redux usage, JS queries etc. Something changed under the hood likely related to redux binding to components. It's my best guess so far.

[Anujmoglix]

I am just tracking it and slow frame rate count has been decreased . I will surely update after some more days analysis of app.

[Sbarcenas]

I have the same issue, when update to RN063.3, mi app is too slow to start on android.

[IsaaX]

#26870

I believe this is also related to the issue for additional context for people coming into this thread.

[smali-kazmi]

right now it is a very huge issue we had upgraded our app from 0.59.6 to 0.63.3 and now our Android app is very very very slow! we have made lot of changes recent in our code base interesting thing we had found in emulator app is running very fast but when we generate its apk app is very slow so seems like it is issue with production release

[Anujmoglix]

After Using Hermes, app performance is better but it is not same as old RN version. @smali-kazmi Try Hermes engine and check once.

[smali-kazmi]

right now it is a very huge issue we had upgraded our app from 0.59.6 to 0.63.3 and now our Android app is very very very slow! we have made lot of changes recent in our code base interesting thing we had found in emulator app is running very fast but when we generate its apk app is very slow so seems like it is issue with production release

I made this comment because in the start I was thinking it was due to react natives latest version so debug why the app was very slow I had enabled Show Pref Monitor and check why are my fps against each action; my app's fps down to -2.0 after sometimes during that drop for 2-3 seconds app was totally unresponsive

I had made the following changes in the app and I was so amused both Android + iOS apps are running on 60fps

1. avoid unnecessary redux store writes
2. avoid using Immutable.asMutable while updating data in store reducers
3. remove Immutable.asMutable from my selectors to avoid renders
4. decrease setInternal time and managing it efficient ways

[smali-kazmi]

After Using Hermes, app performance is better but it is not same as old RN version. @smali-kazmi Try Hermes engine and check once.

we can enable it
btw I had fixed my app issues by making the above changes in my code

[rahamin1]

For me Hermes didn't help.
App is much slower using 0.63.3 than 0.59.9.

[rahamin1]

Has anybody found a solution to this problem?

[smali-kazmi]

@rahamin1 check my following comment in this thread that might help you!

right now it is a very huge issue we had upgraded our app from 0.59.6 to 0.63.3 and now our Android app is very very very slow! we have made lot of changes recent in our code base interesting thing we had found in emulator app is running very fast but when we generate its apk app is very slow so seems like it is issue with production release

I made this comment because in the start I was thinking it was due to react natives latest version so debug why the app was very slow I had enabled Show Pref Monitor and check why are my fps against each action; my app's fps down to -2.0 after sometimes during that drop for 2-3 seconds app was totally unresponsive

I had made the following changes in the app and I was so amused both Android + iOS apps are running on 60fps

1. avoid unnecessary redux store writes
2. avoid using Immutable.asMutable while updating data in store reducers
3. remove Immutable.asMutable from my selectors to avoid renders
4. decrease setInternal time and managing it efficient ways

[rahamin1]

Thanks a lot, @smali-kazmi!

• The app I am working on is using the immutable-js package, but I don't see any reference to Immutable.asMutable in the code.
• I do have two places in the code where I use setInterval (you have written setInternal but I assume that this is what you mean), but I don't see why they should cause any issue, and the app is slow when both are disabled.

Regarding the cause of the problem: if 0.59x is fast with the same code, and 0.63x is slow, it makes sense that it is because of changes in the react-native version, isn't it?

[smali-kazmi]

@rahamin1 its true 0.63x is slow as compare to 0.59x but changes i here; help me to make app useable;

in our code Immutable.asMutable was the main reason causing lot of re-render; and setTimeout cause to halt app sometimes;

[rahamin1]

Well, not relevant for my app. Still hoping to get a solution soon, looking forward to other people's ideas.

[Orange9000]

I too faced the same issue after upgrading from 0.64.2 to 0.66.1
All the animations were lagging and overall fps dropped drastically in a release apk built from command line.
What I did is imported my project to Android Studio, waited for gradle synch to be completed, changed Active Build Variant to release and built my apk using Android Studio.
Weirdly, release apks built using this method had no render performance problems.

[oferRounds]

Hey @Orange9000 did you find the reason for this issue? Facing the same issue, but building the release as you suggested has not solved the issue for me

[vksgautam1]

we also have same issue for android 0.67.4 react native. Any other possible solution for it. Tried above ones already.
App gets hang and sometimes response slow, specially on TouchableOpacity events.

[Orange9000]

Hey @Orange9000 did you find the reason for this issue? Facing the same issue, but building the release as you suggested has not solved the issue for me

Unfortunately not. From one release to another, something is changing in ways react-native renders certain components. And often, to the worst.
In my case, after upgrading, it was ScrollView's scrollTo method.

[Orange9000]

Found out what was causing the slow down of entire app's UI in my case. It is the adjustsFontSizeToFit prop I used on a certain screen. It's a known bug which was fixed in a latest version, see #33135

[github-actions]

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

[github-actions]

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