6th Apr 2022

Introduction to React Native’s New Architecture

Mean

Written By, Hetal Shukla

Overview

  • The React Native team has announced that the new architecture will be rolled out in 2022.
  • This piece (of writing) aims to understand the most important updates brought by the new architecture.

Current Architecture

Before we get to the new architecture, let’s recap how the current architecture works.
The current execution of react native apps happens over three threads:

  • JS Bundle: Responsible for executions of JS Bundle by using JS Engine.
  • Native UI: Responsible for running the native modules to handle functions like UI rendering and user events etc.
  • Shadow: Responsible for calculating all the positions and layouts for an element and transforming it into the native element.

Presently the communication between JS Bundle and Native Threads is persisted with an object called a bridge. When delivering data through the bridge it has to be optimized as JSON. This bridge can only handle asynchronous transmissions.

current_arch_react

JavaScript Interface (JSI)

The beauty of this interface is that it is written in C++. It has decoupled this JSI from the existing JAVASCRIPT code engine which is working in react native.

  • Currently, render requests or any data is sent over React Native bridge which is using JSON for communication with data.
  • If we want to send a huge amount of JSON data between the native and Javascript realm we run into bottleneck problems due to the long processing time of huge JSON data.

jsi_react

  • By using JSI we will be able to directly call native functions without passing huge amounts of data, also with JavaScript and Native realme data sharing, we will not even copy any data from two worlds. This will help us solve the JSON processing time problem.
  • Even though JSI will be used mostly by library developers, the app developers will benefit from the JSI when we need it.
  • JavaScript will reduce the need to serialize JSON and it will resolve congestion issues.
  • With the power of C++, React Native can target a big number of systems like smart Watches, TVs, etc.

Fabric

Fabric is React Native’s new rendering system, conceptual evolution of the legacy render system. React Native world is taking a new approach to how to render UI elements.

Currently, React Native rendering happens in the below order in general:-

  • React -> React Shadow Tree -> Bridge -> Native UI

When Fabric is released rendering order will be like the below in general:-

  • React -> Native -> Shadow Tree (C++) -> Native UI

What are the benefits of Fabric?

  • Fabric will move the Shadow Tree mechanism which helps renderers to render the only changed sections of our app to the native realm by using C++. To be able to do that fabric will benefit from the concurrent rendering mechanism of React 17 and above.
  • With the support of multi-priority and synchronous events, the renderer can prioritize certain user interactions to ensure they are handled in a timely manner.
  • With the support of multi-priority and synchronous events.
  • Easier to implement server-side rendering for React Native.
  • Consistency of the new render system is cross-platform, it is easier to keep consistency among different platforms.

Turbo Modules

Turbo Modules are basically an enhancement over these old Native modules.
At the runtime of the application, the Turbo Models open a bridge that will later allow the JS code to initialize any module at its first use, The modules thus created will have the same structure as any other module. Turbo Modules enable us to load and initialize native modules only when they are needed.

Summary

If we combine all the updates, the new architecture will look like this.

new_arch_react
Here the key highlights are:

  • Ability to swap the JavaScriptCore with other Engines.
  • The bridge will be replaced with JSI.
  • Time-sensitive tasks can be executed synchronously.
  • Lazy loading of turbo modules.

This new structure will give React Native some powerful improvements.

Happy Coding..!!!

Written By,

React Native Developer at Yudiz Solutions Pvt. Ltd