NativeModule vs TurboModule

Yesterday, one of my older senior colleagues inquired about recent changes in React Native's architecture, specifically mentioning TurboModules—a term unfamiliar to me. In response, I resolved to educate myself on this topic by conducting further research. It's worth noting that individuals familiar with React-Native bridging are likely acquainted with the concept of Native Modules. In the following, I attempted to provide additional insights into Native Modules and explained the recent TurboModules updates, emphasizing their relevance in the context of bridging.

The React Native New Architecture introduces TurboModules, offering significant distinctions from traditional Native Modules:

Performance Boost:

TurboModules improve performance by minimising the overhead in communication between JavaScript and Native threads, surpassing the efficiency of the older Native Modules.

Let's consider a simple example to illustrate how TurboModules can improve performance in communication between JavaScript and Native threads in React Native.

Native Module:

import { NativeModules } from 'react-native';

const OldModule = NativeModules.OldModule;

// Calling a method from the old module
OldModule.getData(callback);
        

TurboModule:

import { TurboModuleRegistry, getTurboModule } from 'react-native';

const TurboModule = getTurboModule('TurboModule');

// Calling a method from the TurboModule
TurboModule.getData(callback);
        

In the TurboModule example, the communication between JavaScript and Native threads is optimized, resulting in improved performance compared to the older Native Module. The use of getTurboModule and the streamlined API surface contribute to this efficiency, showcasing the benefits of TurboModules in React Native's new architecture.

Improved Type Safety:

TurboModules leverage static analysis to enhance type safety during development, reducing runtime errors and improving overall code reliability.

Let's walk through a simplified example to illustrate how TurboModules leverage static analysis for enhanced type safety in React Native development:

Native Module:

import { NativeModules } from 'react-native';

const OldModule = NativeModules.OldModule;

// Calling a method with potential type-related runtime error
OldModule.getData(42, (result) => {
  // Processing the result
  console.log(result);
});
        

In the older Native Module, if the argument provided to getData is of the wrong type (e.g., passing a number instead of the expected string), it may result in a runtime error.

TurboModule:

import { TurboModuleRegistry, getTurboModule } from 'react-native';

const TurboModule = getTurboModule('TurboModule');

// Calling a method with enhanced type safety
TurboModule.getData('Hello, Turbo!', (result) => {
  // Processing the result
  console.log(result);
});
        

With TurboModules, static analysis during development helps catch type-related issues before runtime. If the argument provided to getData in the TurboModule example doesn't match the expected type, the development environment can identify and highlight the error, reducing the likelihood of runtime errors and improving overall code reliability.

In summary, the introduction of TurboModules in the React Native New Architecture brings performance improvements, a more refined API surface, enhanced type safety, and simplified bridge communication compared to traditional Native Modules.