React NativeBridge cũ (legacy) là hàng đợi message bất đồng bộ giữa JS thread và Native thread. Mỗi lần JS gọi native (vd setState → re-render UIView), payload được serialize JSON, đẩy qua bridge, deserialize bên kia. Đặc điểm:
- Async-only: không thể gọi native sync; mọi tương tác phải qua callback/Promise.
- Batched: message gom batch để giảm overhead, nhưng vẫn có lag visible khi list scroll nặng.
- JSON serialization: dữ liệu lớn (image, blob) tốn nhiều CPU.
JSI (JavaScript Interface) thay bridge bằng C++ layer. JS engine (Hermes/JSC) giữ tham chiếu trực tiếp tới object C++ → có thể gọi native function đồng bộ, không serialize, không queue. Lợi ích:
- TurboModule load lazy thay vì load toàn bộ lúc startup.
- Fabric renderer dùng JSI để commit UI tree đồng bộ với React reconciler.
- Reanimated 3 chạy worklet trên UI thread qua JSI — animation 60/120fps không bị block.
RN 0.74 (2024) giới thiệu Bridgeless mode; RN 0.76 (Q4 2024) đặt New Architecture (Fabric + TurboModules + Bridgeless) làm default cho project mới khởi tạo qua npx @react-native-community/cli@latest init. Project cũ vẫn có thể opt-in.
The legacy Bridge was an asynchronous message queue between the JS thread and the native thread. Every JS→native call (e.g. setState → re-render UIView) serialized JSON, pushed it across the bridge, and deserialized on the other side. Properties:
- Async-only: no synchronous native calls; everything via callback/Promise.
- Batched: messages are batched to reduce overhead, but visible lag still appears under heavy list scrolling.
- JSON serialization: large payloads (images, blobs) burn CPU.
JSI (JavaScript Interface) replaces the bridge with a C++ layer. The JS engine (Hermes/JSC) holds direct references to C++ objects, so JS can invoke native functions synchronously — no serialization, no queue. Benefits:
- TurboModules load lazily instead of upfront at startup.
- The Fabric renderer commits the UI tree synchronously with the React reconciler via JSI.
- Reanimated 3 runs worklets on the UI thread through JSI — 60/120 fps animation without blocking.
RN 0.74 (2024) introduced Bridgeless mode; RN 0.76 (Q4 2024) made the New Architecture (Fabric + TurboModules + Bridgeless) the default for new projects scaffolded via npx @react-native-community/cli@latest init. Existing projects can still opt in.