app is very slow in android Samsung 23 ultra

[rubbishCoder]

Description

App is very slow in Samsung devices especially in the android version 13 and also in the android logcat I get error

2023-08-28 17:37:37.826 1288-1288 LayerHistory | surfaceflinger | MainActivity$_27693#87452 Max (can't resolve refresh rate)

React Native Version

0.72.4

Output of npx react-native info

System:
OS: macOS 13.5.1
CPU: (10) arm64 Apple M1 Pro
Memory: 152.75 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.5.1
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.8.1
path: /opt/homebrew/bin/npm
Watchman:
version: 2023.08.14.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.12.1
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10671973
Xcode:
version: 14.3.1/14E300c
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.20
path: /usr/bin/javac
Ruby:
version: 2.6.10
path: /usr/bin/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

I just installed my app and run on the Samsung s23 ultra it was running fine but very slow and very bad response when I navigate. It takes around 10 seconds just to navigate, this issue occurs only in Samsung android devices. Is there any fix to it.

Snack, screenshot, or link to a repository

https://snack.expo.dev/qb7Cur_lU

[github-actions]

⚠️

Newer Version of React Native is Available!

ℹ️

You are on a supported minor version, but it looks like there's a newer patch available - 0.71.13. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[AndreiCalazans]

This seems unrelated to React Native core per say. What's likely impacting your navigation could be: the navigation library; a different JavaScript engine; animations; etc.,.

Can you add more information:

1. What libraries are you using for navigation
2. What JS engine are you using
3. Is there any animations happening and if so how are they being executed
4. Can you enable the performance monitor and see which thread is dropping frames when navigating (this can help indicate where to look)
5. Does this also happen if you use a bare react native app with react-navigation on that phone?

And if this is a problem with core React Native a reproducible repo would help initialize an investigation. If this is core problem you should be able to create a reproduction with just a bare app and no external libraries.

[rubbishCoder]

@AndreiCalazans animations or the navigation is not a problem, I thing the axis call is the one that cause the lag.

I tried to stop all the api calls and navigated between pages it was fine and rendering fast but when I do async or synchronous api calls the app is slow.

Using "axios": "1.5.0" and also I tried fetch which didn't have any impact, the app is still slow and navigations are very laggy if I make api calls, and this is occurring only in the android version 13 especially on the Samsung latest device like s22, s23.

Using below packages for navigation.

"@react-navigation/bottom-tabs": "^6.0.9", "@react-navigation/native": "^6.1.7", "@react-navigation/native-stack": "^6.2.5", "@react-navigation/stack": "^6.3.9",

Using Hermes js engine.

Lottie animation json is used to render animations "lottie-react-native": "^6.2.0".

Will create a repo with reproducible issue and update it.

[devoren]

May be related to #36296

[AndreiCalazans]

Possibly relate dto #36296, @rubbishCoder did you experience this slow down after upgrading? And yea, a reproduction sample can help us profile and see what's going on.

[rubbishCoder]

@AndreiCalazans @devoren even after updating to latest version I'm facing this issue. And I'm not able to recreate this in a different project

[devoren]

@rubbishCoder Can you downgrade to version 0.71.8 and see if there is a performance improvement?

[rubbishCoder]

@rubbishCoder Can you downgrade to version 0.71.8 and see if there is a performance improvement?

@devoren okay I will downgrade and check it

[rubbishCoder]

@devoren no effect after downgrading to 0.71.8

[devoren]

@rubbishCoder oh, this is bad, then we just have to wait for a patch or release from the RN developers :(, in my case 0.71.8 is much better than 0.72

[rubbishCoder]

@devoren does redux have anything to do with it?

[devoren]

@rubbishCoder I think this is a problem on the engine side and RN Core. Redux is only on the js side so it doesn't affect that much, but if you have a large store and heavy functions then yes Redux can affect. You can debug components where used redux and see if it affects

[rubbishCoder]

@devoren or @AndreiCalazans if I access redux state to set the stacks and also few data to be shown in bottom tab navigator, will it affect the navigation.

[AndreiCalazans]

@rubbishCoder hard to say simply from your comment, your app is total black box to us, there could be many factors at play.

What's not clear to me in your issue is if this was a regression that occurred after you upgraded your React Native version or if this was something you just found out that is impacting users on Samsung 23 ultra devices?

I ask the above because there is an ongoing issue with people experience app wide performance degradation on versions 0.70.x + #36296

[rubbishCoder]

@AndreiCalazans initially I found this issue on react-native 0.71.6. so later I upgraded it to 0.72.4 it was slightly better but still bad performance. It's not only occuring in s23 ultra, it's on Samsung devices with Android version 13.

[rubbishCoder]

@AndreiCalazans @devoren when I do asynchronous api calls the response takes more time in android version 13. For example in IOS it took 1 second same call in android takes 15 secs. Any idea what will cause this.

[AndreiCalazans]

@rubbishCoder can you try profiling it and comparing the iOS profilings with the Android? That's odd if the actual network request latency is the same. The difference could be the parsing of the request response so a profiling could help indicate where the time was spent. Save the CPU profilings and share it here for us to take a look.

See this for how to use chrome://inspect to profile performance.

[cortinico]

Can we have a reproducer and a video to understand "how bad" is the regression?

[rubbishCoder]

Can we have a reproducer and a video to understand "how bad" is the regression?

@cortinico
Like due to security reasons I can't share the video but for sure I see a delay in the API response that happens only in latest Samsung models. Like a API that takes 500ms in iOS and other android devices, but in Samsung s23 ultra it takes around 9 seconds. It's really weird.

[devoren]

@rubbishCoder Have you debugged your API request? At what part does the query become slow?

[rubbishCoder]

@rubbishCoder Have you debugged your API request? At what part does the query become slow?

@devoren

I make axios call and it take 10 seconds to return a response

[cortinico]

Like due to security reasons I can't share the video

We can't provide any support without a reproducer (when I say reproducer I don't mean your project but another project that behaves similarly)

[devoren]

I make axios call and it take 10 seconds to return a response

Did you check the time from the server when calling the request? Is the request on the server delayed by 10 seconds or does the response arrive with a delay of 10 seconds?

[rubbishCoder]

@cortinico I tried removing persist and test in Samsung S23 its still the same behaviour no difference. Ram usage drastically got reduced but still the performance was bad in s23. So not sure which is causing the issue.

[cortinico]

Again, without a reproducer we can't help in any form

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[meetp-zluck]

We are having the same issue. Most of the samsung device are lagging with 2 of our react-native apps. I've sensed the lag in from a normal device to high end devices Samsung 22 ultra. Lag is there in tabs as well. But same things are working smooth in other Brands devices from 4 years ago.

If anyone knows any workarounds or patches, I'd really appreciate. Thanks!

[PradeepKK13]

@rubbishCoder can you try profiling it and comparing the iOS profilings with the Android? That's odd if the actual network request latency is the same. The difference could be the parsing of the request response so a profiling could help indicate where the time was spent. Save the CPU profilings and share it here for us to take a look.

See this for how to use chrome://inspect to profile performance.

@cortinico @AndreiCalazans We had done the profiling and captured the trace from Samsung S23 Ultra and Oneplus 9pro. Sharing the trace for reference. Oneplus is working fine without any lag in network or in rendering but Samsung there is lag in both network and rendering.

Trace: https://drive.google.com/drive/folders/1f441btiLRdcpAwtktWhBrd8QHQN2yvL9?usp=sharing

[AndreiCalazans]

@PradeepKK13 this is helpful.

One thing that stood out while comparing those two traces is native module traces of callJavaModuleMethod are much slower on the Samsung S23 Ultra which is odd given that the S23 Ultra is a higher end phone.

This seems to be due to binder transactions taking much longer.

Evidence:

Traces to callJavaModuleMethod are faster on Oneplus

Note calls are at 36ms

Querying for max and averages

Max at 113ms while average is 0.8ms

On S23 Ultra

We see multiple callJavaModuleMethod calls taking 200ms and more

Max at 300ms while average is 2.91ms

Looking at the binder transactions we confirm slower binder transactions:

Summary:

callJavaModuleMethod	OnePlus	S23 Ultra
Average	0.8ms	2.9ms
Max	113ms	300ms
Observed	36ms	223ms

@PradeepKK13 it's not obvious if this is the reason for a slower rendering and networking but it could be. Can you do the same trace on this same Samsung S23 Ultra device using the previous React Native version that had no lag? This could help us compare the two traces and validate if the binder transactions got slower or were the same.

[PradeepKK13]

@PradeepKK13 this is helpful.

One thing that stood out while comparing those two traces is native module traces of callJavaModuleMethod are much slower on the Samsung S23 Ultra which is odd given that the S23 Ultra is a higher end phone.

This seems to be due to binder transactions taking much longer.

Evidence:

Traces to callJavaModuleMethod are faster on Oneplus

_Note calls are at 36ms_

Querying for max and averages

_Max at 113ms while average is 0.8ms_

On S23 Ultra

_We see multiple `callJavaModuleMethod` calls taking 200ms and more_ _Max at 300ms while average is 2.91ms_

Looking at the binder transactions we confirm slower binder transactions:

Summary:

callJavaModuleMethod OnePlus S23 Ultra
Average 0.8ms 2.9ms
Max 113ms 300ms
Observed 36ms 223ms
@PradeepKK13 it's not obvious if this is the reason for a slower rendering and networking but it could be. Can you do the same trace on this same Samsung S23 Ultra device using the previous React Native version that had no lag? This could help us compare the two traces and validate if the binder transactions got slower or were the same.

@AndreiCalazans Thanks for your insights. Unfortunately we don't have a React Native version in which there was no lag. Initial project was in 0.71.6 version which had the same lag and then we upgraded to 0.72.4 version which made no difference.

[diegolmello]

@PradeepKK13 can you try downgrading to 0.68?
It might help proving my point on #36296 (comment) and help getting visibility to this issue.
Thanks!

[chramos]

We are using 0.64.4 and we are also experiencing a really slow performance on Samsung s23.
Hermes is turned on for a long time (2 years approx.)
honestly, I never felt any improvement on turning on/off Hermes.
I'm going to turn it off and test
I come back to let you know

[nilsrk]

Also having issues running my React Native app on a OnePlus with OxygenOS (based on Android 13.x), very laggy

[aymericBerettoni]

hello, same issue for me, on an application that has been running without problem for 2 years, Issues on galaxy s23, has anyone been able to solve it?

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[hthieu1110]

I'm facing the same issue on Android using Exynos CPU. It's working very well on an Snapdragon one.
The network call is very slow : 5s vs 100ms on iPhone but I think the source of problem is the rendering which blocks the JS thread. Do we have any news on this thread ?

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[GuillaumeHemmen]

Can the stalebot be disabled on this one? This seems related to #36296 so i believe that is pertinent to keep it open.

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.

[dorshay6]

We are also facing that issue, any idea on whats next?

[pavelustenko]

bump