Dec 12, 2022
How Fast Is React Native New Architecture?
Introduction
React Native has been adopted by many companies, from small companies to the leading tech companies such as Tesla, Coinbase, and Facebook. Since it was released, the React Native core team has been working hard to improve the environment: tools, architecture, performance, and so on.
Current Problem
Many developers are complaining on how react native works under the hood. Currently there are 3 threads that are used: Javascript thread which processes all javascript related code (such as business logic and API call), UI/Native thread which processes rendering layout until it is displayed to the user, and shadow thread which help to calculate the layout element. Communication between JS thread and UI thread are running asynchronously. This makes the JS thread impossible to communicate directly to the UI/Native thread. Moreover, communication that is established is using JSON format which can take an amount of time to serialize/deserialize. These problems make react native can not as fast as native apps in terms of performance.
Solution
React Native team has been preparing react native with new architecture that has significantly better performance. That new architecture was just released to the public in 2022. But how does it work? How much more performance do we get than the react native apps without new architecture enabled?
Content
In this article, we will discuss those questions.
What Is New Architecture
Based on react native docs, they state that new architecture offers developers new capabilities for building highly performant and responsive apps. There are 3 points that built this new architecture:
- The New Native Module System — Turbo Modules, a framework to support efficient and flexible integration with native code
- The New Native Renderer — Fabric, which offer improved capabilities, cross-platform consistency, and performance in rendering
- The Codegen, which generates boilerplate C++ required by the New Architecture via static typing in JavaScript
JSI
Javascript Interface (JSI) is the new layer that helps in communication between Javascript and Native Platforms easier and faster. It is the core element in re-architecture of React Native with Fabric UI Layer and Turbo Modules.
JSI removes the need for a bridge between Native(Java/ObjC) and Javascript code. It also removes the requirement to serialize/deserialize all the information as JSON for communication between the two worlds. JSI is opening doors to new possibilities by bringing the javascript and the native worlds. These are explanation list that can describe what the JSI are:
- Javascript Interface which allows us to register methods within the Javascript runtime. These methods are available via the global object in the Javascript world.
- The methods can be entirely written in C++ or they can be a way to communicate with Objective C code on iOS and Java code in Android.
- Any native module that is currently using the traditional bridge for communication between Javascript and the native worlds can be converted to a JSI module by writing a simple layer in C++
- On iOS writing this layer is simple because C++ can run directly in Objective C hence all the iOS frameworks and code is available to use directly.
- On android however we have to go an extra mile to do this through JNI.
- These methods can be fully synchronous which means using async/await is not mandatory.
How Fast?
We will compare 2 apps that basically do the same thing: render 10.000 rows in the FlatList where the item component is a single text. We will compare using the newest version (0.70.6) with 2 variables: with and without new architecture enabled. These experiments will be in debug mode and we will use react devtools and in-app “Show perf monitor” to measure it.
apps A = RN app with new architecture disabled
apps B= RN app with new architecture enabled
Code:
Apps A
Build Time
We made clean build and the result was so fast! it took only 7s to build it successfully.
In App Perf Monitor
When we click the “RENDER LIST” button, the JS thread falls into ~35 fps and when we continue to scroll the element, the fps was decreased more to ~20–35fps
react devtools
This is the performance when render 10.000 list of texts. It took 46.2 ms.
Overall Experience
We built the release mode and found out that the apps feels smooth and fast. however, when click render button, the list is rendered with a white screen (appear a few ms) and we still can make scrolling faster
Apps B
Build Time
We made clean build and the result was significantly. slower than the apps A! it took ~13m to build it successfully. I noticed that they trying to download deps downloadBoost which make the build slower (it’s size is 124MB). This 13m can be faster if you have a good internet connection
In App Perf Monitor
When we click the “RENDER LIST” button, the JS was not changed, it is 60 fps and when we continue to scroll the element, the fps was still consistent in 60fps. amazinggg!
react devtools
This is the performance when render 10.000 list of texts. It took 84.3 ms. Almost 2 times slower than the apps A. At this point, i don’t know this is legit or not because i initially think that the rendering expected to be faster than apps A. This data can be bias as we run it in debug mode.
Overall Experience
We built the release mode and found out that the apps feels smoother and faster than apps A. when click render button, the list is rendered without getting a white screen and we can make scrolling faster (it loads the item faster)
Conclusion
The apps with new architecture is faster (always keeping 60fps), however the build times is significantly slower (7s to 1–13m)
Reference
- Why A New Architecture (https://reactnative.dev/docs/the-new-architecture/why)
- Deep dive into React Native’s New Architecture (https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd)
- React Native JSI: Part 1 — Getting Started (https://blog.notesnook.com/getting-started-react-native-jsi/)
