What is the New architecture?
React Native's new architecture was introduced in version 0.68 and was made default in 0.76. It was built to unlock capabilities and improvements that were not possible in the legacy architecture. Switching to the new architecture unlocks these new capabilities which in turn can help improve the performance of your apps. I say can because performance improvements will vary depending on how your app is designed, implemented and built.
The new architecture comprises of Fabric, Turbo Native Modules, Codegen, and the JavaScript Interface (JSI).
How can each pillar affect performance?
Fabric, the new rendering system, enables more efficient UI updates by minimising the time it takes to update the UI, including smoother scrolling, more responsive focus changes, and fluid animations.
Turbo Native Modules are the next iteration of Native Modules that address the asynchronous and loading problems by lazy loading modules. Turbo Native Modules can improve performance as by bypassing the JavaScript bridge and directly communicating with native code, they reduce the overhead of communication between JavaScript and native code. This can mean faster app startup and quicker response times from the Native layer, addressing a common pain point in the app user experience where users expect instant responsiveness.
JSI (JavaScript Interface) eliminates the overhead of the bridge by providing an abstraction layer to the JavaScript Runtime. This synchronous communication significantly reduces latency, creating more fluid interfaces.
Codegen enhances type safety and reduces runtime overhead. Additionally, Codegen facilitates the creation of JSI bindings, and utilizing these bindings allows your app to achieve faster and more optimized communication between the native and JavaScript layers, leading to more stable and efficient apps.
Finally the New Architecture adds full support for modern React features, including automatic batching which is when React groups multiple state updates into a single re-render for better performance and now this will happen automatically.
Testing Performance
As mentioned the performance improvements will vary depending on your specific app structure. However in order to do some basic tests Meta created an App that benchmarks the old vs new architectures.
They measured an average of five measurements on physical mobile devices running React Native 0.72.0-RC.1 and the results can be found here.
I modified the app to run react-native-tvos@0.73.6-0 to add TV support. You can find my repository here.
Additionally, I created a typical MovieCard component consisted of a View, Image and 2 Text elements and took an average of 5 measurements when rendering the component 1500 times using both the old and new architecture.
Results
Performance is particularly important for Apps that run on TV devices as these devices typically have resource constraints. Due to this, I decided to test on the Android TV emulator and 2 of our Amazon Fire Devices - a Tablet and a TV Stick.
- On a 1080p TV emulator running Android 14 there was an average of ~500ms improvement when using the New Architecture.
- On a Fire HD Plus tablet (10th Generation) running Fire OS 7.3 there was an average of ~900ms improvement when using the New Architecture.
https://asset.cloudinary.com/dd6mweway/1e8b4d0ff24f1858387d0c65338b6a63
- On a Fire TV Stick HD running Fire OS 7.6 there was an average of ~1000ms improvement when using the New Architecture.
Old Architecture
New Architecture
Note: On the Fire TV, I had to use a mouse as the performance was measured using a TimeStamp value that was only generated when the onPress of the button was triggered by 'touch'. I will try to add this value to the onPress event object to be included even when the onPress is triggered by the D-Pad enter key.
Community Testing
There are other developers that have seen improvements in performance by switching to the new architecture. Kraken saw render times got significantly faster, but with large variability between different screens and the biggest improvement on the slowest devices.
You can also see some UI benchmarks from Alexandre who is a maintainer of the React Native performance measuring tool, Flashlight.
Moving to the New architecture
While the performance benefits of migrating to the new architecture depend on the app, the UI improvements are clear. Although the transition requires effort, the long-term benefits of Fabric, Turbo Native Modules, JSI, and support for the latest React features like Suspense and Concurrent Mode, make it a worthwhile investment.
You can find the full instructions in the dedicated working group on how to migrate to the new architecture. You can also test out the benchmark app with your own scenarios or my TV supported fork of the benchmark app here.
Top comments (0)