DEV Community

Neha Sharma
Neha Sharma

Posted 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

Happy Learning!!

Top comments (21)

Collapse
 
andyrcm profile image
Andy C Spencer

Many thanks for this - great explanation.

Collapse
 
hellonehha profile image
Neha Sharma

Thank you :)

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
 
ali822cwh profile image
Ali822-cwh

Amazing optimization

Collapse
 
hellonehha profile image
Neha Sharma

indeed it is

Collapse
 
lc_phm_f11952cc8e810faf profile image
Lแบกc Phแบกm

Thanks a lot.

Collapse
 
hellonehha profile image
Neha Sharma

you are welcome :)

Collapse
 
tommyleong profile image
TommyLeong

Thanks for summarizing, keep it up!

Collapse
 
hellonehha profile image
Neha Sharma

thank you

Collapse
 
techvfxking profile image
Biplab Sharma

Wow, such an amazing and fabulous improvement ๐Ÿคฉ

Collapse
 
hellonehha profile image
Neha Sharma

yeah...excited about this

Collapse
 
j_ay_ffbb98ef5c9a83cc256 profile image
J A Y

Thanks

Collapse
 
qaertsfd profile image
JonathanRPickettee

"The React Native New Architecture introduces significant improvements to the framework, focusing on performance, scalability, and developer experience. It includes changes like the Fabric renderer, TurboModules, and a new JS engine (Hermes by default). These updates allow for faster rendering, better memory management, and smoother integration with native code. By shifting to a more modular architecture, React Native now offers improved load times, better startup performance, and greater flexibility for building complex apps. This new architecture makes React Native more competitive with native development and enhances the overall app development process, making it a more powerful option for cross-platform mobile apps."

Collapse
 
codemeisterav profile image
avelops

Interesting thanks for summarizing