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.
Performance Issues
Jerky or empty frames
Duplication of the nodes
โจ Goal of new architecture
The new architecture focuses on resolving the challenges of the previous one. Its goals are to:
Fast startup ๐ฅณ
Concurrent rendering ๐๏ธ
Responsive apps ๐งโ๐ป
Support on multiple platforms ๐ฎ
Less crashes ๐งจ
Better memory management ๐
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:
performance issues
empty frames (missing 60FPS)
also, old architecture has to maintain the 2 copy of node and DOM. This leads to the memory issue
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:
This allow for thread-safe processing of updates.
This also means there will be multiple in-progress trees, each representing a different version of the user interface.
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)
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
New architecture is available by default from 0.76
New architecture has introduced: JavaScript Interface (JSI), new native modules (Turbo Modules) , codegen, new renderer system (fabric)
JSI is JavaScript Interface it is based on C++ and make the JavaScript and Native modules direct communication possible without any need for Bridge
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.
Codegen generates type interfaces for JavaScript, and C++ to communicate with each other.
New renderer (Fabric) is new renderer system written in C++. This enables the better performance by enabling multiple threading, and interrupting low priority tasks.
New event loop to make the react native more closer to DOM
Good read GitHub issue
Happy Learning!!
Top comments (21)
Many thanks for this - great explanation.
Thank you :)
Thanks for the recap, its gold
thank you...indeed
Awesome article
thank you
Amazing optimization
indeed it is
Thanks a lot.
you are welcome :)
Thanks for summarizing, keep it up!
thank you
Wow, such an amazing and fabulous improvement ๐คฉ
yeah...excited about this
Thanks
"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."
Interesting thanks for summarizing