How does React Native render UI? Compare bridge-based old architecture vs the new JSI/Fabric architecture.

Question

Accepted Answer

React Native ships two rendering architectures . The legacy bridge-based stack is being retired; the New Architecture (JSI / Fabric / TurboModules) is the default since RN 0.76 (October 2024) . Legacy bridge architecture: Three threads: JS thread (your code), Shadow thread (Yoga layout), UI thread (native rendering). Cross-thread communication is asynchronous — every call is serialized to JSON and sent over the bridge, batched per frame. Pain points: JSON ser/deser overhead, async-only native calls, no shared memory, frame drops under heavy traffic. New Architecture (Fabric + TurboModules + JSI + Bridgeless): JSI (JavaScript Interface) — C++ layer that lets JS hold direct references to native objects; no JSON, calls can be synchronous . Fabric — new renderer; builds an immutable shadow tree in C++, enables concurrent rendering, supports React 18+ Suspense/concurrent features. TurboModules — lazy-loaded native modules with type-safe JSI bindings; loaded on first use instead of at startup. Codegen — generates C++/Obj-C/Java glue from TypeScript/Flow spec files so native and JS stay in sync. Bridgeless Mode (RN 0.73+, default 0.76+) — removes the legacy bridge entirely; faster startup, lower memory. Lead with the punchline: 'The bridge is gone — in the New Architecture (default since RN 0.76) JS and native talk directly through JSI.' Then walk the two stacks side-by-side. Naming the four pillars — **JSI, Fabric, TurboModules, Codegen** — and explaining what each one replaces is the single biggest senior-vs-junior tell on this question.