Deep dive into React Native’s New Architecture
The React Native team has announced that the new architecture will be rolled out in 2022. Checkout their full blog here.
“2022 is going to be the year of the New Architecture in open source”
Since the release is just around the corner, this is a good time to understand what changes are taking place under the hood and how they might affect your React Native App.
This article aims to cover the most important changes bought by the re-architecture:
- Turbo Modules
Before we get to the new architecture, let’s recap how the current one works.
Please note that I am only covering points that are relevant to understanding this blog, If you want to learn more about the current architecture, you can checkout this blog by Bianca Dragomir.
In a nutshell:
The Execution of React Native apps happens over three threads:
2) The Native/UI thread: used to run the Native Modules and to handle operations like UI Rendering, user gesture events etc.
3) Additionally there is a 3rd thread called the shadow thread, which is used to calculate the Layout of Elements before rendering them on the host screen
The Communication between the JS and Native Threads is carried over an entity called the bridge. When sending data through the bridge it has to be batched(optimized) and serialized as JSON. This bridge can only handle asynchronous communication.
Some important terms:
Yoga: It is the name of a Layout engine, which is used to calculate positions of UI elements for the user’s screen.
In the current architecture, React Native uses the Bridge Module to make communication possible between the JS and Native threads. Every time data is sent across the bridge, it has to be serialized as JSON. When the data is received on the other side it must be decoded as well.
Another important point to note is; messages send over the bridge are asynchronous in nature, which is a good thing for most use cases, but there are certain instances when JS code and native code needs to be in sync.
Let’s take an example to better understand the bridge:
What does general-purpose mean?
const container = document.createElement(‘div’);
Another big advantage of the JSI is that it is written in C++. With the power of C++ React Native can target large number of Systems like Smart TVs, Watches etc.
Fabric is the rendering system, which will replace the current UI Manager.
In order to understand the advantages of Fabric, first let’s look at how UI is currently rendered in React Native:
This shadow Tree is used by the Layout Engine to calculate positions of UI elements for the host screen. Once the results of Layout calculation are available, the shadow tree is transformed into HostViewTree, which comprises of Native Elements. (For example: The ReactNative <View/> element will be translated into ViewGroup in Android & UIView in iOS respectively)
Problems with this approach:
As we know, all the communication between threads happens over the bridge. Which means slow transfer rates, and unnecessary copying of data.
For Example: If a ReactElementTree Node happens to be an <Image/>, then the consequent node of the ReactShadowTree will also be an image. But this data will have to be duplicated and stored separately in both the nodes.
That’s not all. Since the JS and UI threads are not in sync, there are certain use cases when your app can seem laggy as it drops frames. (Example: Scrolling through a FlatList with a huge list of data)
What is Fabric?
According to the official ReactNative documentation,
“Fabric is React Native’s new rendering system, a conceptual evolution of the legacy render system”
What are the benefits of Fabric?
With the new rendering system, user interactions such as scrolling, gestures etc can be prioritized to be executed synchronously in the main thread or native thread. While other tasks such as API requests will be executed asynchronously.
That’s not all. The new Shadow Tree will be immutable, and it will be shared between the JS and UI threads, for allowing straight interaction from both ends.
As we have seen, in the current architecture React Native has to maintain two hierarchies/DOM nodes. But since the shadow tree will now be shared among realms, it will help with reducing memory consumption as well.
3. Turbo Modules
That’s why the new architecture will also include a static type checker called CodeGen.
If we combine all the changes, the new architecture will look like this:
Here the key highlights are:
• Bridge will be replaced by JSI
• Complete Interoperability between all threads
• Web-like Rendering system
• Time sensitive tasks can be executed synchronously
• Lazy Loading of Turbo Modules
• Static Type Checking for compatibility between JS and Native Side
We can be certain that this new structure will give React Native some powerful improvements.