Over a million developers have joined DZone.

React Native Development (Part 2): Improving Performance

DZone's Guide to

React Native Development (Part 2): Improving Performance

We continue our investigation of the React Native framework's architecture with an to improving the framework's performance.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

In the last article in our React Native series, with the help of the architecture diagram we saw 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.

react native app performanceThe JavaScript realm cannot access data from the 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 that the key to writing performant React Native apps is to design them 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.

react native appWe'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 the scroll view by yourself to ListView with a prop called RenderScrollComponent.

Set State from JS 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

Passes over the bridgeIn the above example, the left side here in blue is the JavaScript realm and the right side in black is the native realm. In the JavaScript realm, we start by setting onScroll. The scroll component, as I told you, 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.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

react native ,mobile app development ,react native architecture ,web dev ,tutorial ,react native performance

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}