Vicen Moreno

Pro Googler

Follow me on GitHub

React Native 0.73 - Debugging mejorado y nuevas arquitecturas por defecto

React Native 0.73 marca un antes y después en el debugging de aplicaciones móviles

Lo que trae 0.73 🎉

La versión 0.73 de React Native llegó en diciembre de 2023, pero no ha sido hasta ahora que he podido probarla a fondo en un proyecto real. Y tengo que decir que las mejoras son sustanciales.

1. Nueva arquitectura por defecto

La “New Architecture” (Fabric + TurboModules) ahora está habilitada por defecto en nuevos proyectos. Esto significa:

  • Mejor rendimiento en listas y animaciones
  • Interop sincrónico entre JavaScript y código nativo
  • Menos uso de memoria

Habilitando la nueva arquitectura en proyectos existentes

Si tienes un proyecto anterior, puedes habilitarla editando android/gradle.properties:

newArchEnabled=true

Y en iOS, en el Podfile:

:fabric_enabled => true

Importante: Revisa que tus dependencias sean compatibles primero.

2. Nuevo debugger: Hermes Debugger

El cambio más significativo para el desarrollo diario es el nuevo debugger basado en Chrome DevTools Protocol.

Adiós a los dolores de cabeza 🎯

Antes, debuggear React Native era… complicado. El debugger remoto tenía problemas de sincronización, perdía el estado frecuentemente y era lento.

El nuevo debugger:

  • Se conecta directamente al motor Hermes
  • Mantiene el estado de forma consistente
  • Permite breakpoints en código nativo
  • Funciona con Flipper out-of-the-box

Cómo usarlo

Simplemente abre el dev menu (Cmd+D en iOS, Cmd+M en Android) y selecciona “Open Debugger”. Se abrirá una instancia de Chrome DevTools conectada directamente.

// Ahora los breakpoints funcionan perfectamente
const fetchData = async () => {
  debugger; // Esto funciona como esperas
  const response = await api.getData();
  console.log(response); // Los logs aparecen al instante
};

Por fin podemos usar symlinks en node_modules. Esto es especialmente útil para:

  • Monorepos con Yarn workspaces
  • Desarrollo de librerías propias
  • Proyectos con dependencias locales
{
  "dependencies": {
    "my-local-lib": "file:../my-local-lib"
  }
}

Funciona sin configuración adicional. Antes esto requería workarounds complejos.

4. Mejoras en Android

Kotlin por defecto

Los nuevos proyectos generan código Kotlin en lugar de Java:

class MainActivity : ReactActivity() {
  override fun getMainComponentName(): String = "MyApp"
}

Es más conciso y moderno. Si prefieres Java, aún puedes usarlo.

Android 14 support

Soporte completo para las últimas características de Android 14, incluyendo:

  • Predictive back gestures
  • Mejoras en permisos
  • Compatibilidad con las nuevas APIs

Mi experiencia migrando 📱

Migré una app de producción con ~50k líneas de código de 0.71 a 0.73. El proceso:

Tiempo total: ~2 días Problemas encontrados: 3 dependencias incompatibles con New Architecture

Dependencias que tuve que actualizar:

# Estas necesitaron actualización
npm install react-native-reanimated@latest
npm install react-native-gesture-handler@latest
npm install @react-navigation/native@latest

Beneficios medibles:

  • Tiempo de build: -15% en Android
  • FPS en animaciones: +20% de media
  • Crashes en producción: -30%

¿Debería actualizar? 🤔

Sí, si:

  • Empiezas un proyecto nuevo (sin duda)
  • Tu app tiene problemas de rendimiento
  • Necesitas mejor debugging
  • Tus dependencias principales son compatibles

Espera si:

  • Usas librerías legacy sin mantenimiento
  • Tu app es muy compleja y no puedes testear a fondo
  • No tienes tiempo para lidiar con posibles issues

Consejos para la migración 💡

  1. Actualiza dependencias primero: Antes de migrar RN, actualiza tus deps a las últimas versiones compatibles con 0.73

  2. Prueba en una rama: Crea una rama específica para la migración y no merges hasta estar 100% seguro

  3. Usa la nueva arquitectura incrementalmente: Puedes empezar con newArchEnabled=false y habilitarla después

  4. Revisa los release notes: Hay breaking changes menores que pueden afectarte

  5. Testea en dispositivos reales: El emulador no siempre refleja todos los problemas

Conclusión

React Native 0.73 es una actualización sólida que mejora la experiencia de desarrollo significativamente. El nuevo debugger por sí solo justifica la actualización.

Si trabajas con React Native, te recomiendo que reserves tiempo para probar esta versión. La inversión vale la pena.

¿Ya has probado 0.73? ¿Qué te ha parecido? Déjame saber en los comentarios o por Twitter.

¡Happy coding! 🚀📱


 Anterior      Posterior

Por Vicente José Moreno Escobar el 26 de febrero de 2024
Archivado en: React Native   Mobile   JavaScript



Puedes disfrutar de otros artículos como éste en el archivo del sitio.