Rendering Performance Evaluation - Android SDK vs React Native

UI rendering speed has always been a key factor in evaluating a new technology. The lower the rendering time, the more preferable the technology. In recent times, React Native has become very popular for developing native apps. Such apps are truly native and significantly different from other similar technologies like Xamarin and Cordova. I recently had some time to evaluate how React Native compares to the Android SDK.

TLDR: As you might expect, the Android SDK outperforms React Native by a significant margin. However, React Native technology is slowly catching up (most of the credit goes to the amazing diff rendering technology, which forms the core of React). React Native is efficient enough for apps with a small number of UI components that can be rendered within a reasonable time.

Performance Comparison

Emulator

Model - Google Pixel 2
API Level - 24
Resolution - 1080 x 1920 (420 dpi)
CPU - x86
Target - Android 7.0
RAM - 1536 MB

Evaluation Criteria

We will be creating a large number of text views for evaluating the performance of the Android SDK and React Native. These text views are very simple and do not contain more than 17 characters.

Code

Let's jump to the code for Android SDK.

So, we have a text box where you can enter the number of text views to be rendered. When the button is clicked, it displays the rendered text views along with the time taken for rendering. Remember that every time you click the button, all the text views are being re-created.

Here is the output produced:

Time taken: 1.366

Sample Text: 0

Sample Text: 1

Sample Text: 2

...

Let's look at an equivalent code in React Native.

Don't worry if the code looks unfamiliar. The code is written in TypeScript, which compiles down to JavaScript. Remember that componentDidUpdate() is called whenever the component is re-rendered, i.e., whenever the state of the app is updated. To make the code only evaluate the creation of text views, we have a special state called evaluateViewRendering which is set to true only when the views (containing an array of text views) changes. The UI is similar to the one developed on the Android SDK. Here is the output generated:

Time taken: 0.913

Sample Text: 0

Sample Text: 1

Sample Text: 2

...

Note that you need to reload the entire React Native app each time before the input can be made. This is because React Native makes use of diff rendering to render only the changed content, i.e., only the updated views are created, and not everything.

The following figure shows the rendering time of the two apps:

Chart showing the time taken by Android SDK and React native app

As one can see, there is a huge disparity between the rendering times of the Android SDK and React Native. React Native is at least 30 times slower than the Android SDK when compared directly. This was expected as React Native translates the components into Android native components at runtime.

Diffing Performance Comparison

Based on the previous evaluation, one might deduce that React Native has a very large rendering time and should therefore not be preferred over the Android SDK. However, we are missing out on a very important part of the React framework: the diff calculation of components that have actually changed. In a user interface, the rendering time of updates (how quickly updates are rendered to the UI) is even more crucial.

To conduct a more accurate evaluation, we are going to make some minor changes to the code. We will no longer use an input from the user. Instead, we will render 10,000 text views in chunks of 1000.

Here are the Android SDK and React Native implementations of the same.

As one can see in the code above, we are calculating the time taken to add 1000 text views to the UI. In the case of React Native, we are adding 1000 text views and then updating the state to reflect the change.

Here is the output produced by the Android code:

Time taken: 0.048

Time taken: 0.042

Time taken: 0.045

Time taken: 0.04

Time taken: 0.046

Time taken: 0.039

Time taken: 0.043

Time taken: 0.046

Time taken: 0.042

Time taken: 0.044

Sample Text: 0

Sample Text: 1

Sample Text: 2

...

Here is the output produced by the React Native code:

Time taken: 1.31

Time taken: 1.626

Time taken: 1.619

Time taken: 1.577

Time taken: 1.618

Time taken: 1.761

Time taken: 1.678

Time taken: 1.773

Time taken: 1.923

Time taken: 2.001

Sample Text: 0

Sample Text: 1

Sample Text: 2

...

As one can see, the update rendering time is still far too low in the case of the Android SDK (almost negligible). Whereas, in the case of React Native, the update rendering time is still large, but it is now within an acceptable range. Each update is rendered in almost the same time, regardless of how many views were already present. This clearly demonstrates the power of diff rendering and how React leverages it to speed up performance.

Feel free to experiment with the code. For example, convert the views to a RecyclerView (Android SDK) and a FlatList (React Native) and observe how quickly they render. 

Conclusion

React Native is slowly catching up in terms of speed. The creators of React Native dream of making React Native at least as fast as Android. Although this might seem to be a far-fetched dream for now, they do have a lot of improvements planned for the future. I am sharing two videos from React Conf 2018 and 2016 where the team shares their plans:

https://www.youtube.com/watch?v=UcqRXTriUVI

https://www.youtube.com/watch?v=0MlT74erp60