Saltar al contenido principal

React Native 0.83 - React 19.2, nuevas funciones de DevTools, sin cambios importantes

· 13 min de lectura
Alex Hunt
Alex Hunt
Software Engineer @ Meta
Riccardo Cipolleschi
Riccardo Cipolleschi
Software Engineer @ Meta
Gabriel Donadel Dall'Agnol
Gabriel Donadel Dall'Agnol
Software Engineer @ Expo
Alan Hughes
Alan Hughes
Software Engineer @ Expo
Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

¡Hoy nos complace anunciar la versión 0.83 de React Native!

Esta versión incluye React 19.2, nuevas funciones importantes para React Native DevTools, y soporte para las APIs de Rendimiento Web y Observador de Intersección (Canary). Esta es también la primera versión de React Native sin cambios importantes que afecten al usuario.

Lo más destacado​

React 19.2​

Esta versión incluye React 19.2, que trae las nuevas APIs <Activity> y useEffectEvent a React Native.

Importante: CVE-2025-55182

En el momento de lanzamiento, react-native@0.83.0 depende de react@19.2.0, y es posible que también hayas visto la reciente Vulnerabilidad de seguridad crítica en los componentes del servidor de React.

Queremos enfatizar que React Native NO está afectado directamente por esta vulnerabilidad, ya que no depende de los paquetes impactados:

  • react-server-dom-webpack
  • react-server-dom-parcel
  • react-server-dom-turbopack

Sin embargo, si estás utilizando React Native como parte de un monorepo donde estos paquetes puedan estar presentes, por favor compruébalos y actualízalos inmediatamente.

Actualizaremos todas las dependencias de React a 19.2.1 en nuestro próximo parche.

<Activity>​

<Activity> te permite dividir tu aplicación en "actividades" que pueden controlarse y priorizarse. Puedes usar Activity como alternativa al renderizado condicional de partes de tu aplicación, y actualmente admite 2 modos: 'visible' y 'hidden'.

  • hidden: oculta los hijos, desmonta los efectos y difiere todas las actualizaciones hasta que React no tenga nada más que hacer.

  • visible: muestra los hijos, monta los efectos y permite que las actualizaciones se procesen normalmente.

Una característica interesante de los árboles ocultos usando <Activity mode='hidden'> es que conservan su estado. Así, cuando vuelven a ser visibles, por ejemplo, mantienen el estado de búsqueda y la selección de una interacción previa del usuario.

React 19.1.1React 19.2.1

Puedes leer más sobre <Activity> en la documentación de React.

useEffectEvent​

Un patrón común con useEffect es notificar al código de la aplicación sobre algún tipo de "evento" de un sistema externo. El problema con este enfoque es que un cambio en cualquier valor utilizado dentro de dicho evento hará que el Effect circundante se vuelva a ejecutar.

Para solucionarlo, muchos usuarios desactivan la regla de lint y excluyen la dependencia. Pero eso puede generar errores ya que el linter ya no puede ayudarte a mantener las dependencias actualizadas si necesitas modificar el Effect después.

Con useEffectEvent, puedes separar la parte de "evento" de esta lógica del Effect que lo emite.

Puedes leer más sobre useEffectEvent en la documentación de React.

Nuevas características de DevTools​

En la versión 0.83, nos complace ofrecer algunas características muy esperadas y mejoras en la calidad de vida para React Native DevTools.

Paneles de Red y Rendimiento​

La inspección de red y el seguimiento de rendimiento son dos nuevas capacidades potentes en React Native DevTools, disponibles hoy.

Lista del panel de Red en React Native DevTools

La inspección de red, ahora disponible para todas las aplicaciones de React Native, te permite ver y comprender las solicitudes de red realizadas por tu aplicación. Las solicitudes registradas proporcionan metadatos detallados como tiempos y encabezados enviados/recibidos, así como vistas previas de las respuestas. Y — por primera vez — puedes usar la pestaña Initiator para ver en qué parte de tu código se originó una solicitud de red.

💡 Network event coverage, Expo support

Which network events are captured?

Today, we record all network calls through fetch(), XMLHttpRequest, and <Image> — with support for custom networking libraries, such as Expo Fetch, coming later.

Expo Network differences

Because of this, apps using Expo will continue to see the "Expo Network" panel — a separate implementation by the Expo framework which will log these additional request sources but has slightly reduced features.

  • Coverage for Expo-specific network events.
  • No request initiator support.
  • No Performance panel integration.

We're working with Expo to integrate Expo Fetch and third party networking libraries with our new Network inspection pipeline in future releases.

Un seguimiento de rendimiento en React Native DevTools

El seguimiento de rendimiento te permite grabar una sesión de rendimiento dentro de tu aplicación para comprender cómo se ejecuta tu código JavaScript y qué operaciones tomaron más tiempo. En React Native, mostramos la ejecución de JavaScript, seguimientos de rendimiento de React, eventos de red y User Timings personalizados, renderizados en una única línea de tiempo de rendimiento.

Junto con el soporte para las APIs de Rendimiento Web en 0.83, este es un conjunto de características potente que proporciona visibilidad detallada sobre lo que podría estar ralentizando tus aplicaciones React Native. Te animamos a probar el panel de Rendimiento e incorporarlo en tu flujo de trabajo diario.

Conoce más sobre nuestras nuevas características de React Native DevTools y seguimientos de rendimiento de React.

Nueva aplicación de escritorio​

Anteriormente, React Native DevTools se iniciaba en una ventana del navegador y requería Chrome o Edge instalados. Hoy presentamos una experiencia de escritorio enormemente mejorada con nuestra nueva aplicación de escritorio empaquetada. Sus características incluyen:

  • La misma configuración de instalación cero que antes, ahora sin requerir navegador web.

  • Inicio más rápido mediante un binario de escritorio ligero y certificado. En raros casos donde esto no pueda descargarse (como firewalls corporativos), recurrimos al flujo de inicio anterior en navegador.

  • Mejor gestión de ventanas, con multitarea mejorada en macOS, elevación automática en puntos de interrupción, elevación automática al reconectar a la misma app, y disposiciones de ventanas guardadas al reiniciar.

  • Fiabilidad mejorada al ejecutar DevTools separado de tu perfil de navegador personal. Esto resuelve especialmente informes de errores donde ciertas extensiones de Chrome preinstaladas causaban fallos en React Native DevTools.

Icono de React Native DevTools en el Dock de macOS

Observadores de Intersección (Canary)​

Como parte de nuestro esfuerzo por llevar APIs web a React Native, hemos añadido soporte para IntersectionObserver en la versión canaria de 0.83.

IntersectionObserver te permite observar de forma asíncrona intersecciones de diseño entre un elemento objetivo y su ancestro. Consulta nuestra API y documentación de implementación para más detalles. También hemos incluido ejemplos en RNTester.

Otros cambios​

APIs de Rendimiento Web como estables​

Como se presentó en la versión 0.82, React Native ahora implementa un subconjunto de las APIs de Rendimiento disponibles en la web, ahora disponibles de forma estable:

  • High Resolution Time: define performance.now() y performance.timeOrigin.

  • Performance Timeline: define PerformanceObserver y métodos para acceder a entradas de rendimiento en el objeto performance (getEntries(), getEntriesByType(), getEntriesByName()).

  • User Timing: define performance.mark y performance.measure.

  • Event Timing API: define tipos de entrada event reportados a PerformanceObserver.

  • Long Tasks API: define tipos de entrada longtask reportados a PerformanceObserver.

Estas APIs permiten rastrear diferentes aspectos del rendimiento en tu aplicación, visibles en el panel Performance de React Native DevTools, así como en tiempo de ejecución mediante PerformanceObserver.

PerformanceObserver también funciona en builds de producción, abriendo nuevas oportunidades para capturar métricas de rendimiento del mundo real en tus aplicaciones.

Experimental - Hermes V1​

Hermes logo

Hermes V1 es la próxima evolución de Hermes, con mejoras en el compilador y la VM que mejoran significativamente el rendimiento de JavaScript.

En React Native 0.82, lanzamos Hermes V1 como opción experimental. Y en la versión 0.83, Hermes V1 incluye más mejoras de rendimiento.

💡 Enabling Hermes V1

Note: While Hermes V1 is in the experimental phase, you’ll need to build React Native from source to try it out.

To try Hermes V1 in your own project, use the following steps:

  1. Force your package manager to resolve the experimental version of Hermes V1 compiler package by modifying the corresponding section of your package.json file (note that the current versioning convention is only for the experimental phase of Hermes V1):
package.json
"resolutions": { "hermes-compiler": "250829098.0.4" }

  1. Enable Hermes V1 for Android by adding hermesV1Enabled=true inside android/gradle.properties:

    android/gradle.properties
    hermesV1Enabled=true

    Also, configure React Native to build from source by editing android/settings.gradle:

    android/settings.gradle
      includeBuild('../node_modules/react-native') {
          dependencySubstitution {
              substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
              substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
              substitute(project(":packages:react-native:ReactAndroid:hermes-engine")).using(module("com.facebook.hermes:hermes-android:250829098.0.1"))
          }
      }

  2. Enable Hermes V1 for iOS by installing pods with RCT_HERMES_V1_ENABLED=1 environment variable.

    RCT_HERMES_V1_ENABLED=1 bundle exec pod install

    Keep in mind that Hermes V1 is not compatible with the precompiled React Native builds, so make sure you don’t use the RCT_USE_PREBUILT_RNCORE flag when installing pods.

  3. To confirm if your app is running Hermes V1, execute the following code within your app or the DevTools console. This code will return the Hermes version, which should match the version specified in step 1 (250829098.0.1):

    // expecting "250829098.0.1" in Hermes V1
    HermesInternal.getRuntimeProperties()['OSS Release Version'];

Experimental - Excluir la arquitectura heredada en iOS durante la compilación​

En esta versión, añadimos una nueva bandera para iOS que te permite excluir la Arquitectura Heredada del código base durante la compilación. Si tu aplicación ya usa la Nueva Arquitectura, puedes intentar eliminar el código de arquitectura heredada instalando tus pods con:

RCT_REMOVE_LEGACY_ARCH=1 bundle exec pod install

Esto debería reducir tanto el tiempo de compilación como el tamaño de tu aplicación. Las mejoras dependen de cuántas bibliotecas de terceros uses: en nuestras pruebas, usando una nueva aplicación sin dependencias, el tiempo de compilación se redujo de 73.0 segundos a 58.2 segundos, y el tamaño de la aplicación pasó de 51.2 Mb a 48.2 Mb.

información

RCT_REMOVE_LEGACY_ARCH no es compatible con binarios precompilados de React Native. Si usas binarios precompilados, deberás reinstalar los pods y compilar la aplicación desde el código fuente.

Experimental - Depurar tus binarios precompilados en iOS​

En esta versión, hemos implementado la capacidad de depurar el código de React Native que se distribuye con un binario precompilado. Esto es especialmente útil para mantenedores de bibliotecas o si estás desarrollando un módulo nativo o un componente nativo.

Para depurar el código binario incluido en el binario precompilado de React Native, sigue estos pasos:

# From the ios folder of your project
bundle exec pod cache clean --all
bundle exec pod deintegrate
RCT_USE_RN_DEP=1 RCT_USE_PREBUILT_RNCORE=1
RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS=1 bundle exec pod install
open <your-project>.xcworkspace

La magia la realiza la bandera RCT_SYMBOLICATE_PREBUILT_FRAMEWORKS, que instruye a CocoaPods a descargar los archivos dSYM de React Native y expandirlos en la carpeta adecuada.

En este punto, puedes establecer un punto de interrupción en tu aplicación, por ejemplo en AppDelegate.swift, y compilar y ejecutar la aplicación desde Xcode.

Cuando la aplicación se detenga, abre la consola de Xcode y ejecuta el comando LLDB:

# If you are running the app in the simulator
add-dsym <path-to-your-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64_x86_64-simulator/React.framework/dSYMs/React.framework.dSYM

# If you are running the app on a physical device
add-dsym <path-to-your-app>/ios/Pods/React-Core-prebuilt/React.xcframework/ios-arm64/React.framework/dSYMs/React.framework.dSYM

Ahora podrás entrar paso a paso en el código de React Native.

Cambios importantes​

Estamos trabajando arduamente para que las versiones de React Native sean más predecibles y fáciles de actualizar. React Native 0.83 es la primera versión sin cambios importantes para el usuario.

Si estás en React Native 0.82, deberías poder actualizar tu aplicación a React Native 0.83 sin realizar cambios en tu código.

Para aprender más sobre lo que consideramos un cambio importante, consulta este artículo.

Obsoletos​

Esta versión incluye dos obsoletos específicos de Android:

  • Networking: El método sendRequestInternal está siendo eliminado progresivamente y ahora está obsoleto.

  • Animation: startOperationBatch y finishOperationBatch ahora están obsoletos.

Agradecimientos​

React Native 0.83 contiene más de 594 commits de 56 colaboradores. ¡Gracias por todo vuestro arduo trabajo!

Queremos agradecer especialmente a estos miembros de la comunidad que realizaron contribuciones significativas en esta versión:

Actualización a 0.83​

Utiliza el React Native Upgrade Helper para ver cambios de código entre versiones de React Native en proyectos existentes, además de la documentación de actualización.

Para crear un nuevo proyecto:

npx @react-native-community/cli@latest init MyProject --version latest

Si usas Expo, React Native 0.83 estará disponible en el SDK 55, que se lanzará en enero de 2026.

Versiones compatibles​

0.83 es ahora la última versión estable de React Native y 0.80.x pasa a no ser compatible. Para más información, consulta la política de soporte de React Native.