Performance issue
We experience performance issues with our ReactNative app unblnd.com/app. The app starts being slow on most Android phones after a few minutes using the app (after install).
What has been done?
A) Api Request
Some api requests are a bit slow, but querying has been improved. The queries don't influence the app performance on iPhone. Concluded can be that the api requests aren't making the app laggy.
We will temporarily boost our server within AWS to completely make sure this isn't causing the issue.
B) Navigation
We found some sources stating react-navigation v5 would be slow. Therefore we looked to the navigation stack, but we get a similar slow performance with react navigation v4 and v5:
@react-navigation/native: ^5.9.4
@react-navigation/stack: ^5.14.5
---
react-navigation: ^4.4.4
react-navigation-stack": ^2.10.4
C) Caching / Memory
The caching size increases from 0MB to 12MB when using the app. The app could already be slow from 3MB caching size. It seems doubtful this can be blocking the flow as other apps can take up more than 1GB cached data size.
D) React Context
We have an extensive chat system. All the screens related to the chat are wrapped into a react context. We have been cleaning the stored data into the context, but the app can be slow for users having not that much chat data cached in the context too. Therefore, too many repetitive renders could cause an issue?
<ChatContext.Provider value={{...}}>
<Stack.Navigator>
<Stack.Screen ...>
x 20
</Stack.Navigator>
</ChatContext.Provider>
There are 20 screens in the React Context. Is there any good practice regarding contexts?
To do:
- We will make an app version without context;
- How can we monitors these (potential) renders?
E) Monitoring
We started using Sentry Monitoring. There are no specific issues raised. Within Performance only http requests are shown. Sometimes it just states navigation and sometimes with missing integration.
Using FlatList we get
VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.
We could try to solve this, but this cannot cause blocked navigation for the whole app?
F) Memory Leaks
The most obvious one looking to the symptoms. But it is really difficult to find out what could cause such memory leak.
Within Sentry we just found one clue about a memory leak. We just disabled this component, but Android phones are still slow.
Guidance
We have been trying and fixing lots of different parts. Anyone has tips, ideas, recommendation to find our what is causing the slowness on Android phones?
General Info
npmPackages: react: 17.0.1 react-native: 0.64.2