Pipeline React Native Metro Babel React Compiler Hermes: de tu JS al runtime nativo

Cuando algo va lento en React Native, equipos culpan a Hermes o a Metro sin nombrar la etapa. En un **setup Babel típico**, el path es **Metro → Babel → React Compiler → JS → Hermes**.

• **Código React Native**
• **Metro** — grafo, transform, Fast Refresh
• **Babel** — JSX/TS y plugins
• **React Compiler** — optimizaciones automáticas opcionales en Babel
• **JS transformado**
• **Hermes** — motor; a menudo bytecode en producción

Otros pipelines existen. Trata esta cadena como el modelo mental Babel común—no el único cableado posible.

Metro

Bundler oficial: resolve, workers, serialización. Distingue watch vs transform vs pack.

Babel

Preset RN/Expo. Aquí suele enchufarse **babel-plugin-react-compiler**.

React Compiler

Rewrite en build time con **optimizaciones automáticas**. No reemplaza Metro ni Hermes. Respeta Rules of React.

Hermes

Motor por defecto. Cold start ≠ jank post-paint.

Checklist

• Documentar el pipeline de tu versión (Babel u otro host)
• Confirmar si Compiler está on/off
• Separar métricas CI vs cold start vs JS thread

Conclusión

En un setup Babel típico: Metro posee el grafo; Babel hospeda transforms; Compiler aplica optimizaciones automáticas; Hermes ejecuta. Nombra la etapa antes de cambiar la herramienta.