The async bridge limitation
React Native has enabled thousands of teams to build mobile applications with JavaScript and React, sharing logic between iOS and Android. But the original architecture carries a structural constraint: the bridge. Every communication between the JavaScript thread and the native thread passes through an asynchronous bridge based on serialised JSON. Every call to a native module — camera access, sensor reading, interface update — requires serialisation, transfer and deserialisation.
For simple interactions the overhead is negligible. But when communication frequency increases — fluid animations, fast-scrolling lists, complex gestures — the bridge becomes the bottleneck. JSON serialisation consumes CPU, asynchrony introduces latency and the JavaScript thread cannot directly access native data structures.
JSI: direct synchronous communication
The new architecture, developed over three years and made available as opt-in in 2022, starts by replacing the bridge with JSI (JavaScript Interface). JSI is a thin layer that allows JavaScript code to call C++ functions exposed by the native runtime directly, without serialisation and without forced asynchrony.
With JSI, a native object can be referenced directly from JavaScript as a host object. Calls are synchronous when needed, eliminating bridge latency. Communication cost drops from milliseconds to microseconds for critical operations.
Fabric: the new rendering system
Fabric is the rewrite of the rendering system. In the previous architecture, the shadow tree — the internal layout representation — was computed on the JavaScript thread and communicated to the native thread via the bridge. With Fabric, the shadow tree is a shared C++ structure accessible from both threads without serialisation.
Fabric supports synchronous rendering: interface transitions can be computed and applied within a single frame. The result is a more responsive interface, with fewer dropped frames during animations and gestures.
TurboModules: lazy native module loading
In the previous architecture, all native modules are initialised at application startup, even those that will never be used in the current session. TurboModules makes native modules lazy: they are loaded only when JavaScript code requests them for the first time.
TurboModules uses JSI to expose typed interfaces via Codegen, a code generator that produces C++ bindings from TypeScript or Flow specifications. The result is faster startup, reduced memory consumption and a statically verifiable interface between JavaScript and native code.
An architecture for the next decade
The new architecture does not change the development model: React Native applications continue to be written in JavaScript or TypeScript with React components. The change is beneath the surface: direct communication instead of serialisation, shared data structures instead of the bridge, lazy loading instead of full initialisation. For teams building cross-platform mobile applications, the improvement in performance and responsiveness is the missing requirement for competing with pure native applications.
Link: reactnative.dev