React Native New Architecture

The New React Native Architecture

The new react-native architecture includes many changes, some of which are listed below: -

Javascript Interface (JSI)

As we saw in the previous section, the current React Native architecture uses Bridge to make communication between the JS and Native threads in the form of JSON packages. 

The JavaScript and Native threads cannot communicate with each other directly and cannot call any function directly on each other. Therefore, when this package is received, it needs to be decoded on the other hand. Moreover, this data sent over the Bridge is asynchronous, but sometimes the JS and the native codes are needed to be in sync.

In the new react-native architecture, the Javascript engine can communicate directly with the native functions with the help of the Javascript Interface (instead of the Bridge), a general-purpose layer written in C++.

Fabric

The Fabric is the rendering system to replace the current User Interface manager. In the present system, when a react application is run, react executes the code to create a react element tree in javascript. The renderer then creates a react shadow tree from the react element tree in C++.

The shadow tree thus created is used by the layout engine for calculating the position of UI elements on the screen. Once the UI element's positioning is calculated, the shadow tree is transformed into a HostView Tree comprising native features.

But this results in a slower transfer rate and unnecessary data being transferred. And since the JS and UI threads are async, there can be some issues of lags and drop in frames (like when scrolling through huge amounts of data in a Flat list).

Here's where Fabric comes in, which is the new rendering system of React Native. The fabric rendering system can prioritize user interactions such as scrolling and gestures to execute them in sync. Other tasks like API requests would be asynchronous.

The new shadow tree thus created would be immutable and shared between both the threads for direct interaction. This further will allow a reduction in memory usage by the system.

Turbo Modules

In the current architecture, the native modules used by JavaScript (like Bluetooth, file storage, etc.) have to be initialized before the app starts. So, there is an extra loading time associated with these turbo modules, even if we do not need some of them.

Turbo modules allow the JavaScript to reference these modules, thus allowing the JS code to load each module when required. This will improve the start time for the React Native Apps.

CodeGen

Javascript is a dynamically typed language, and JSI is a Statically typed language written in C++. To ensure smooth communication between the two, a new static type checker is included called CodeGen. CodeGen can define interface elements used by Turbo Modules and Fabric by using the typed JavaScript. This results in more code being generated at build time instead of run time.

Frequently Asked Questions

What is a general-purpose interface?

The current architecture uses the JavaScriptCore Engine, the only compatible engine with the bridge. However, for JSI, the JavaScript Interface will be decoupled from the Engine, and it will allow the use of other JavaScript Engines like Chakra, Hermes, etc. Hence we call it the general-purpose interface.

How does JSI allow Javascript to directly interact with the Native module?

This is done via C++ host objects. The Javascript holds the reference to these objects and can invoke these objects and methods directly via these references. Javascript code holds a reference to any DOM elements and calls the methods on it. The JSI, unlike the bridge, will allow the JavaScript code to hold a reference to the Native Modules. JavaScript can directly invoke methods on this reference using the JSI. This removes the need to serialize JSON messages and can fix traffic and asynchronous issues on the bridge.

What are the key changes in React Native's new architecture?

The key changes can be summarized as follows:-

• JSI will take the place of Bridge for data transfer.
• Other engines than JavaScript Core can be used.
• Both the JavaScript and the Native threads can communicate with each other directly.
• Synchronized execution of time-sensitive tasks.
• Turbo Modules can be loaded when needed.
• Rendering like the web.
• Static Type Checking for making the JS and Native side compatible.

Conclusion

This article extensively discussed React Native New Architecture, its implementation, and its advantages over Old React Native Architecture.

Recommended Reading: Instruction Format in Computer Architecture

We hope that this blog has helped you enhance your knowledge regarding React Native Profiling. You can also consider our React Js Course to give your career an edge over others. If you would like to learn more, check out our articles on Code studio. Do upvote our blog to help other ninjas grow.

“Happy Coding!”