How Fast Is React Native New Architecture?
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.
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?
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 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.
- 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.
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
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
This is the performance when render 10.000 list of texts. It took 46.2 ms.
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
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!
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.
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)
The apps with new architecture is faster (always keeping 60fps), however the build times is significantly slower (7s to 1–13m)
- 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/)