Exploring the New Architecture in React Native: A Comprehensive Overview

4 min readJul 2, 2023

We dive into the new architecture overview of React Native’s internals. This conceptual exploration is designed to provide library authors and core contributors with a deep understanding of React Native. While app developers can still find value in this overview, it’s not a prerequisite for effectively using React Native.

However, gaining insights into the inner workings of React Native can empower developers to make informed decisions and optimize their app development process.

Why New Architecture?

The New Architecture aims to address the performance and flexibility issues prevalent in the old architecture. This updated approach aims to overcome the challenges and limitations that hindered the previous system.

Old Architecture’s Limitations:

The asynchronous nature added unnecessary waiting time between layers.
Single-threaded JavaScript limits computation to one thread.
JSON serialization and deserialization caused extra overhead in
The bridge is a bottleneck for fast communication.

New Architecture’s Improvements

Better Host Platform Interoperability: Synchronous layout calculation for smooth integration
Concurrency with JavaScript invoking functions on different threads
Elimination of serialization and deserialization overhead
Enhanced code sharing through C++ abstraction.
Type safety is ensured with generated code from typed JS specifications.
Improved Performance: Cross-platform renderers benefit from platform-specific optimizations.
Consistency: Ensures uniformity across different platforms.
Faster Startup: Lazily initializes host components by default.
Reduced data serialization: Direct data access via JavaScript Interfaces (JSI).

What is the new Architecture?

The core concepts of React Native still hold in the New Architecture:

Native modules remain the preferred approach for platform-specific API integration.
Native components continue to offer reusable UI components for a native experience.

Pillars of New Architecture

The JavaScript Interface (JSI) will replace the bridge and make communication between JavaScript and the Native thread possible.

● Fabric is React Native’s new rendering engine, an evolution of the legacy renderer.

● Turbo Modules is the next upgraded version of Native Modules, with a few extra benefits.

● CodeGen is a tool that helps with type safety between both worlds.

JavaScript Interface (JSI)
The New Architecture includes a crucial element known as the JSI (JavaScript Interface), which acts as a link between the JavaScript layer and the native layer. Implemented in C++, JSI is not limited to specific platforms like Android or iOS but can seamlessly integrate with any codebase written in C++.

JSI utilizes reference objects, which store C++ pointers, to facilitate communication between the two layers. These reference objects enable direct method invocation from JavaScript to native elements and allow the native layer to send events to JavaScript. This shared ownership between layers promotes synchronous communication, enabling React Native to efficiently update the UI by sending synchronous messages to the native side for immediate action.

By leveraging JSI, the New Architecture enhances the interoperability and performance of React Native across different platforms and ensures a smoother, more responsive user experience.

Turbo Modules

JSI has revolutionized the communication between the JavaScript and Native layers in React Native. This direct communication enables JavaScript to send high-priority messages directly to the Native layer. Additionally, JavaScript can now load native modules on demand, rather than having to load them all at the start of the application as in the old architecture.

For instance, in the previous architecture, if an application needed camera functionality, the camera module had to be loaded at the application’s start, regardless of whether the camera was used immediately. However, in the new architecture, the camera module can be loaded when needed, even on a specific screen.

Fabric

Fabric is the evolved rendering system, unifying logic in C++, enhancing host platform interoperability, and unlocking new capabilities for React Native.

The rendering pipeline can be broken into three general phases:

1. Render

2. Commit

3. Mount

Render

React executes code logic to create React Element Trees in JavaScript, and the renderer then generates a corresponding React Shadow Tree in C++. When parent-child relationships are established within the React Element Nodes, the renderer mirrors these relationships in the React Shadow Nodes, thus constructing the React Shadow Tree.

Commit

The commit phase consists of two tasks.

The layout calculation task uses the style information from the React Element Tree node and the root React Shadow Tree’s style constraints to determine the size and position of each React Shadow Tree node using the Yoga layout manager.
The tree promotion task elevates the newly created React Shadow Tree as the “Next Tree,” signifying that it contains all the necessary information for mounting on the screen and represents the latest state of the React Element Tree.

Mount

The mounting phase encompasses three tasks.

The tree diffing step compares the previously rendered tree with the newly created “Next Tree” in C++. This process involves flattening the React Shadow tree to eliminate redundant “Host View” nodes.
The tree promotion task promotes the “Next Tree” to become the “Rendered Tree,” indicating that it is ready for rendering.
The view mounting task performs atomic mutation operations on the relevant host views, executing on the UI thread of the host platform.

CodeGen
As C++ is strongly typed and JavaScript or TypeScript is not, an interface is needed to facilitate communication between the two. The “CodeGen” tool generates interfaces from JavaScript or TypeScript, enabling seamless communication between the C++ and JavaScript worlds. These interfaces bridge the gap and ensure smooth interaction between the two languages.