How did we fix a massive CPU perfomance issue in our React Native iOS app
![Cristian](/assets/images/avatar-cg-2.jpg)
![How did we fix a massive CPU perfomance issue in our React Native iOS app](/assets/images/heap-cover-up.jpg)
Our users started to give us bad app reviews complaining about scroll lag, keyboard typing lag and an overall bad experience.
People were not happy… here are some examples:
What did we do?
I started to profile the app and I saw only a small amount of memory leaks, most of the components were loaded fine with not so many re-renders.
The main surprise was under the hood.
We recently added an analytics library, called Heap, which has a nice feature, called Event Auto-Capture, which basically captures and sends all of the touch events.
That thing was eating up all of the CPU power.
Here are two CPU profiling graphs before and after I applied the fix.
What happened?
As Jerry wrote here: https://github.com/heap/react-native-heap/issues/235
“When a user action takes place, Heap walks up the view hierarchy to gather contextual information about the view that was tapped. “
“React Native’s -[RCTView accessibilityLabel] is notoriously poor performing, as it is possible for it to recursively walk the entire view tree in worst case scenarios, while generating strings in a very inefficient manner.”
As you can see, that Github thread is marked as Closed
and that issue was fixed (in v0.17.0) like this:
but it’s not working! Not if you don’t use Heap’s auto init feature!
Our React Native app is a bit more complex, we don’t use the auto init because we need to initialise Heap for multiple environments, each having a debug/release mode.
The fix that worked for us was this one:
Maybe you wonder how can you edit Objective-C code that lives inside a npm package? You can just patch it, using patch-package.
However, I don’t always recommend this, don’t use it if you have a lot of changes to do.
Everything is fine now and our users will be happy to enjoy again a smooth React Native app. 🎉
Did you experienced something similar? Leave comment bellow and let’s connect here.
Comments