How did we fix a massive CPU perfomance issue in our React Native iOS app
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.
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.