What is the New Architecture in React Native, and what is the role of JSI (JavaScript Interface)?

Short answer

JSI is a C++-written software layer that lets the JavaScript thread hold direct references to C++/Native objects and call their functions synchronously without JSON serialization or intermediaries.

Explanation

The new architecture eliminates the Bridge entirely. With JSI, the JS engine (such as Hermes) can call native system functions directly as if they were ordinary JavaScript functions, with shared-memory access. This raises communication speed to near-direct native-code speeds and enables extremely fast synchronous and asynchronous calls.

Code example

// NativeBattery.ts — a TurboModule spec; Codegen generates the C++ glue from it
import type { TurboModule } from "react-native";
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  getLevelSync(): number;          // synchronous call straight into native code through JSI
  getLevel(): Promise<number>;     // async variant for work that can block
}

export default TurboModuleRegistry.getEnforcing<Spec>("Battery");

// usage
// const level = NativeBattery.getLevelSync();   // no bridge, no JSON serialization

Common mistakes

• Believing that JSI is only for iOS, even though it is built in C++ and works equally on iOS and Android.

Follow-up questions

• What is the difference between AsyncStorage and react-native-mmkv, and why is MMKV much faster?
• What is the traditional React Native architecture (The Bridge), and what performance bottlenecks are associated with it?

Sources

• React Native docs — About the New Architecture