Evolution Beyond the Bridge
For years, React Native relied on the 'Bridge'—an asynchronous communication channel between the JavaScript thread and the Native thread. While innovative, this architecture introduced significant latency issues. Every message between JavaScript and Native code had to be serialized into JSON, sent across the bridge, and deserialized on the other side. Fabric, the new rendering system, fundamentally re-architects this relationship.
The Shift to JSI and Synchronous Execution
The core of Fabric is the JavaScript Interface (JSI). JSI allows JavaScript to hold a reference to C++ objects, enabling direct function invocation rather than relying on an asynchronous, message-based queue. This means the JavaScript thread can call native methods directly, and native code can expose host objects that JavaScript interacts with as if they were local objects.
How Fabric Manages the UI Tree
Fabric introduces a thread-safe, immutable tree structure. It manages three distinct representations of the UI:
React Shadow Tree: The initial representation generated by React logic.
Shadow Tree: A C++ representation that calculates layout, allowing for complex layout computations to occur on background threads.
Host View Tree: The final platform-specific views (e.g., UIView or Android View) rendered on the main UI thread.
Performance and Trade-offs
The primary benefit is responsiveness. Since layout calculations can happen off the main thread, the UI remains fluid even during heavy JavaScript computations. However, this complexity increases the burden on developers when writing native modules. Developers must now ensure thread safety in their C++ code, as JSI facilitates cross-thread interactions that were previously impossible or strictly managed by the Bridge.
By moving away from JSON serialization and asynchronous queues, Fabric positions React Native to handle high-fidelity interactions that demand near-instant feedback. For the modern engineer, understanding this transition is key to building complex modules that leverage native capabilities without creating bottlenecks.