What is the traditional React Native architecture (The Bridge), and what performance bottlenecks are associated with it?

Short answer

This is the legacy architecture; since React Native 0.76, the New Architecture has been the default, and newer releases are moving toward removing the old one entirely. It relied on a Bridge that asynchronously exchanged batched JSON messages between the JavaScript thread and the Native thread, creating a bottleneck when passing large amounts of data.

Explanation

The classic system consists of three main threads: the JavaScript thread, the Native/UI thread, and the Shadow Tree thread, which calculates layout through Yoga. Communication between JS and Native passed through the Bridge as asynchronous JSON strings. During fast animations or scrolling through huge lists, the Bridge becomes congested with messages, causing delayed responses and dropped frames.

Code example

import { NativeModules } from "react-native";

// Legacy architecture: the call is serialized to JSON, queued, sent asynchronously over the bridge
const { Battery } = NativeModules;

Battery.getLevel((level) => {
  console.log("battery:", level);      // the answer comes back later through the bridge
});

// Anything that fires very often (scroll, touch, gestures) floods the bridge with JSON messages
// and delays the UI — the main bottleneck the New Architecture removes.

Common mistakes

• Believing that the old architecture converts JavaScript code directly into machine code in languages such as Objective-C or Java.

Follow-up questions

• What are the main threads in a React Native app, and how is work distributed among them?
• What is the New Architecture in React Native, and what is the role of JSI (JavaScript Interface)?

Sources

• React Native docs — Architecture Overview
• React Native docs — Threading Model