React Native Performance

#ReactNative performance and some tricks & tools to optimize your React Native application:

  • Every character typed in the Native component involves the physical event, transforms it in letter or action, and then transmits it by the bridge to the JS component.
  • In all of the transactions of data between JS and Native, the Bridge always intervenes so that the data is included in both parts.
  • The Animated library has been created to improve the performance of the animations, and its objective is to lighten the use of the bridge by sending predictions of the data to the native before starting the animation.
  • Thankfully, the Bridge isn’t the only one at fault, and there are many other ways to optimize a React Native application.Therefore, here is an exhaustive list of why and/or how you can optimize your application:

    The React Native “tooling” is not yet very developed, but a great part of the toolset is that itis coming from the application.

  • The performance of a React Native application is very important.

React Native Performance written by Pierre Monge: one of the many blog articles from Packt Publishing

@PacktPub: #ReactNative performance and some tricks & tools to optimize your React Native application:

Since React Native[1] came out, the core group of developers, as well as the community, kept on improving its framework, including the performance and stability of the technology. In this article, we talk about React Native’s performance. This blog post is aimed at those people who want to learn more about React Native, but it might be a bit too complex for beginners.

How does it work?

In order to understand how to optimize our application, we have to understand how React Native works. But don’t worry; it’s not too hard.

Let’s take the following piece of code into consideration:

Let’s discuss what it represents. React Native bases itself on two environments: a JS (Javascript) environment and a Native environment. These two entities communicate together with a bridge.

Here, we simply have a Text Input. Most of the component involves all the branches of the React Native stack. This Text Input is called in JS, but is displayed on the device in Native. Every character typed in the Native component involves the physical event, transforms it in letter or action, and then transmits it by the bridge to the JS component.

In all of the transactions of data between JS and Native, the Bridge always intervenes so that the data is included in both parts. The bridge has to serialize the data.

The bridge is simple. It’s a bit stupid, and it has only one job, but… it is the one that will bother us the most.

Imagine that you are in an airport. You get your ticket online in five minutes; you are already in the plane and the flight will take the time that it’s supposed to. However, before that, there’s the regulation of the flight—the checking in. It will take horribly long to find the right flight, drop-down your luggage at the right place, go through security and get yourself checked, and so on.

Well, this is our Bridge.

Js is fast even though it is the main thread. Native is also fast, but the Bridge is slow. Actually, it’s more like it has so much data to serialize that it takes it so much time to serialize that he can’t improve its performance.

Or… It is slow, simply because you made it go slow!

The Bridge is optimized to batch the data[2]. Therefore, we can’t send it data too fast; and, if we really have to, then we have to minimize to the maximum.

Let’s take for example an animation. We want to make a square go from left to the right in 10 seconds.

Here is an implementation in pure JS of a pseudo animation. This version, where we make raw data go through the bridge, is dirty. It’s dirty code and very slow, TO BAN!

It’s already much more understandable. The Animated library has been created to improve the performance of the animations, and its objective is to lighten the use of the bridge by sending predictions of the data to the native before starting the animation.

The animation will be much softer and successful with the rightful library. The general perfomance of the app will automatically be improved. However, the animation is not the only one at fault here. You have to take time to verify that you don’t have too much unnecessary data going through the bridge.

Thankfully, the Bridge isn’t the only one at fault, and there are many other ways to optimize a React Native application.Therefore, here is an exhaustive list of why and/or how you can optimize your application:

The React Native “tooling” is not yet very developed, but a great part of the toolset is that itis coming from the application. A hundred percentof the functionality is native. Here is a short list of some of the important tools that should help you out:

You now have some more tricks and tools to optimize your React Native application. However,there is no hidden recipeor magic potion…It will take some time and research.

The performance of a React Native application is very important. The joy of creating a mobile application in JavaScript must at least be equal to the experience of the user testing it.

Pierre Monge is an IT student from Bordeaux, France. His interests include C, JS, Node, React, React Native, and more. He can be found on GitHub @azendoo.

[1] React Native allows you to build mobile apps using only JavaScript. It uses the same design as React, allowing you to compose a rich mobile UI from declarative components.

React Native Performance