Bagaimana arsitektur React Native bekerja (bridge vs new architecture)?

Question

Accepted Answer

React Native menjalankan kode **JavaScript** dan **native** yang harus berkomunikasi. Arsitektur asli menggunakan **bridge** asinkron; **arsitektur baru** (JSI, TurboModules, Fabric) memungkinkan komunikasi sinkron yang lebih cepat. Memahami ini menjelaskan perilaku dan performa React Native.

## Arsitektur asli: the bridge

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## Arsitektur baru (JSI, TurboModules, Fabric)

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## Mengapa ini penting (secara praktis)

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## Mengapa ini penting

Memahami arsitektur React Native adalah pengetahuan tingkat senior yang berharga karena **menjelaskan perilaku dan karakteristik performa React Native**, memperdalam kemampuan untuk berefleksi tentang dan mengoptimalkan aplikasi.

Struktur fundamental — React Native menjalankan **JS thread** (kode Anda) dan **native side** (UI, native modules) yang harus **berkomunikasi** — adalah kunci untuk memahami bagaimana React Native bekerja.

Memahami **arsitektur bridge asli** (di mana JS dan native berkomunikasi via bridge asinkron yang menserialisasi pesan ke JSON dan melewatkannya) menjelaskan karakteristik performa historis dan keterbatasan React Native: komunikasi hanya asinkron, memiliki overhead serialisasi, dan bridge bisa menjadi **bottleneck dengan traffic berat** (menyebabkan jank pada scrolling cepat atau animasi yang melewatkan data) — yang **mengapa meminimalkan bridge crossings dan menjalankan animasi di native thread adalah optimasi penting**, menghubungkan arsitektur ke saran performa praktis.

Memahami **arsitektur baru** (**JSI** memungkinkan panggilan JS↔native langsung dan sinkron tanpa bridge serialisasi; **TurboModules** untuk lazy native module loading; **Fabric** untuk rendering lebih baik; Codegen untuk interface type-safe) semakin penting karena ini menjadi default — ini meningkatkan performa, mengurangi overhead, memungkinkan panggilan sinkron, dan menghasilkan UI yang lebih smooth, merepresentasikan evolusi signifikan React Native.

Memahami arsitektur ini **menjelaskan performa React Native** (mengapa bridge penting), **menginformasikan optimasi** (praktik yang mengikuti dari arsitektur), dan menjelaskan bagaimana React Native dieksekusi — mengubah React Native dari black box menjadi sistem yang dapat dipahami.

Karena memahami arsitektur (bridge dan arsitektur berbasis JSI baru) menjelaskan karakteristik performa React Native, menginformasikan optimasi, dan mencerminkan kesadaran akan evolusi pentingnya, dan karena kedalaman ini mengangkat seseorang dari menggunakan React Native menjadi memahaminya, memahami arsitektur React Native adalah pengetahuan tingkat senior yang berharga — menjelaskan perilaku dan performanya, menginformasikan optimasi, dan mencerminkan kedalaman dan kesadaran evolusi platform yang diharapkan untuk peran React Native senior.