React Native architecture (bridge, new architecture) - UI Render Trace

Component - React Native architecture (bridge, new architecture)

This UI component explains how React Native builds and renders UI using its architecture. It shows the classic Bridge system and the new architecture with Fabric and TurboModules, which improve communication between JavaScript and native code for smoother apps.

Widget Tree

ReactNativeApp
├─ JavaScript Thread
│  └─ React Components
├─ Bridge (Classic Architecture)
│  ├─ Message Queue
│  └─ Native Modules
└─ New Architecture
   ├─ Fabric Renderer
   └─ TurboModules

The root is the ReactNativeApp. It has a JavaScript Thread running React Components. The classic Bridge connects JavaScript to native modules via a message queue. The new architecture adds Fabric Renderer for UI and TurboModules for faster native module calls.

Render Trace - 5 Steps

Step 1: React Components

Step 2: Bridge (Classic Architecture)

Step 3: Native Modules

Step 4: New Architecture - Fabric Renderer

Step 5: New Architecture - TurboModules

State Change - Re-render

Trigger:User taps a button that changes state

Before

UI shows initial screen with button

→

After

UI updates to show new text after button tap

Re-renders:React Components subtree re-renders; Fabric updates native UI directly

UI Quiz - 3 Questions

What does the classic React Native Bridge do?

A Directly updates native UI synchronously

B Runs JavaScript code on the native thread

C Sends messages between JavaScript and native code asynchronously

D Replaces native modules with JavaScript modules

Key Insight

React Native's architecture bridges JavaScript and native code to build mobile UI. The classic Bridge uses asynchronous messaging, which can slow updates. The new architecture with Fabric and TurboModules makes UI rendering and native calls faster and smoother by reducing overhead and enabling direct communication.