In a recent blog published by React Native, it has been announced by the team there will be a new architecture going to roll out in 2022. The announcement came just after the React Native team released version 0.67 last month. I have already discussed the new changes brought in by v0.66 last month.

However, many other releases are expected from the development team of React Native in 2022. So, it’s the right time to know and understand the changes that are taking place under the hood, which may affect your React Native application.

This article covers the most important changes bought by this re-architecture and what’s expected out of it. But first, let’s understand the current architecture of React Native:

Current Architecture of the React Native

Here, we are only going to give you an overview of the architecture that React Native currently works on. The thing you have to understand here is the current architecture in React Native apps bundle the JavaScript codes together into a JS file. It keeps the Native code separate.

The React Native apps’ execution happens through three threads namely JavaScript, Native/UI, and Shadow Thread.

• The JavaScript thread is where the JS bundle is run through the use of the JS engine.
• The Native/UI thread is used for running the modules. Also, it deals with the operations like UI rendering and user gestures.
• The additional 3rd thread is used for calculating the Layout of Elements before it renders these elements on the host screen.

An entity called a bridge makes the communication between the JS and Native Threads possible. The data, while sent through the bridge, should be optimized and serialized as JSON to handle asynchronous communication.

Some important terms to remember are JavaScriptCore and Yoga. JavaScriptCore is a JavaScript Engine used by React Native to execute JS codes. And Yoga is the name of Layout Engine which is used by the framework to calculate the position of UI elements on the users’ screens.

Now, let’s cover the important changes the New Architecture of React Native will bring with itself:

What’s Expected from the New Architecture React Native Has Opted for?

1. Introduction of JavaScript Interface (JSI)

In the current architecture, the JavaScript thread and Native threads are unaware of each other’s worlds and cannot directly call a method on each other’s thread.

Also, the data sent through the bridge is in an asynchronous state, which is good for most cases but not when the JS code and native code need to be in a synchronized state.

Suppose, a React Native app that is based on the current architecture requires access to a native module. First, the JS thread has to send a serialized JSON message to the bridge, which will be optimized on the way to the Native thread. Then, it’ll be decoded and finally, the native code is executed.

But the new architecture will replace the bridge with the JavaScript Interface. JSI is a lightweight C++-based general-purpose layer for the JavaScript engine to directly call the native code.

The general purpose here means that the JSI is decoupled from the JavaScript engine. What this means is that the new architecture enables the use of other JS-based engines like Hermes, Chakra, v8, etc.

In essence, the JSI will enable the use of other JS engines and implement complete interoperability. Also, being written in C++ means React Native can target large systems such as Smart TV, Wearables, etc.

2. Fabric

The Fabric in the new architecture will replace the UI manager from the current architecture. Fabric is a rendering system the new architecture will introduce this year.

Since we all know that all the communication in the current architecture happens over the bridge, which means slow transfer rates and unnecessary data copying.

Also, the JS and UI threads are not in sync, there are instances when your apps may seem laggy due to the drop in frame rate.

According to the React Native official documentation,

Fabric is React Native’s new rendering system, which is a conceptual evolution of the legacy render system.

The benefit of this new rendering system is that the user interactions such as scrolling, gesture, etc. can be prioritized.

3. Turbo Modules

The current React Native architecture requires JavaScript to initialize all the modules even before the app is opened. What this means is that if a user doesn’t need a particular module, it still has to be initialized.

But the new architecture in React Native apps enhances these old Native modules into Turbo Modules. JavaScript now will hold a reference to these modules and allow JS codes to load modules when required. This will eliminate the need to improve the startup time of apps.

4. CodeGen

All of the above upgrades in the New Architecture for React Native sound promising. However, the JS is a dynamically typed language whereas C++ is a statically typed language using which JSI is also written. Thus, there needs a module that can smoothen out the communication between the two.

That’s where CodeGen comes in. It is a static type checker which will define interface elements Turbo Module and Fabric may use. Also, it will generate additional native code at build time than the run time.

Conclusion

So, the key highlights that are expected from this change of architecture by React Native are the elimination of bridge and introduction of JSI, swapping JSCore with other engines, complete interoperability, web-like rendering, Turbo Modules, and static type checker. All these improvements and enhancements are sure to bring more power to the React Native apps.