De la Lentitud al Rayo: Mejorando el Rendimiento de React Native

Hola a todos. Es fantástico estar aquí hoy para hablar sobre algo que afecta a todos los desarrolladores en algún momento de su trayectoria, que es el rendimiento. Como todos sabemos, los usuarios móviles esperan experiencias fluidas y rápidas. Incluso una pequeña falta puede llevar a la frustración y al abandono.

Mi charla de hoy, de la falta a la iluminación, mejorando el rendimiento de la aplicación React Native, explorará las técnicas de optimización para ayudarte a construir aplicaciones que no solo sean funcionales, sino también increíblemente rápidas. Ya sea que estés solucionando cuellos de botella o planificando para optimizar, esto te ayudará a equiparte con las estrategias prácticas, herramientas y ejemplos que puedes aplicar. Comencemos.

Soy Swetha. Trabajo como ingeniera de software senior en Replik. Me encanta el senderismo, me encanta andar en bicicleta y amo a los animales, y soy de India. Comencemos entendiendo por qué el rendimiento es una prioridad principal para las aplicaciones móviles. Los estudios muestran que el 53% de los usuarios abandonan una aplicación si tarda más de tres segundos en cargarse. El 80% de los usuarios abandonan la aplicación que se retrasa o se bloquea. Y los efectos no se detienen ahí. Cada segundo de retraso reduce la conversión en un 7%. Y cuando la aplicación funciona mal, los usuarios se van, las calificaciones de la aplicación caen en picado y las empresas pierden ingresos. Entonces, como desarrolladores, nuestro objetivo es crear aplicaciones que se sientan instantáneas e intuitivas. Para lograr eso, necesitamos mantener un fluido de 60 fotogramas por segundo, o FPS. Cuando caemos por debajo de 30 FPS, los usuarios comienzan a notar, y eso impacta directamente en el compromiso y la retención. Hoy nos centraremos en formas prácticas de superar estos desafíos de rendimiento.

Pero antes de pasar allí, hagamos un resumen de la arquitectura de React Native. La promesa de React Native de desarrollo multiplataforma se basa en su arquitectura, pero esta flexibilidad viene con algunos desafíos. En el modelo heredado, React Native se basa en un puente para comunicarse entre el hilo de JavaScript y el hilo nativo de forma asincrónica. Esto requiere serialización JSON, lo que agrega sobrecarga y latencia, especialmente para cargas de datos grandes subidas. Aquí hay una representación visual de lo que acabo de hablar, donde este es un puente que se utiliza para comunicarse entre el hilo de JavaScript y los hilos nativos, y todo esto ocurre de forma asincrónica, lo que requiere serialización JSON.

Ahora, la nueva arquitectura. Esto presenta JSI, la interfaz de JavaScript, fabric renderer y turbo modules, que reemplaza el puente. Ahora, JSI permite la comunicación síncrona directa, desbloqueando mejoras significativas en el rendimiento. Estos cambios arquitectónicos forman la base de muchas de las técnicas que discutiremos hoy. Y aquí hay una representación visual de lo que estaba hablando sobre, el JSI, el fabric, los turbo modules, interactuando, haciendo la comunicación entre el React y el sitio nativo.

¿Por qué surgen problemas de rendimiento en las aplicaciones React Native? Básicamente, ¿por qué ocurren los cuellos de botella? Vamos a repasarlos. Una razón clave es la naturaleza de un solo hilo de JavaScript. El hilo JS maneja todo, desde la lógica de negocio hasta las actualizaciones de renderizado. Como ejemplo, si ves en la imagen, JS siendo un solo hilo, le das una tarea, espera a que se ejecute, luego se toma otra tarea, luego otra tarea. Ahora, imagina ordenar un array así. Este cálculo bloquea el hilo JS, retrasando la actualización de la interfaz de usuario y causando que las animaciones se entrecorten. ¿La solución? Delegar tal tarea fuera del hilo principal. Otros culpables incluyen el uso ineficiente de flat list, el uso excesivo del estado de las props, causando re-renderizados frecuentes y llamadas a la API que bloquean. Otro cuello de botella común es el puente de React Native, que puede verse abrumado por cargas útiles grandes. Ahora, toma este ejemplo. Enviar tal carga útil por el puente es ineficiente debido a la serialización y deserialización de JSON. Una mejor solución es reducir el tamaño de la carga útil, lo cual no parece una solución justa, o usar JSI, que permite la comunicación nativa directa, evitando por completo el puente. Esto mejora la eficiencia de la transferencia de datos y reduce la latencia.

Ahora, vamos con el monitoreo del rendimiento y veamos algunas de las herramientas de perfilado. Antes de optimizar, vamos a perfilar. Una regla de oro en la afinación del rendimiento es medir, no adivinar. Antes de sumergirse en la optimización, es crucial identificar dónde están los cuellos de botella. Adivinar a menudo puede llevar a optimizar áreas que no impactan significativamente el rendimiento. Por eso, el perfilado siempre debe ser el primer paso. Sin perfilado, podrías arriesgarte a optimizar las áreas incorrectas.

Ahora, dado que has perfilado y optimizado las áreas incorrectas, tienes los datos para corregir y asegurarte de que el problema real esté solucionado y tenga un impacto real. Y hay un flujo de trabajo que cualquiera puede seguir. Perfila tu aplicación, analiza los datos para encontrar los cuellos de botella, luego optimiza las áreas correctas y luego verifícalas nuevamente.

Ahora, React Native proporciona una variedad de herramientas de perfilado. Flipper, Chrome dev tools, React dev tools, Xcode instruments y Android profiler. Vamos a repasarlas una por una y ver cómo estas herramientas pueden asegurar y ayudarnos a abordar problemas de rendimiento.

Flipper. Esta es una plataforma todo en uno para depuración y perfilado que se puede usar para Flipper. Esta es una plataforma todo en uno para depuración y perfilado construida para React Native. Se conecta a tu aplicación, ofreciendo un conjunto de plugins adaptados para diferentes escenarios de depuración. Tenemos React Dev Tools, que te ayuda a inspeccionar componentes de React y entender el comportamiento de renderizado. El plugin de red proporciona información sobre las solicitudes y respuestas de API, permitiéndote depurar problemas de rendimiento relacionados con la red. Luego tenemos el plugin de línea de tiempo, que es particularmente útil para perfilar el rendimiento de renderizado, visualizando componentes, actualizaciones en tiempo real, y el plugin de memoria, que te ayuda a monitorear el uso de memoria, ayudando y detectando y resolviendo fugas. Así es como se ve la interfaz de Flipper, donde a la izquierda, puedes ver que React Dev Tools está abierto, el plugin del que estábamos hablando. Luego tenemos React Dev Tools. Esto es imprescindible para inspeccionar el comportamiento de los componentes de React. React Dev Tools es invaluable para identificar re-renderizados innecesarios. Ayuda a inspeccionar la jerarquía de componentes y props. También resalta los componentes que están causando los re-renderizados. Un caso de uso común será depurar los re-renderizados innecesarios.

Esta simple optimización puede mejorar significativamente el rendimiento de renderizado. Aquí está la interfaz de usuario de React Dev Tool y cómo se ve.

Luego tenemos Chrome Dev Tools. Ahora, su Flame Graph es un profiler ligero pero poderoso para JavaScript. Visualiza los tiempos de ejecución de funciones y también resalta los cuellos de botella.

Ahora, ¿cómo usarlo? Básicamente, para usarlo, debes abrir Chrome Dev Tools y ir a la pestaña de rendimiento, comenzar a grabar e interactuar con la aplicación y detener la grabación. Analiza el Flame Graph. Así es como se verá el Flame Graph, lo que te ayuda a identificar las funciones lentas o el código bloqueante. Ahora, este enfoque ayuda a identificar problemas como bucles de larga duración o llamadas a API bloqueantes.

Luego tenemos Xcode Instruments, que es una herramienta nativa proporcionada por Xcode, que te ayuda a analizar el uso de CPU, memoria y GPU para la aplicación de iOS. Es invaluable para detectar fugas de memoria y optimizar el rendimiento de renderizado. También ayuda a depurar los bloqueos y las fugas de memoria. Ahora, esta es una interfaz de usuario para los instrumentos donde puedes elegir cualquiera de las opciones proporcionadas para perfilar, como el profiler de CPU o tal vez el registro o las llamadas de red, el profiler de tiempo, o lo que sientas necesario. Y aquí está una ejecución de muestra.

Luego tenemos el Android Profiler, que proporciona una vista en tiempo real del uso de CPU, actividad de red y asignación de memoria. Puedes usar su línea de tiempo de fotogramas para identificar los problemas de renderizado, a menudo llamados Jank. Ahora, aquí hay una ejecución de muestra realizada para perfilar la memoria en la aplicación de Android.

Ahora, pasando a optimizar el rendimiento de JavaScript. El hilo de JavaScript en React Native es el cerebro de tu aplicación. Para optimizar el hilo de JavaScript, aquí hay algunas prácticas que se pueden seguir. Asegúrate de desplazar los cálculos pesados a web workers o JSI. Asegúrate de optimizar las llamadas a API agrupando las solicitudes o añadiendo el debounce donde sea aplicable. Para un rendimiento fluido, idealmente debería permanecer inactivo alrededor del 90% del tiempo para poder manejar rápidamente las actualizaciones de la interfaz de usuario y las interacciones del usuario. Porque los cálculos pesados son un infractor común. Toma este ejemplo, donde calculamos un gran conjunto de datos de manera sincrónica. Esto congela el hilo de JS. Un mejor enfoque es desplazar tales tareas usando web workers. Aquí está. Ahora, con esta configuración, los cálculos ocurren fuera del hilo principal, manteniendo la interfaz de usuario receptiva. Alternativamente, para una integración aún más estrecha, usa JSI para ejecutar funciones nativas directamente.

Al usar herramientas como Chrome DevTools o React DevTools, presta atención a las funciones de JavaScript de larga duración. El perfilado revela las áreas donde las optimizaciones como el debounce o el agrupamiento de eventos pueden hacer una diferencia tangible. El perfilado es un cambio de juego para depurar problemas de bloqueo de hilos.

Ahora, otra optimización crucial es habilitar el motor Hermes, un motor de JavaScript diseñado específicamente para React Native. Ahora, Hermes mejora el rendimiento precompilando el JavaScript en bytecode, lo que reduce drásticamente el tiempo necesario para analizar JS en tiempo de ejecución. También optimiza la recolección de basura para adaptarse mejor a los patrones de memoria de React Native. En Android, habilitar Hermes a menudo reduce los tiempos de inicio en frío en un 30% o más.

Ahora, veamos cómo podemos mejorar el rendimiento de renderizado. Al renderizar listas grandes, flatlist es un componente de referencia. Pero, un uso inadecuado puede perjudicar el rendimiento.

Aquí hay algunas de las estrategias que puedes usar para optimizar el flatlist. Primero, usa las props initial numToRender, maxToRenderPerBatch, etc. al usar el flatlist para controlar cuántas veces o cuántos elementos se renderizan inicialmente y en cada lote. Siempre memoiza el render item para evitar re-renderizados innecesarios. Aquí tienes un ejemplo práctico donde he usado las props initial numToRender y maxToRenderPerBatch para asegurarme de que solo los elementos en el viewport se rendericen, lo que reducirá drásticamente la sobrecarga de renderizado.

Luego, para interacciones fluidas, esto a menudo requiere que retrases la tarea no urgente hasta que las animaciones o gestos se completen. Para esto, React Native proporciona la API de interaction manager. Usando esto, puedes diferir la tarea no urgente hasta después de que la animación se complete. Así que, aquí tienes un ejemplo de cómo funciona. En este caso, la obtención de datos se difiere hasta que la interacción del usuario se estabiliza, asegurando una experiencia sin interrupciones. Esta técnica es especialmente útil cuando tienes tareas en segundo plano compitiendo con animaciones.

Luego, llegando a la gestión de memoria, las fugas de memoria son asesinos silenciosos del rendimiento. Ahora, estas ocurren cuando agregaste un listener en el use effect, pero no lo eliminaste, y ese listener todavía se retiene en ese use effect. O cuando recursos como temporizadores, suscripciones o listeners no se limpian después de que un componente se desmonta. Así que, como regla general, siempre limpia los efectos secundarios. Por ejemplo, este código crea una fuga de memoria, pero esta versión lo soluciona al agregar esa lógica de limpieza. Así que, siempre limpia los efectos secundarios en tu hook use effect para evitar que los componentes retengan memoria innecesariamente.

Ahora, las animaciones son críticas para ofrecer una experiencia de usuario pulida en React Native. Sin embargo, a menudo introducen cuellos de botella de rendimiento si no se implementan efectivamente. Veamos cómo lograr animaciones suaves como la seda. Ahora, cuando se trata de animaciones, un error común es depender del JSThread para ejecutarlas. Esto causa retrasos siempre que el JSThread esté ocupado. Para evitar esto, siempre usa el native driver. Esto mueve la animación al hilo nativo. Al evitar la interferencia del JSThread, aseguras animaciones más suaves incluso durante cargas pesadas. Aquí tienes un ejemplo. Al establecer el useNativeDriver como true, la animación se descarga al hilo nativo, asegurando que se ejecute suavemente independientemente de la actividad del JSThread. Ahora, perfilar con herramientas como la línea de tiempo de Flipper o Android Profiler puede revelar las animaciones entrecortadas. Estas a menudo ocurren porque las animaciones dependen del JSThread. Usar el native driver descarga esta carga de trabajo al hilo de la UI, asegurando un rendimiento suave de 60FPS incluso durante el procesamiento pesado de JS.

Luego, tenemos la precarga y el almacenamiento en caché. Ahora, precargar imágenes o animaciones asegura que estén listas cuando se necesiten. InteractionManager te permite diferir tareas de renderizado en segundo plano hasta que la UI esté inactiva. Luego, podemos usar bibliotecas como React Native FastImage para precargar las imágenes y almacenarlas en caché para su uso posterior. Luego, usando el React Native GestureHandler, esto te permite delegar el procesamiento de gestos al hilo nativo. Esto evita el retraso en los gestos, especialmente para interacciones complejas.

Luego, descargar cálculos pesados asegura que la UI permanezca fluida. Los hilos en segundo plano o los turbo modules son ideales para esto. Ahora, llegando a las conclusiones. Para cerrar, recuerda que la optimización del rendimiento es un proceso iterativo. Así que, siempre comienza perfilando tu aplicación para identificar los verdaderos cuellos de botella. Aprovecha herramientas modernas como Hermes y la nueva arquitectura de React Native para obtener ganancias significativas. Prueba continuamente tu aplicación en condiciones del mundo real para asegurar que tu optimización se mantenga.

Ahora, aquí hay algunos de los recursos que he utilizado y que me han ayudado a optimizar el rendimiento de mi aplicación. Y al final, me gustaría decir que el rendimiento no es una característica, es una expectativa del usuario. Hagamos que nuestras aplicaciones sean rápidas y agradables como el usuario lo demanda. Gracias.