JSI & TurboModules: Unlocking Near‑Native Performance in React Native

Insight

React Native’s classic bridge serializes data and incurs a round‑trip cost for every native call. With the JavaScript Interface (JSI) and TurboModules, you can expose native functions as direct JavaScript objects, eliminating the bridge overhead and achieving near‑native latency. This is especially valuable for high‑frequency operations like animation frames, sensor streams, or cryptographic calculations.

Example

// src/native/MathTurboModule.ts
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): number;
}

export const MathModule = TurboModuleRegistry.getEnforcing<Spec>('MathTurboModule');

// Usage in a component
export const Sum = () => {
  const result = MathModule.add(3, 7);
  return <Text>3 + 7 = {result}</Text>;
};

The native side implements MathTurboModule in C++/Java/Kotlin and registers it with the JSI runtime. Once registered, the add method runs without crossing the bridge.

Takeaway

When you need tight, high‑frequency native interaction, replace bridge calls with a TurboModule backed by JSI. The setup is a one‑time effort, but the performance gains—especially on low‑end devices—are often worth it.