How Fabric Improves Rendering Over the Old UIManager
Fabric rendering model.
a C++ shadow tree shared across threads, JSI-based synchronous access, immutable tree commits, and support for concurrent React features.
WHAT THIS TESTS Whether you understand Fabric's shared C++ shadow tree, synchronous access, and concurrency support versus the old UIManager.
A GOOD ANSWER COVERS The legacy UIManager sent layout and view updates across the asynchronous bridge, so the UI thread and JS thread were loosely coupled through serialized messages, and synchronous reads were impossible. Fabric reimplements the renderer largely in C++ and introduces a shadow tree that lives in C++ and is accessible from both the JS and UI threads through JSI, without serialization. This enables synchronous operations: code can measure and lay out a view synchronously when needed, which the old pipeline could not do. Fabric commits immutable snapshots of the shadow tree, so each rendered state is consistent and updates can be applied atomically, reducing inconsistency and tearing. The C++ core is shared across platforms, improving consistency between iOS and Android. Because of this design Fabric integrates with React's concurrent features, allowing prioritized, interruptible rendering so high-priority updates like user input can preempt lower-priority work, improving perceived responsiveness.
COMMON WRONG ANSWERS Saying Fabric just makes the bridge faster while still serializing UI updates. Confusing Fabric, the renderer, with TurboModules, which expose native modules. Claiming Fabric renders on the JS thread. Ignoring the synchronous-measurement and concurrency benefits.
LIKELY FOLLOW-UPS How the shadow tree's immutability helps consistency. What synchronous layout enables that the old async UIManager could not. How Fabric ties into React concurrent rendering and Suspense.
ONE CONCRETE EXAMPLE Measuring a freshly laid-out view to position a tooltip was awkward under the async UIManager because measurement came back later. With Fabric, the shadow tree is reachable synchronously via JSI, so the layout can be measured immediately, and the renderer commits an immutable tree snapshot for a consistent frame.
Read the original → reactnative.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.