Learn how the JavaScript Interface (JSI) lets you call native code without the traditional React Native bridge, cutting latency and boosting UI responsiveness.

jsi-native-modules-performance.md

Insight

The classic React Native bridge serializes data between JavaScript and native threads, which adds noticeable latency for high‑frequency calls (e.g., animations or sensor data). JSI eliminates this overhead by exposing native objects directly to the JavaScript runtime, allowing synchronous, zero‑copy access. This is especially powerful for small utility modules or performance‑critical loops where every millisecond counts.

Example

// myModule.ts – TypeScript wrapper for a JSI‑exposed native function
import { NativeModules } from 'react-native';

// Assume the native side registers `MyJsiModule` on the JSI global object
export const MyJsiModule = {
  add(a: number, b: number): number {
    // @ts-ignore – JSI objects are added at runtime
    return (global as any).MyJsiModule.add(a, b);
  },
};

// Usage in a component
const sum = MyJsiModule.add(3, 7); // instantly returns 10

In the native layer (C++/Objective‑C), you would bind MyJsiModule.add to a fast native implementation and expose it via JSI during app startup.

Takeaway

When you need sub‑millisecond native calls, replace the bridge with a tiny JSI module. The pattern is lightweight, requires only a few lines of wrapper code, and yields measurable UI smoothness gains without a full‑blown native module rewrite.