React Native New Architecture: Fabric C++ Renderer, TurboModules JSI, and High-Throughput Mobile Performance

The Demise of the Asynchronous JSON Bridge

For nearly a decade, React Native was constrained by a fundamental architectural bottleneck: the Asynchronous JSON Bridge. Every UI update, touch event, and native module invocation had to be serialized into a UTF-8 JSON string on the JavaScript thread, queued asynchronously over a batched WebSocket-like message queue, and parsed back into native memory objects on the Android/iOS main thread.

During heavy scrolling lists, rapid gestures, or complex animations, this serialized bridge became saturated. Frames dropped below 30 FPS, lists displayed blank white patches, and UI state drifted out of sync with native views. The React Native New Architecture—powered by Fabric and TurboModules—replaces the bridge entirely with direct C++ host memory bindings via the JavaScript Interface (JSI).

At Betadrix, our mobile app development team builds high-performance cross-platform applications. In this comprehensive engineering guide, we dissect the internal C++ mechanics of Fabric, write custom TurboModules using JSI, analyze multi-threaded rendering topologies, and review real-world production benchmarks. For cross-platform comparisons, explore our guide on Flutter app development and learn how we optimize mobile data sync in our guide on offline-first mobile apps with WatermelonDB.

Architectural Topology: Legacy Bridge vs. New Architecture (JSI / Fabric)

Below is the architectural comparison between the legacy serialization model and the modern C++ JSI direct memory interface:

+-------------------------------------------------------------------------------+
|                       REACT NATIVE ARCHITECTURAL EVOLUTION                    |
+-------------------------------------------------------------------------------+

[LEGACY ARCHITECTURE (Asynchronous JSON Bridge)]
+-------------+       JSON Stringify / Batch Queue        +---------------+
| JavaScript  | ========================================> | Native Module |
| Engine (V8) | <======================================== | (Java / Obj-C)|
+-------------+         JSON Parse & Message Dispatch     +---------------+
   * Thread hopping introduces 16-48ms latency; blank white frames during scroll.

---------------------------------------------------------------------------------

[NEW ARCHITECTURE (Fabric Renderer & TurboModules with JSI)]
+-------------------------------------------------------------------------------+
| [JavaScript Realm] (Hermes Engine)                                            |
|  - Holds direct C++ HostObject memory pointers to native views                |
|  - Executes React 19 Concurrent Rendering & Transitions                       |
+-------------------------------------------------------------------------------+
       |                                       ^
       | Direct Synchronous C++ Call           | Zero-Copy Pointer Passing
       v                                       |
+-------------------------------------------------------------------------------+
| [JavaScript Interface (JSI)] (C++ Abstraction Layer)                          |
|  - No JSON Serialization | Zero Thread Hopping Overhead                       |
|  - Bidirectional, synchronous memory access across JS and Native realms       |
+-------------------------------------------------------------------------------+
       |                                       |
       +-------------------+-------------------+
                           |
       +-------------------+-------------------+
       |                                       |
       v                                       v
+-------------------------------+       +-------------------------------+
| [Fabric C++ Renderer]         |       | [TurboModules Engine]         |
| - Shadow Tree (C++ Immutable) |       | - Lazy-loaded Native Modules  |
| - Yoga Layout Engine (C++)    |       | - Type-Safe Codegen Interface |
| - Native UI Mount Phase       |       | - Direct Sensor / Camera Mem  |
+-------------------------------+       +-------------------------------+

Core Primitives: JSI, Fabric, and TurboModules

• JavaScript Interface (JSI): An open C++ abstraction layer that enables the JavaScript engine (Hermes) to maintain direct memory references to native C++ host objects. JavaScript can invoke methods directly on native objects synchronously with 0ms serialization overhead.
• Fabric Rendering Engine: Replaces the old UIManager. Fabric constructs an immutable C++ shadow tree and utilizes Yoga for layout calculations directly in C++, mounting UI changes directly to Android ViewGroups and iOS UIViews across three dedicated execution threads (UI thread, JS thread, and background layout thread).
• TurboModules: Native modules that are lazily loaded into memory on-demand rather than initialized en masse at application startup, reducing cold start launch times by up to 60%.

Writing a Custom High-Performance C++ TurboModule

Below is a production C++ TurboModule utilizing JSI to execute high-throughput cryptographic hashing directly in native memory without JSON bridge serialization:

// CryptoTurboModule.h
#pragma once
#include 
#include 

namespace facebook::react {

class CryptoTurboModule : public facebook::jsi::HostObject {
public:
    static void install(facebook::jsi::Runtime& runtime);
    
    facebook::jsi::Value get(facebook::jsi::Runtime& runtime, const facebook::jsi::PropNameID& name) override;
    
    // High-performance native SHA-256 calculation
    static facebook::jsi::Value fastHash(
        facebook::jsi::Runtime& runtime,
        const facebook::jsi::Value& thisValue,
        const facebook::jsi::Value* arguments,
        size_t count
    );
};

} // namespace facebook::react

// CryptoTurboModule.cpp
#include "CryptoTurboModule.h"
#include 
#include 
#include 

namespace facebook::react {

facebook::jsi::Value CryptoTurboModule::fastHash(
    facebook::jsi::Runtime& runtime,
    const facebook::jsi::Value& thisValue,
    const facebook::jsi::Value* arguments,
    size_t count
) {
    if (count < 1 || !arguments[0].isString()) {
        throw facebook::jsi::JSError(runtime, "Argument 0 must be a string");
    }

    std::string input = arguments[0].asString(runtime).utf8(runtime);
    
    unsigned char hash[SHA256_DIGEST_LENGTH];
    SHA256((const unsigned char*)input.c_str(), input.length(), hash);

    std::stringstream ss;
    for (int i = 0; i < SHA256_DIGEST_LENGTH; i++) {
        ss << std::hex << std::setw(2) << std::setfill('0') << (int)hash[i];
    }

    return facebook::jsi::String::createFromUtf8(runtime, ss.str());
}

facebook::jsi::Value CryptoTurboModule::get(facebook::jsi::Runtime& runtime, const facebook::jsi::PropNameID& name) {
    std::string propName = name.utf8(runtime);
    if (propName == "fastHash") {
        return facebook::jsi::Function::createFromHostFunction(
            runtime,
            name,
            1,
            CryptoTurboModule::fastHash
        );
    }
    return facebook::jsi::Value::undefined();
}

} // namespace facebook::react

Performance Benchmarks: Legacy Bridge vs. Fabric + TurboModules

Real-World Production Failure Modes

1. C++ HostObject Memory Leaks: When passing C++ references into JavaScript through JSI, cyclic references between JavaScript garbage collection (Hermes) and C++ reference counters (std::shared_ptr) can prevent deallocation, creating severe native memory leaks. Mitigation: Use std::weak_ptr for non-owning callbacks and ensure explicit teardown in HostObject destructors.
2. Thread-Race Deadlocks in Synchronous Calls: Because JSI enables synchronous execution, calling a blocking native I/O operation on the main UI thread immediately freezes the user interface. Mitigation: Restrict synchronous JSI calls strictly to fast in-memory computations; route all file/network I/O to background C++ thread pools returning JS Promises.
3. Legacy Third-Party Library Incompatibility: Older React Native npm packages that depend on the legacy NativeModules global or custom Objective-C bridge callbacks will throw runtime crashes under Fabric. Mitigation: Enable the React Native interop layer (RCTBridgeProxy) during migration and verify library Fabric readiness via Codegen specs.