DEV Community

Neha Sharma
Neha Sharma

Posted on • Edited on

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.

Image description

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.

Image description

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.

Image description

🚩 Problems with old Architecture

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

Image description

  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:

React native

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

Image description

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


🧩 New Architecture's components:

Image description

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.

Image description

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:

Image description

  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

Image description

🎉 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

❤️ Say Hi!!

Twitter

YouTube

Happy Learning!!

Top comments (28)

Collapse
 
andyrcm profile image
Andy C Spencer

Many thanks for this - great explanation.

Collapse
 
hellonehha profile image
Neha Sharma

Thank you :)

Collapse
 
ali822cwh profile image
Ali822-cwh

Amazing optimization

Collapse
 
hellonehha profile image
Neha Sharma

indeed it is

Collapse
 
ali822cwh profile image
Ali822-cwh

Yes I think that's very optimistic what you think about that.

Collapse
 
lc_phm_f11952cc8e810faf profile image
Lạc Phạm

Thanks a lot.

Collapse
 
hellonehha profile image
Neha Sharma

you are welcome :)

Collapse
 
techvfxking profile image
Biplab Sharma

Wow, such an amazing and fabulous improvement 🤩

Collapse
 
hellonehha profile image
Neha Sharma

yeah...excited about this

Collapse
 
mzcoderhub profile image
Galang YP

Thanks for the recap, its gold

Collapse
 
hellonehha profile image
Neha Sharma

thank you...indeed

Collapse
 
nicolasdanelon profile image
Nicolás Danelón

Awesome article

Collapse
 
hellonehha profile image
Neha Sharma

thank you

Collapse
 
tommyleong profile image
TommyLeong

Thanks for summarizing, keep it up!

Collapse
 
hellonehha profile image
Neha Sharma

thank you

Collapse
 
jorgearay profile image
Jorge Araya

Great article 🚀 very helpful!

Collapse
 
j_ay_ffbb98ef5c9a83cc256 profile image
J A Y

Thanks

Collapse
 
rish_hrishy_24210e603c profile image
Rish H (Rishy)

Did they just copy Flutter?

Collapse
 
theo_oliveira_40b15cfaf73 profile image
Theo Oliveira

Oh no, not that again. And flutter copy from somewhere else m? Who cares

Collapse
 
hellonehha profile image
Neha Sharma

100% RN devs are happy with RN.
flutter devs are happy with flutter.
which ever framework/libs brings $$$ to dev's bank account devs are willingly to learn.

Thread Thread
 
denys_bochko profile image
Denys Bochko

That is the best comment I have seen in a while!

Collapse
 
hellonehha profile image
Neha Sharma

is it? Don't know. I am not into Flutter

Collapse
 
uchelikk profile image
uchelikk

Flutter totally is different. They using their 2D render library, and this is not actually NATIVE. Their approach looks like writing app with game engine (unity, godot engine...). React native is really native but it had bridge. Flutter was more performant because of their approach but after new arch probably could near. 2025 is going to tough for flutter.

Collapse
 
ethantran79 profile image
Trần Đức Thư

Can you share more why it is tough for Flutter?