Bridge Architecture
The bridge is the traditional mechanism React Native uses to allow communication between the JavaScript thread and native platform code. Understanding how it works provides valuable insight into React Native’s underlying performance characteristics.
How the Bridge Works
The bridge serializes data into JSON format on one side, passes it asynchronously across a message queue, and deserializes it on the other side, allowing JavaScript and native code to communicate despite running on separate threads.
Why the Bridge is Asynchronous
Since the bridge relies on message passing rather than direct function calls, every communication between JavaScript and native code involves some latency, which becomes noticeable for very frequent operations like animations or gestures.
Performance Bottlenecks of the Bridge
High-frequency events, such as scroll position updates or complex animations, can overwhelm the bridge with excessive message traffic, leading to dropped frames and janky user experiences.
The Bridge and Native Modules
Traditional native modules communicate through this same bridge mechanism, meaning every native module method call involves the same serialization and asynchronous message passing overhead.
Why JSI Was Introduced
To address these performance limitations, React Native introduced the JavaScript Interface (JSI), allowing JavaScript to hold direct references to native objects and call native methods synchronously without the JSON serialization overhead.
Legacy Apps Still Using the Bridge
Many existing React Native applications and libraries still rely on the traditional bridge architecture, though the ecosystem is gradually migrating toward the new JSI-based architecture for improved performance.
Conclusion
Understanding the bridge architecture, including its asynchronous nature and performance limitations, provides essential context for why React Native introduced JSI, Fabric, and TurboModules as part of its new architecture.
