¿Cómo funciona la arquitectura de React Native (puente vs nueva arquitectura)?

Question

Accepted Answer

React Native ejecuta código **JavaScript** y código **nativo** que deben comunicarse. La arquitectura original utilizaba un **puente** asincrónico; la **nueva arquitectura** (JSI, TurboModules, Fabric) permite una comunicación más rápida y sincrónica. Comprender esto aclara el comportamiento y rendimiento de React Native.

## La arquitectura original: el puente

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

## La nueva arquitectura (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 qué es importante (en la práctica)

```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 qué es importante

Comprender la arquitectura de React Native es un conocimiento valioso de nivel senior porque **explica el comportamiento y las características de rendimiento de React Native**, profundizando la capacidad de razonar sobre y optimizar aplicaciones.

La estructura fundamental — React Native ejecutando un **hilo JS** (tu código) y el **lado nativo** (UI, módulos nativos) que deben **comunicarse** — es la clave para entender cómo funciona React Native.

Comprender la **arquitectura original del puente** (donde JS y nativo se comunican a través de un puente asincrónico que serializa mensajes a JSON y los pasa) explica las características históricas de rendimiento y limitaciones de React Native: la comunicación era solo asincrónica, tenía sobrecarga de serialización, y el puente podía convertirse en un **cuello de botella con tráfico intenso** (causando parpadeos en desplazamiento rápido o animaciones que pasan datos entre them) — que es **por qué minimizar los cruces del puente y ejecutar animaciones en el hilo nativo eran optimizaciones importantes**, conectando arquitectura con consejos de rendimiento prácticos.

Comprender la **nueva arquitectura** (**JSI** habilitando llamadas JS↔nativo directas y sincrónicas sin el puente de serialización; **TurboModules** para carga perezosa de módulos nativos; **Fabric** para mejor renderizado; Codegen para interfaces seguras en tipos) es cada vez más importante ya que se está convirtiendo en el predeterminado — mejora el rendimiento, reduce la sobrecarga, habilita llamadas sincrónicas, y produce una UI más suave, representando la evolución significativa de React Native.

Comprender esta arquitectura **explica el rendimiento de React Native** (por qué el puente importaba), **informa la optimización** (las prácticas que se derivan de la arquitectura), y aclara cómo ejecuta React Native — transformando React Native de una caja negra en un sistema comprensible.

Ya que comprender la arquitectura (el puente y la nueva arquitectura basada en JSI) explica las características de rendimiento de React Native, informa la optimización, y refleja conocimiento de su importante evolución, y ya que esta profundidad eleva a uno de usar React Native a entenderlo, comprender la arquitectura de React Native es un conocimiento valioso de nivel senior — explicando su comportamiento y rendimiento, informando la optimización, y reflejando la profundidad y conocimiento de la evolución de plataforma esperada para roles senior de React Native.