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. 🎉