Turbo Module in React Native — What It Is, How JSI Works, and Architecture

What Is Turbo Module?

Turbo Module is a component of the new React Native architecture that replaces the classic Bridge for JavaScript to native code communication. Unlike Bridge, where every message is serialized to JSON and transmitted asynchronously, Turbo Module uses JSI — a layer that allows JavaScript to directly call functions written in C++.

The Turbo Module architecture was introduced by the Meta team at React Conf 2021 as part of a larger React Native restructuring codenamed “The New Architecture.” In addition to Turbo Module, the new architecture includes Fabric (new renderer), Codegen (code generator), and JSI (interaction interface). Together, these components solve performance issues that had been accumulating in React Native since 2015.

Turbo Module solves three key problems of classic Native Modules: asynchrony (all calls go through a queue), serialization (each call requires JSON transformation), and loading (all modules initialize at app startup). With Turbo Module, native methods are called synchronously, data is transferred without copying, and modules are loaded on demand.

How JSI Works

JSI (JavaScript Interface) is a C++ API that creates a layer between the JavaScript engine (Hermes or JSC) and native code. JSI provides host objects — C++ objects that appear as regular JavaScript objects and methods. When JavaScript calls a method of such an object, JSI directly executes the corresponding C++ code without serialization and without thread switching.

The key difference between JSI and Bridge is the absence of data copying. In Bridge, each value is serialized into a JSON string, passed through a queue, and deserialized. JSI passes pointers to data in memory, allowing working with large data volumes without performance loss. According to Meta benchmarks, JSI calls execute 5–10 times faster than equivalent calls through Bridge.

HostObject and Synchronous Calls

JSI defines the HostObject interface — a C++ class that React Native registers in the JS environment as a regular object. When JS code accesses a property or calls a method of HostObject, JSI intercepts the call and executes C++ code. This allows performing operations synchronously without waiting for the Bridge queue.

// JSI HostObject example — synchronous native call
class ImageCompressorHostObject : public jsi::HostObject {

    jsi::Value get(
        jsi::Runtime& rt,
        const jsi::PropNameID& propName
    ) override {
        auto name = propName.utf8(rt);
        if (name == "compressImage") {
            return jsi::Function::createFromHostFunction(
                rt,
                jsi::PropNameID::forUtf8(rt, name),
                2,
                [](jsi::Runtime& rt,
                   const jsi::Value& thisValue,
                   const jsi::Value* args,
                   size_t count) -> jsi::Value {
                    return jsi::Value(rt, compressNative(
                        args[0].asString(rt).utf8(rt),
                        args[1].asNumber()
                    ));
                }
            );
        }
        return jsi::Value::undefined();
    }
};

The code above demonstrates how JSI HostObject handles the compressImage call from JavaScript. The function takes two arguments (a path string and a quality number), calls the native compressNative function, and returns the result — all synchronously, without Bridge, without JSON. This is the key advantage of JSI over the classic architecture.

JSI is part of the React Native main runtime and does not depend on a specific JavaScript engine. It works with both Hermes and JavaScriptCore (JSC), providing a unified interface for interaction with the native environment.

Turbo Module vs Bridge: Comparison

Comparing Turbo Module and Bridge shows the evolution of React Native architecture. Bridge was designed for the rapid launch of React Native in 2015, but as application complexity grew, its limitations became critical. Turbo Module solves these problems at the architecture level.

In practice, the difference is most noticeable with frequent native method calls — for example, when processing media or working with GPU. For rare calls (once per session), the performance difference is insignificant. Turbo Module also simplifies working with large binary data — images, videos, binary protocols — which in Bridge required workarounds with the file system.

Example of Creating a Turbo Module

Creating a Turbo Module starts with defining a TypeScript specification. Codegen automatically generates C++ interfaces and Objective-C/Java stubs based on this specification. This completely changes the development approach — the developer describes the API once, and Codegen creates everything else.

// ImageCompressor.ts — Turbo Module spec
import type { TurboModule } from 'react-native';
import type { Double } from 'react-native/Libraries/Types/CodegenTypes';

export interface Spec extends TurboModule {
  compressImage(
    imagePath: string,
    quality: Double
  ): Promise<string>;
}

Code Generation via Codegen

Codegen analyzes the TypeScript specification and generates C++ HostObject, Objective-C protocol, and Java interface. The developer only needs to implement the native logic. This approach guarantees that types on JavaScript and native sides always match, eliminating manual mapping errors.

// TurboModule implementation for iOS (generated stub)
@interface ImageCompressorModule ()
    RCT_EXPORT_MODULE(ImageCompressor)
@end

@implementation ImageCompressorModule

RCT_EXPORT_METHOD(compressImage:(NSString *)imagePath
                  quality:(NSNumber *)quality
                  resolver:(RCTPromiseResolveBlock)resolve
                  rejecter:(RCTPromiseRejectBlock)reject)
{
    NSData *compressed = [ImageProcessor compressAtPath:imagePath
                                                    quality:quality.doubleValue];
    resolve([NSString stringWithUTF8String:compressed.UTF8String]);
}

@end

An important advantage is lazy loading. Turbo Module does not initialize at app startup, but is created only on first access from JavaScript. This reduces app startup time by 30–50% compared to the classic approach where all Native Modules load immediately.

Migrating from Bridge to Turbo Module

Transitioning from Bridge to Turbo Module does not require a full rewrite of the application. React Native 0.73+ supports both architectures in parallel — Bridge modules continue to work, and new modules can be created as Turbo Module. This allows migrating gradually, module by module.

To enable the new architecture in a React Native 0.76+ project, set the newArchEnabled flag to true in the react-native.config.js file. After that, all existing Native Modules continue to work through Bridge, and new modules can be created as Turbo Module. Codegen automatically handles both options.

// react-native.config.js — enable new architecture
module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [],
  newArchEnabled: true,
};

It is recommended to start migration with modules that are most frequently called from JavaScript — they will get the greatest performance boost. Modules that are called rarely (once per session) can be left on Bridge without significant performance loss.

• Codegen — use TypeScript specifications for automatic generation of native interfaces.
• E2E Tests — check module operation on both architectures, especially after updating React Native.
• Fallback Plan — if problems arise with Turbo Module, you can temporarily revert to Bridge via a configuration flag.