TurboModules: Boosting Native Bridge Performance in React Native

Insight

TurboModules are the next‑gen native module system introduced in React Native 0.73. Unlike the legacy bridge, which serializes calls over a JavaScript‑to‑native queue, TurboModules expose a direct, JSI‑backed interface. This eliminates JSON marshaling, reduces latency, and lets you call native methods synchronously when needed. The result is a noticeable speed boost for frequently used APIs such as device sensors, cryptography, or custom native utilities. Enabling TurboModules requires the new architecture flag, but the migration path is incremental—only the modules you rewrite gain the performance win.

Example

// MyDeviceModule.ts (TypeScript definition for a TurboModule)
import { TurboModule, TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getBatteryLevel(): Promise<number>;
}

export default (TurboModuleRegistry.getEnforcing<Spec>('MyDeviceModule') as Spec);

// Usage in React Native code
import MyDeviceModule from './MyDeviceModule';

async function logBattery() {
  const level = await MyDeviceModule.getBatteryLevel();
  console.log('Battery:', level);
}
logBattery();

Takeaway

Turn on the new architecture (newArchEnabled: true in metro.config.js or Expo config) and rewrite performance‑critical native modules as TurboModules. Even a single module can shave milliseconds off the UI thread, delivering a smoother user experience.