React Native New Architecture

React Native has announced the release of version 0.76. With this update, the new architecture will now be enabled by default. Prior to version 0.76, the only way to enable the new architecture was by opting in.

This blog will focus on what's new in the new architecture.

The new React Native architecture has been making headlines for over a year, and for all the right reasons. This new architecture, also known as 'Bridgeless'. Why is it called Bridgeless? We’ll explore this in the blog."

Before we explore the new architecture, let's quickly recap the previous one.

📱 Recap of old architecture

a. There are two lands - JavaScript, and Native.

b. There are 3 threads:

• JavaScript Thread (JavaScript): Responsible for the JavaScript bundle code.
• Main, UI Native Thread : Responsible for the native modules.
• Shadow, or background Thread (Yoga): Responsible for the layout.

c. The only way JavaScript and Native code can communicate to each other is through the Bridge.

d. Any native component, such as Button or Alert, is serialized into JSON in the JavaScript layer and sent through the bridge to the native thread. In the native thread, this JSON is then converted into a native (iOS or Android) component.

e. In the native thread, when an event occurs on a native component, it sends the event as JSON to the JavaScript thread through the bridge. This communication is asynchronous, enabling the bridge to facilitate interaction between JavaScript and native components.

🚩 Problems with old Architecture

Communication between the JavaScript and native layers relies on the bridge, which is the main limitation of the old architecture.

1. Performance Issues

2. Jerky or empty frames

3. Duplication of the nodes

✨ Goal of new architecture

The new architecture focuses on resolving the challenges of the previous one. Its goals are to:

1. Fast startup 🥳

2. Concurrent rendering 🎟️

3. Responsive apps 🧑‍💻

4. Support on multiple platforms 🎮

5. Less crashes 🧨

6. Better memory management 💃

7. Synchronous execution 🎢

🆕 New Architecture

The new architecture is a rewrite in C++, which has unlocked two major improvements:

A. Direct communication between JavaScript and native layers without a bridge. This is why the new architecture is commonly known as 'bridgeless.'

B. Support for multiple platforms (as long as the platforms are using React Native)

🧩 New Architecture's components:

1. JavaScript Interface (JSI)

JSI is JavaScript Interface, this is the layer written in C++. Any JS engine can be use with this and this enables the cross platform support - not just on IOS, android but also on smart TVs, smart watches, etc.

JSI enables the JavaScript to hold a reference to the native module. These enables the JavaScript to communicate directly with native modules as well as this enables the synchronous communication between JavaScript and Native thread

PS: Your react native code gets bundle through Metro and goes to the JSI.

2. New Native Modules

New Native Modules is the new and improved native modules. This is written in C++ and it enables the synchronous access from JS/TS apis to Native. This means that there will be direct communication between Native, and JavaScript thread without the need of bridge. C++ also enables to write your own native modules for cross platform sharing.

New native modules allows to handle events, read layout, schedule updates both async, and sync.

As we learned earlier, JSI keeps the reference of objects in the TurboModules, this will allow JavaScript code to load each module only when it is required (dynamic loading of modules). This improves the startup time of app as compared to the old architecture.

3. Codegen

Codegen is a tool to create the strongly typed contracts. These contracts are helpful for developers by saving their time and make the communication easier between cross programming languages.

In React Native, JavaScript and Typescript are not strongly typed language but C++ is strongly typed. To make the communication between JavaScript, and C++ , codegen generates interfaces (types). This happened at the build time for fast execution at runtime.

Because of the Codegen JSI (JavaScript Interface) directly communicate with Turbo modules without any bridge.

4. New Renderer

New Renderer is known as Fabric. This is also written in C++.
Remember we have 3 threads in React Native? - JavaScript, Main/UI Native, and Shadow/background thread. In old architecture, the problem was our main thread used to get blocked and this leads to the:

1. performance issues

2. empty frames (missing 60FPS)

3. also, old architecture has to maintain the 2 copy of node and DOM. This leads to the memory issue

4. There was no way to interrupt the low priority tasks to give priority to urgent updates.

In the Fabric these issues were taken care. With new renderer now we can use transition to interrupt the low priority tasks for urgent. This will make the app responsive & Main/UI native thread won't be unblock. The events will be async execute. With new renderer system, there will an immutable tree of the view hierarchy.

Immutable means that it won't be changeable. Benefits of immutable:

1. This allow for thread-safe processing of updates.

2. This also means there will be multiple in-progress trees, each representing a different version of the user interface.

3. As there are multiple trees at different version of UI, *updates can be rendered in the background without blocking the UI *(such as during transitions) or on the main thread (in response to user input)

4. The new renderer can also read layout information synchronously and across different threads. This enables background computation for low-priority updates and synchronous reads when needed.

🎯 End to End Architecture

🎉 Summary

1. New architecture is available by default from 0.76

2. New architecture has introduced: JavaScript Interface (JSI), new native modules (Turbo Modules) , codegen, new renderer system (fabric)

3. JSI is JavaScript Interface it is based on C++ and make the JavaScript and Native modules direct communication possible without any need for Bridge

4. New Native modules are improved current native modules. Written in C++ and enables lot of benefits: synchronous communication to and fom JavaScript and native without bridge, lazy loading.

5. Codegen generates type interfaces for JavaScript, and C++ to communicate with each other.

6. New renderer (Fabric) is new renderer system written in C++. This enables the better performance by enabling multiple threading, and interrupting low priority tasks.

7. New event loop to make the react native more closer to DOM

8. Good read GitHub issue

Happy Learning!!