How does React Native's architecture work (bridge vs new architecture)?

Question

Accepted Answer

React Native runs **JavaScript** and **native** code that must communicate. The original architecture used an asynchronous **bridge**; the **new architecture** (JSI, TurboModules, Fabric) enables faster, synchronous communication. Understanding this clarifies React Native's behavior and performance.

## The original architecture: the bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## The new architecture (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## Why it matters (practically)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## Why it matters

Understanding React Native's architecture is valuable senior-level knowledge because it **explains React Native's behavior and performance characteristics**, deepening the ability to reason about and optimize apps.

The fundamental structure — React Native running a **JS thread** (your code) and the **native side** (UI, native modules) that must **communicate** — is the key to understanding how React Native works.

Understanding the **original bridge architecture** (where JS and native communicate via an asynchronous bridge that serializes messages to JSON and passes them across) explains React Native's historical performance characteristics and limitations: communication was asynchronous-only, had serialization overhead, and the bridge could become a **bottleneck with heavy traffic** (causing jank in fast scrolling or animations passing data across) — which is **why minimizing bridge crossings and running animations on the native thread were important optimizations**, connecting architecture to practical performance advice.

Understanding the **new architecture** (**JSI** enabling direct, synchronous JS↔native calls without the serialization bridge; **TurboModules** for lazy native module loading; **Fabric** for better rendering; Codegen for type-safe interfaces) is increasingly important as it's becoming the default — it improves performance, reduces overhead, enables synchronous calls, and produces smoother UI, representing React Native's significant evolution.

Understanding this architecture **explains React Native's performance** (why the bridge mattered), **informs optimization** (the practices that follow from the architecture), and clarifies how React Native executes — transforming React Native from a black box into an understandable system.

Since understanding the architecture (the bridge and the new JSI-based architecture) explains React Native's performance characteristics, informs optimization, and reflects awareness of its important evolution, and since this depth elevates one from using React Native to understanding it, understanding React Native's architecture is valuable senior-level knowledge — explaining its behavior and performance, informing optimization, and reflecting the depth and awareness of platform evolution expected for senior React Native roles.