Como funciona a arquitetura do React Native (bridge vs nova arquitetura)?

Question

Accepted Answer

O React Native executa código **JavaScript** e código **nativo** que precisam se comunicar. A arquitetura original usava um **bridge** assíncrono; a **nova arquitetura** (JSI, TurboModules, Fabric) permite comunicação mais rápida e síncrona. Compreender isso esclarece o comportamento e a performance do React Native.

## A arquitetura original: o 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
```

## A nova arquitetura (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.
```

## Por que isso importa (na prática)

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

## Por que isso importa

Compreender a arquitetura do React Native é conhecimento valioso de nível sênior porque **explica o comportamento e as características de performance do React Native**, aprofundando a capacidade de raciocinar sobre e otimizar aplicações.

A estrutura fundamental — React Native executando uma **thread JS** (seu código) e o **lado nativo** (UI, módulos nativos) que deve **se comunicar** — é a chave para entender como o React Native funciona.

Compreender a **arquitetura original do bridge** (onde JS e nativo se comunicam por meio de um bridge assíncrono que serializa mensagens em JSON e as passa) explica as características históricas de performance e limitações do React Native: a comunicação era apenas assíncrona, tinha overhead de serialização, e o bridge podia se tornar um **gargalo com tráfego pesado** (causando jank em scrolling rápido ou animações que passam dados através dele) — o que é **por que minimizar as travessias do bridge e executar animações na thread nativa eram otimizações importantes**, conectando arquitetura a conselhos práticos de performance.

Compreender a **nova arquitetura** (**JSI** permitindo chamadas JS↔native diretas e síncronas sem o bridge de serialização; **TurboModules** para carregamento lazy de módulos nativos; **Fabric** para melhor renderização; Codegen para interfaces type-safe) é cada vez mais importante conforme se torna o padrão — melhora performance, reduz overhead, permite chamadas síncronas e produz UI mais suave, representando uma evolução significativa do React Native.

Compreender essa arquitetura **explica a performance do React Native** (por que o bridge importava), **informa otimização** (as práticas que decorrem da arquitetura), e esclarece como o React Native se executa — transformando o React Native de uma caixa preta em um sistema compreensível.

Já que compreender a arquitetura (o bridge e a nova arquitetura baseada em JSI) explica as características de performance do React Native, informa otimização, e reflete consciência de sua importante evolução, e já que essa profundidade nos eleva de usar React Native para compreendê-lo, compreender a arquitetura do React Native é conhecimento valioso de nível sênior — explicando seu comportamento e performance, informando otimização, e refletindo a profundidade e consciência da evolução da plataforma esperadas para funções sênior em React Native.