The Ultimate Guide to React Native’s Latest Architecture

In the ever-evolving landscape of mobile app development, it is paramount to stay up to date with the latest technologies and architectural advancements. For those in the world of React Native, the emergence of the React Native Re-architecture, often referred to as React Native New Architecture, cannot be overlooked.

This article will give a brief understanding of the compelling reasons to migrate from the old approach to the new React Native Architecture, its advantages, and much more.

Additionally, get insights into Fabric Renderer and TurboModule System, the two key components central to this architectural evolution. This would help provide a comprehensive experience of their significance in the React framework.

So, let’s embark on this journey to explore further.

What made the New React Native Architecture necessary?

Before delving into the new React Native architecture, let’s first gain a solid understanding of the current React Native design. To facilitate communication between threads, the bridge plays a vital role, however, it introduces dependencies, delays, and uncertainties. The new React Native design became imperative to address these issues.

Here’s what the existing design looks like:

Now, let’s examine some compelling justifications for switching to the new React Native Architecture. The current React Native Architecture exhibits the following drawbacks:

• The React Native application’s dependency on the Bridge for thread intercommunication is particularly helpful during the development stage, but it introduces complexities.
• The serializable bridge necessitates more data copying rather than efficient memory sharing across app threads, impacting performance.
• The message’s time of arrival at the destination is not guaranteed by the asynchronous paradigm.
• Data transfer suffers from sluggishness, affecting the overall responsiveness of the application.
• Asynchronous UI updates result in unexpected page transitions and behavior.

To address the limitations, the new design introduced dynamic capabilities. Without further ado, let’s delve into the next section to learn more about these advancements.

Everything you should know about the new React Native Architecture

With the release of React Native 0.68, developers can now harness the latest framework features. The New Architecture relies on a suite of essential pillars. They are:

1. Fabric

A conceptual extension of the previous render system, Fabric is the new concurrent rendering mechanism for React Native. To maximize platform portability, the main idea is to integrate more render logic in C++. For improved startup times, host components such as View, Text, and others are now initialized only when needed, adopting a lazy initialization approach. The functionalities added in React 18 are available to us through Fabric.

2. Turbo Modules

This is a novel approach to developing native modules that also makes use of JSI’s capabilities to enable synchronous data transfer from native to JS and vice versa.

It is a reworking of the layer that allows JavaScript and platform native modules like Bluetooth, Biometrics, etc. to communicate with one another. Additionally, it enables slow loading of modules to shorten the startup time of your app and permits the creation of native C++ code for both platforms.

3. Codegen

This is a code generation tool that automates JS and native side compatibility, turning JS into a source of truth. It enables the creation of statically typed JS (also known as JS Spec), which is used to create the interface files required by TurboModules and Fabric native components. A spec is a collection of types written in TypeScript or Flow that lists every API that the native module offers.

Codegen guarantees type safety and compile-time type safety. Thus, resulting in simpler code and quicker execution. This is because both realms can rely on one another to validate the data on a consistent basis. Visit the docs for further information.

4. Bridgeless mode

React Native is still maintaining the bridge, enabling programmers to progressively adopt new React Architecture and JSI. However, since the bridge must be explicitly used (by importing it), modules that haven’t been migrated yet won’t function.

5. JSI

The New Architecture, a C++ API designed for seamless communication with any JS engine, is firmly rooted in JSI. Unlike the previous asynchronous bridge, JSI operates synchronously, allowing for faster execution of native functions.

This feature empowers JavaScript to directly invoke methods on C++ host objects and maintain pointers to these objects. By eliminating the need for object serialization via the bridge, it effectively mitigates the substantial overhead associated with asynchronous communication between JS and the native environment.

The removal of the overhead associated with loading the bridge each time an app launches will make the app startup faster. Meta plans to eventually enable apps to operate entirely in bridge-less mode.

Curious about how migrating to the new architecture can benefit you? Keep your eyes on the section further.

Advantages of migrating React Native app to The New Architecture

Here are the significant advantages:

1. Enhanced Performance

Performance gains in communication with the native side are expected due to the synchronous nature of the new architecture. Every native module will be lazily loaded, which will greatly minimize the startup time of the application. It will also eliminate the overhead associated with loading the bridge at startup once the bridgeless mode is available. However, it’s worth noting that not all scenarios support this improvement; in some benchmarks, the architecture’s performance may be less favorable.

Not making the new architecture X times quicker than the old was Meta’s aim. Along with addressing significant bottlenecks, they also aimed to lay a new and strong basis that would enable the development of new capabilities not possible with the old design.

Let’s review some performance metrics developed by BAM’s Alexandre Moureaux. The source’s URL is provided below: https://github.com/reactwg/react-native-new-architecture/discussions/85

Benchmark of rendering 10K views

In this instance, new architecture outperforms the previous one in terms of efficiency. Typically, it uses more RAM but less CPU.

Benchmark of rendering 2K Text components

Due to higher UI thread use, in this case, the older architecture is faster.

The official statement from the React Native team is that their internal benchmarks were neutral across all React Native surfaces in the Facebook app on both Android and iOS while rolling out the New Architecture to users. In this discussion thread, Samuel Susla wrote, “In the last years, we conducted dozens of tests in production on millions of devices to assure performance was neutral.”

Therefore, you may anticipate a neutral performance impact without any performance regressions in most use cases. Also keep in mind that the New Architecture is improving daily because of the contributions of numerous people, so by the time you read this, the outcomes could have changed drastically.

Here’s a bonus for you – Learn to set up React Native CI/CD using GitHub Actions (Part 1, Part 2, and Part 3).

2. Better Developer Experience

The new React Native architecture has significantly enhanced the developer experience. Its ability to speed up and improve the efficiency of the development process is one of its most notable advantages. The new design enables developers to concentrate more on the quality of their code while also making it simpler to swiftly develop, debug, and publish programs. In addition, new APIs, and technologies, including Hot Reloading, are now accessible to developers, making it simpler for them to stay current with trends and developments.

3. Refined Compatibility with older React Native versions

With prior iterations of the platform, the new React Native design enables exceptional compatibility. By doing this, it is made possible for developers to simply switch to the new design without having to modify the code of their current projects. The learning curve is substantially reduced because the underlying code has been updated and enhanced while mostly remaining the same as earlier versions.

Overall, the improved platform compatibility offered by the new React Native architecture is amazing. This guarantees that developers can rapidly and successfully move to the new architecture using their existing platform knowledge without having to entirely rewrite their codebase.

4. Increased Responsive UI

The enhanced responsiveness of the new React Native architecture is one of its key advantages. React native developers can now benefit from more effective asynchronous code thanks to the new design. This can significantly speed up laborious operations. This ensures that programs feel quicker and more responsive, giving users a significantly better experience.

5. Improved Error Handling

The new React Native architecture has improved error handling as one of its main advantages. By making it simpler for engineers to troubleshoot mistakes in their code, the new design has enhanced error handling. It is now simpler to identify problems early on and address them before they escalate into bigger concerns.

Now that you are well-versed with the significance of the new architecture, the following section will guide you through the migration process.

Migrating to the New React Native Architecture

Here are the essential steps to follow when transitioning from the current architecture to the new one:

• Upgrade your app to React Native 0.68 or higher to enable the New Architecture; however, as many enhancements have been made, we strongly advise updating to React Native 0.71+.
• Upgrade the application to React Native 0.71.
• Verify every third-party library that your program uses; most importantly, they all need to be moved. For many apps out there, this may be a long-standing roadblock.
• There are components that are not yet compatible since they will display a red box that reads, “Unimplemented component: <ComponentName>.” If so, kindly inform the library maintainers so that adoption can proceed more quickly.
• [Android] Set newArchEnabled=true in gradle.properties.
• [iOS] Run RCT_NEW_ARCH_ENABLED=1 pod installs inside the iOS folder.

Therefore, the new architecture of React Native has several benefits for both users and developers. It offers a wonderful framework for mobile application development. All thanks to its enhanced performance, developer experience, and compatibility with prior versions of React Native.

Additionally, developers can better manage problems and have more control over the user interface. This makes their work simpler and more efficient.

Thus, the new React Native architecture is all things considered, a superb tool for cutting-edge mobile applications that can be applied to actual projects.

Feel free to contact us at Nitor Infotech to explore further insights on incorporating the New React Native Architecture.