Hoe werkt React Native's architectuur (bridge versus nieuwe architectuur)?

Question

Accepted Answer

React Native voert **JavaScript** en **native** code uit die met elkaar moeten communiceren. De originele architectuur gebruikte een asynchrone **bridge**; de **nieuwe architectuur** (JSI, TurboModules, Fabric) maakt snellere, synchrone communicatie mogelijk. Dit inzicht verduidelijkt React Native's gedrag en prestaties.

## De originele architectuur: de 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
```

## De nieuwe architectuur (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.
```

## Waarom het belangrijk is (praktisch)

```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
```

## Waarom het belangrijk is

Begrip van React Native's architectuur is waardevol kennis op senior-niveau omdat het **React Native's gedrag en prestatiekemerken verklaart**, waardoor je beter in staat bent om apps te analyseren en te optimaliseren.

De fundamentele structuur — React Native voert een **JS-thread** (jouw code) en de **native-zijde** (UI, native modules) uit die **moeten communiceren** — is de sleutel tot het begrijpen hoe React Native werkt.

Begrip van de **originele bridge-architectuur** (waarbij JS en native via een asynchrone bridge communiceren die berichten naar JSON serialiseert en deze overstuurt) verklaart React Native's historische prestatiekemerken en beperkingen: communicatie was alleen asynchron, had serialisatie-overhead, en de bridge kon een **bottleneck worden bij veel verkeer** (wat jank veroorzaakte bij snel scrollen of animaties die data overstuuren) — wat **verklaart waarom het minimaliseren van bridge-overgangen en het uitvoeren van animaties op de native-thread belangrijke optimalisaties waren**, waarbij architectuur aansluit op praktisch prestatieadvies.

Begrip van de **nieuwe architectuur** (**JSI** waarmee directe, synchrone JS↔native-aanroepen mogelijk zijn zonder de serialisatie-bridge; **TurboModules** voor lazy loading van native modules; **Fabric** voor beter renderen; Codegen voor type-safe interfaces) wordt steeds belangrijker omdat dit de standaard wordt — het verbetert prestaties, reduceert overhead, maakt synchrone aanroepen mogelijk, en levert een vloeiendere UI op, wat React Native's significante evolutie vertegenwoordigt.

Begrip van deze architectuur **verklaart React Native's prestaties** (waarom de bridge belangrijk was), **stuurt optimalisatie aan** (de praktijken die uit de architectuur volgen), en verduidelijkt hoe React Native wordt uitgevoerd — transformerend React Native van een black box naar een begrijpbaar systeem.

Omdat begrip van de architectuur (de bridge en de nieuwe JSI-gebaseerde architectuur) React Native's prestatiekemerken verklaart, optimalisatie stuurt, en bewustzijn van belangrijke evolutie weerspiegelt, en omdat deze diepgang je van het gebruiken van React Native tot het begrijpen ervan tilt, is begrip van React Native's architectuur waardevol kennis op senior-niveau — verklaart het gedrag en prestaties, stuurt optimalisatie aan, en weerspiegelt de diepgang en bewustzijn van platform-evolutie die verwacht wordt voor senior React Native-functies.