React Native App Development Part 2: How to Improve Performance of A React Native App

In the last blog in React Native series, I comprehended with the help of the architecture diagram that React Native bridges the gap between JavaScript and Native components. The performance of piece of JavaScript code is equivalent if not better than ideal native code. However, that is not the case with the bridge though.

The JavaScript realm cannot access data from Native realm just like that because it’s a completely different heap; it’s a completely different address space. Data between the realms is serialized. This serialization is expensive and takes place every time you send stuff between realms inside your app.

Keep passes over the bridge to the minimum for maximum performance

This brings us to the conclusion the key to writing performant React Native apps; the key to designing them is to keep passes over the bridge to a minimum.

Let’s consider a simple app. The app screen has a list of cards. The user can scroll that list of cards. An image welcomes the user to the app.

We’re gonna have two cool effects here on this image: the first effect is as the user is scrolling the list of cards, the image dissolves to the background and the second effect is an over scroll effect if the user is scrolling downwards when it is already at the top, the image zooms.

The layout for this screen is very simple.

We have two components side by side: the image component on the background and the ListView. These effects are tied to the scroll position. As the scroll position changes, we want to dissolve accordingly and as the scroll position changes upwards, we want to change the scale. To implement that in a native approach, you want to go with JavaScript and we want to hook up to the onScroll event of the ScrollView inside the ListView.

Set State from JS on every Scroll event

First of all, we have the ListView and if you actually hold a ScrollView, you can actually supply thescroll view by yourself to ListView with a prop called RenderScrollComponent.

On the ScrollView that I’m supplying, I’m hooking up the own ScrollEvent. And the implementation for this event would just implement our effect. Our own ScrollEventHandler will run every time the scroll position changes. It simply takes the scroll position and checks if the scroll position is positive. If so, the user is scrolling downwards and then we want to dissolve. So we will change the opacity from one to zero. If the scroll position is negative, the user is scrolling upwards in an over scroll. So we’ll change the scale from 1 to 1.4.

Performance Analysis: Passes over the bridge

In the above example, the left side here in purple is the JavaScript realm and the right side in black will be the native realm. On the JavaScript realm, we start by setting onScroll. The scroll component as I told you, every component is a native component at the end of the day.

When we set the onScroll event, we actually have to go over the bridge and set down scrolling native because the view underneath is a native view. We set the scroll, the user starts scrolling, and we have a scroll event. The scroll event is a native event because all views are native.

The events emerged from the native side but our logic that calculates own scroll is in JavaScript. Thus. we have to change and go over the bridge again. We calculate opacity and scale in their own scroll function in JavaScript as I showed you before and then we rerender. When we render the views the properties have changed have to go over the bridge again because the view itself is a native view.

We have to go once again and update the view itself. On the next frame, the user scrolls a little bit more.

Conclusion: Data cross the bridge on every frame

We can see that data is crossing the bridge on every frame. Now if your app is doing other things on the JavaScript thread. If your app is using the bridge for other purposes and you expect this effect to run at 60fps then this is not what not what you’ll get.

Want to reduce traffic on the bridge?

Tags

• React Native App
• React Native App Development