How Meta Dominates Using React Native's New Architecture

Introduction to React Native's Execution Engine

For years, cross-platform mobile frameworks faced a common bottleneck: runtime performance degradation due to the communication bridge between JavaScript and native platforms. In React Native's legacy architecture, every action—from updating a UI element to fetching data from a native API—had to be serialized into JSON, queued, and asynchronously sent across a single bridge thread.

This asynchronous bottleneck frequently led to dropped frames, stuttering scroll lists, and slower app startup times. To reclaim native-level performance across its massive app ecosystem, Meta engineered a ground-up rewrite of React Native's core, introducing a modern architecture powered by C++ that bypasses serialization entirely.

The Legacy Bridge and Serialization Bottlenecks

To understand the magnitude of Meta's rewrite, we must first analyze the weaknesses of the original React Native engine. The old system split execution into three main threads: the JavaScript Thread, the Native/UI Thread, and the Shadow Thread (responsible for running the Yoga layout engine). Every communication between these threads was mediated by the Bridge.

If a user dragged their finger across the screen, the native UI thread captured the gesture, serialized the event data into JSON, and posted it to the JavaScript thread. JavaScript processed the gesture, decided to update a UI style, serialized the update, and sent it back over the bridge to the Shadow Thread, which calculated the layout before sending it back to the UI thread.

This round-trip serialization added immense overhead. Because the bridge was strictly asynchronous, JavaScript could never invoke a native method and immediately receive a return value.

Instead, callbacks had to be registered, compounding asynchronous complexity. If the bridge thread became congested with rapid events (such as real-time touch tracking or high-frequency scroll positions), the UI would lag behind user input, resulting in a suboptimal user experience that fell short of pure native applications.

• JavaScript Thread: Runs the Hermes/V8 engine, executing the application's business logic and React state updates.
• Native/UI Thread: The main platform thread responsible for processing user input gestures and rendering platform-native UI elements.
• Shadow Thread: Operates the Yoga layout engine, calculating node positioning and boundary layouts before committing updates.

JSI: Direct C++ Host Object Access

At the center of Meta's new architecture is the JavaScript Interface (JSI). JSI is a lightweight, general-purpose interface layer written in C++ that sits between the JavaScript engine (like Hermes) and the native host platform.

By eliminating the serialization layer, JSI allows the JavaScript engine to call native methods directly, just as if they were standard JavaScript functions. Similarly, native code can now access JavaScript objects directly.

This is achieved through JSI Host Objects. When a native API is initialized, it exposes its methods to the JavaScript context as host objects. JavaScript references these objects directly, enabling synchronous invocation.

For example, if a developer needs to store a value using native secure storage, they no longer need to wait for an asynchronous promise to resolve across the bridge. Instead, the native method executes synchronously on the same thread, returning the result instantly. JSI also decouples React Native from the specific JavaScript engine, enabling developers to swap Hermes for V8 or QuickJS without rewriting native bridge modules.

Fabric Renderer and TurboModules Architecture

Meta built two major subsystems on top of JSI: Fabric and TurboModules. Fabric is the new rendering system that replaces the legacy UI manager. Utilizing JSI, Fabric exposes native UI capabilities directly to JavaScript.

This allows the layout engine (Yoga) and the native view hierarchy to share memory, facilitating synchronous layout calculations. When a user interacts with a complex gesture, Fabric can process the rendering synchronously on the main thread, eliminating the visual delay and layout jumps associated with the asynchronous bridge.

TurboModules, on the other hand, revolutionizes how native device capabilities (such as the camera, GPS, and Bluetooth) are loaded. In the old architecture, all native modules were eagerly initialized when the application launched, regardless of whether the user actually accessed them. This significantly increased startup times.

TurboModules leverage JSI to lazy-load native capabilities only when they are called by JavaScript. If an application never accesses the camera, the camera's native module is never initialized, saving system memory and optimizing startup performance.

To support this new execution model, Meta introduced Codegen, a tool that enforces strict type safety between JavaScript and native C++ code. Developers define their native modules using TypeScript or Flow.

Codegen reads these type definitions and automatically generates the C++ glue code required to bind the JavaScript JSI objects to native Java (Android) and Objective-C (iOS) classes. This compile-time verification eliminates a major source of runtime crashes caused by mismatched parameters across the bridge, resulting in highly stable and maintainable application codebases.

Technical Implementation: Direct Native Invocation

Direct native function bindings are established in C++ without the overhead of serialization, drastically reducing bridge latency.