Optimizando Aplicaciones React: Profundizando en el React Compiler

Hola, React Summit. Mi nombre es Victor Alencar y estoy muy, muy feliz de estar aquí hoy para poder compartir un poco sobre el compilador de React y cómo podemos usarlo para automatizar las organizaciones de rendimiento en nuestras aplicaciones de React. He preparado nuestra agenda para hoy. Vamos a hablar sobre cómo funciona React, cuáles son las opciones actuales que tenemos en este momento, cómo funciona el compilador, cuáles son las reglas y cómo deberíamos adoptarlo.

Un poco sobre mí es que soy un sub-ingeniero con más de 10 años de experiencia. En este momento, soy un ingeniero de personal en una empresa llamada Chili Piper, y estoy creando contenido para la web. Así que puedes encontrarme en todas partes, en cualquier lugar. Tiene victormalencar en la web. Así que si tienes alguna pregunta o quieres comunicarte, estaré súper, súper feliz de ayudarte también.

Así que comencemos. Si eres como yo, probablemente comenzaste a crear aplicaciones web hace mucho tiempo cuando las herramientas que teníamos eran frameworks como Angular, que era muy agradable. Fue una diferenciación muy agradable de los antiguos frameworks como jQuery, donde teníamos más estado en nuestras aplicaciones. Hubo este período de transición donde teníamos cuando la experiencia de front-end estaba obteniendo más y más lógica de negocio, lo cual personalmente me gusta mucho, pero veo muchos problemas con el enfoque actual en un momento en que sentía que estaba aprendiendo Angular, no los valores predeterminados de la web.

Y luego llegó React y nos trajo un panorama totalmente diferente donde todo estaba dentro de JavaScript, lo cual era muy agradable en ese momento y tenía mucho sentido, pero aún así, había algunas partes de este nuevo paradigma que no me convencían en absoluto. Así que al principio, teníamos clases, y era un poco complicado, un poco complicado, como puedes ver, ya sabes, para declarar una aplicación simple, tienes que pasar por todos esos estados. Y un poco verboso, un poco contraintuitivo ya que personalmente estaba más en un enfoque de estilo funcional, tener que lidiar con clases era bueno, pero no ideal. Pero luego, con el tiempo, React adoptó hooks, lo que para mí, hizo que todo encajara, tenía mucho sentido, tenemos una API más bien definida para controlar el estado, y era más explícito, era más simple de entender y crear aplicaciones.

Así que por primera vez, sentí que tenía lo necesario para crear experiencias muy asombrosas como la que te estoy mostrando. Para mí, React fue la solución que estaba buscando para crear mis aplicaciones web de una manera eficiente, de una manera fácil en la que pudiera crear declarativamente las interfaces que estaba tratando de hacer en ese momento. Pero si eres como yo, también te encuentras con este problema de que creas tu primera aplicación, estás muy emocionado, y luego vas a las herramientas de desarrollo, enciendes las actualizaciones, los resaltados, ¿y qué ves? Toda tu aplicación de React se convierte básicamente en un árbol de Navidad, donde en todas partes de tu aplicación, se está actualizando todo el tiempo con cada efecto con cada cambio.

Así que para entender por qué sucede esto, primero, necesitamos entender cómo se imaginó React al principio, y cómo llegó a ser. Básicamente, la forma en que React maneja las actualizaciones en nuestros componentes es que tenemos el componente padre, y cada vez que hay una actualización allí, haces clic en un botón, envías el formulario. Lo que sucede es que todos los hijos también reciben una actualización. Básicamente, si haces clic, digamos que envías un formulario, y tienes muchos hijos, porque los padres cambian, todos los hijos tienen que cambiar para asegurarse de que propagas el cambio a través de todas tus aplicaciones. Lo que nos hace pensar que React puede ser un poco sobrerreactivo a veces, lo cual estaba bien, pero a medida que creces tu aplicación, a medida que intentas crear cosas más complejas, definitivamente vas a ver que necesitamos más herramientas para hacer nuestras aplicaciones más rápidas y para asegurarnos de que actualizamos el estado solo cuando tenemos que hacerlo. Entonces, ¿cuáles son las opciones actuales que tenemos ahora mismo para este caso específico? Básicamente, podemos mirar nuestra aplicación aquí, donde tenemos una aplicación de comercio electrónico muy simple, y puedes ver aquí que creé este código de demostración, por cierto, solo para resaltar un caso simple donde podríamos aplicar algunas optimizaciones con las API actuales que tenemos disponibles en este momento.

Así que aquí, por ejemplo, puedes ver que cuando hago clic en Add to cart, estoy configurando mucho estado, y básicamente puedo usar aquí en esta área, use callback para memorizar el retorno de las funciones aquí. Así que podemos tener el valor de ellos básicamente guardando en caché si los ejecutamos de nuevo, podemos reutilizar esta pieza de caché si no existe. Aquí, por ejemplo, muy similar también, tenemos nuestros items y estamos haciendo cálculos con esos items. Y si el valor no cambia, podríamos reutilizar esos valores en lugar de computarlos una y otra y otra vez. Y aquí es una muy buena oportunidad para otra API de React post use memo aquí también. Si miras el markup, si el markup no cambia, no queremos tener que volver a renderizarlos. Y para no volver a renderizarlos, también podemos usar otra API de React que nos permitirá guardar este valor y omitir todo el renderizado si nada ha cambiado. Si es una función pura, ya sabes, y sabes que nada cambió, así que solo quiero usar el valor que ya he computado. Aquí puedes usar el react.memo. Así que combinando esas cosas juntas, ¿qué tenemos? Así que si miramos aquí, aplicamos la función use callback, ya sabes, para guardar el callback, para memorizar el callback aquí en esta función. Luego tenemos la memorización de los valores computados con el use memo. Y aquí en todo el componente, también lo envolvemos con el react.memo, lo que hace que todo sea rápido. Ahora logramos un mejor estado de esta aplicación donde podemos ahorrar ciclos de computadora básicamente porque estamos memorizando todos esos valores.

Pero, ya sabes, ahora hay muchas partes colgantes. Ahora tienes que prestar atención a este array de dependencias. Tienes que prestar atención a las referencias. Tienes que asegurarte de que siempre las estás actualizando si algo cambia, ¿verdad? Así que aquí en el use callback, ya sabes, tienes que preocuparte por el array de dependencias para el use memo es lo mismo y el react.memo también. Ahora hay muchas partes móviles, lo que nos hace pensar que ahora tengo que mantener este modelo mental donde tengo que rastrear todas las referencias de estado. También, las referencias de identidad. Y esto es muy fácil de romper, lo cual no es la experiencia que todos queremos, ¿verdad? Porque queremos aplicaciones rápidas, pero también queremos una gran experiencia de desarrollador que nos permita ser eficientes cuando estamos creando nuestras aplicaciones.

Y si trabajas en una base de código que es muy grande y, ya sabes, con el tiempo, esto se vuelve muy frágil. Así que imagina esto, que estás pasando muchas horas optimizando tu aplicación de React, ya sabes, colocando el use memo, use callback, solo para descubrir que, ya sabes, te falta un componente. Ahora toda tu cadena de memorización está rota. Y aún peor, algún amigo nuestro o algún colega fuera del trabajo también podría romperlo sin siquiera darse cuenta porque requiere muchas actualizaciones de contexto. Ya sabes, necesitas ser muy explícito cuando estás agregando esas funciones y las personas que trabajan en la misma base de código, necesitan saber si van a cambiar algo, que esto puede romperse. Y si también tienen que seguir actualizando las dependencias y las referencias. Así que aquí es donde entra el compilador. Así que aquí es cuando podemos aprovechar el compilador para hacer esas optimizaciones por nosotros y hacerlas automáticamente. Así que entendamos cómo funciona el compilador primero. Así que quería compilar los pasos que vamos a seguir que explican en pocas palabras dónde está el proceso de tomar tu código y crear la versión optimizada de él usando el React compiler.

Y para esto, hay un montón de pasos que podemos rastrear y ver cómo fluye la información y qué está actualizando el compilador y cómo lo hace. Así que básicamente, primero tenemos un AST, que es el árbol de sintaxis abstracta que creamos a partir de tus componentes de React. Luego construimos una representación intermedia del código. En esta parte, el compilador sabe que estamos tratando con código de React. Lo que hace a continuación, es usar todas esas instrucciones y todas esas referencias para optimizar el código que está pasando por el compilador y luego generar este código en una compilación final para que puedas usar en tu aplicación.

Aquí, por ejemplo, es cómo la estructura, básicamente la experiencia de desarrollo va. Tenemos el ESLint junto con el complemento de Babel y el núcleo de compilación trabajando juntos para crear el entorno que nos permite pasar por todos esos pasos. Y me encantaría ir paso a paso y explicar todo lo que hace el compilador de una manera muy profunda y más presentada. Pero como está ahora, hay 44 pasos de optimización, así que no tenemos tiempo para eso, desafortunadamente. Pero repasaré las partes más importantes para que tengas esa idea.

Así que el primer paso es la exploración del AST. Básicamente, lo que hace es que el complemento de Babel toma tu código y lo coloca en un AST. Así que nos da más información sobre dónde comienza tu línea y dónde comienza una llamada a función. Así que es una forma de decirle al compilador cómo se ve el programa como un gran objeto, para que pueda rastrear las referencias y pueda expresar el código de una manera que un compilador pueda ir línea por línea y crear instrucciones. La segunda parte es la parte más importante aquí, que es la reducción. Cuando tomamos más instrucciones y tratamos de reducirlas y construir el código de representación intermedia. Así que básicamente lo que hace el compilador es convertir el AST en esta representación intermedia de alto nivel que cada bloque consistirá en una instrucción que podemos seguir paso a paso y entender cómo está funcionando nuestra aplicación de React.

Aquí, por ejemplo, esto está tomando el AST y ahora convirtiéndolo en esta representación intermedia. Así que sabemos aquí toda la asignación de las variables, cómo fluye la información para nuestra aplicación y, más importante, un poco más sobre cómo cada instrucción paso a paso se conecta con la siguiente. Así que podemos ver aquí, por ejemplo, que ahora podemos identificar cuándo se asigna una variable global, cuándo estamos llamando a una función, cuándo estamos desestructurando valores y cosas así. Para entender mejor cada instrucción a un nivel más bajo, cómo conectarlas y cómo también optimizar. Que es el siguiente paso, tomando toda esta información, canalizándola a través de todas las transformaciones para que podamos mejorar nuestro código. Así que aquí hacemos muchos pasos en este espacio.

Por ejemplo, tenemos la eliminación de código muerto. Tenemos la propagación de constantes y sabemos aquí qué tipo de operaciones están ocurriendo para que podamos optimizar mejor este código para cada posible camino que el usuario pueda tomar al interactuar con nuestra aplicación. Por ejemplo, aquí sabemos si la variable está mutando o si deberíamos almacenar una variable. Sabemos con certeza si deberíamos congelar el valor o no. Y esto es muy importante porque con cada paso el compilador está tratando de ser más preciso en cómo optimizar tu aplicación. Así que aquí sabemos con certeza cómo todas las instrucciones se conectan en un flujo de datos. Así que sé con certeza y cada permutación de los caminos que el flujo de datos puede tomar en la aplicación qué tipo de optimización se debe aplicar.

Por último, pero no menos importante, es generar el código. Así que el último paso aquí vas a ver básicamente lo que el compilador te da al final es el código completamente optimizado. Y aquí hay una versión de nuestra aplicación original cómo debería verse después de pasar por el compilador. Aquí puedes ver la función inicial. Sabes que tenemos el mismo botón de añadir al carrito y tenemos la misma función con la misma salida JSX. Y en el siguiente paso lado a lado puedes ver todas las optimizaciones que se aplicaron a nuestro caso específico. Así que si miramos aquí puedes ver muchas variables con nombres extraños. También puedes ver que ahora estamos iniciando el React memocache sentinel, por ejemplo. Y hay diferentes colores. Así que este código es un poco difícil de leer. Así que lo que hice ahora es que separé cada tipo de transformación que hicimos para que puedas ver y entender mejor qué tipos de optimizaciones estamos realizando. Así que aquí, en primer lugar, tomamos los valores estáticos. Básicamente, el compilador memoriza el estado inicial y evita recrear el array en cada renderizado, por ejemplo. Así que una vez que tenemos nuestro valor, verifica en la caché si el valor está presente y si está presente, devuelve este valor. Evitando todos los cálculos y evitando recrear esos arrays vacíos, por ejemplo, en cada renderizado. A continuación, hacemos lo mismo para las funciones. Así que aquí prevenimos recrear como rerenderizar componentes secundarios innecesarios cuando estamos propagando nuestros props.

Así que aquí es lo mismo. Estamos tratando de ver si hay un valor en la caché. Si hay un valor en la caché lo devolvemos y si no está en la caché entonces lo creamos. Y básicamente lo mismo para la salida JSX. Podemos ver que si nuestra UI no ha cambiado en absoluto, si estamos pasando los mismos props de la misma manera con los mismos valores, también utilizamos esto en la caché y devolvemos desde la caché si ya hay una entrada. Si la entrada se actualiza en la siguiente ejecución, también guardamos esto en la caché y ahora devolvemos la nueva entrada si está presente en la caché.

En resumen, ahora sabemos que podemos hacer esas optimizaciones básicamente tomando todo lo que antes escribíamos a mano. Sabes, como reemplazar el use memo, use.memo, el react.memo y un user callback todos juntos. Ahora el compilador es lo suficientemente inteligente como para identificar en nuestros componentes dónde debería colocar esas técnicas de memorización y aplicarlas por nosotros. Así que el resultado es que básicamente puedes comenzar a eliminar lentamente esas piezas de código y verificar si el compilador creará esas optimizaciones por ti.

No solo eso, el compilador es lo suficientemente inteligente como para identificar también diferentes tipos de optimizaciones que no tenemos la capacidad de hacer ahora mismo o que solo podemos hacer a mano. Por ejemplo, aquí está tomando una de las variables que creé identificada como una variable estática que no cambia en absoluto y en la función code gen. Poniendo esto como un valor de cadena ya dentro de mi UI. Así que aquí, por ejemplo, podrías ver que tengo una variable llamada name. Tengo una variable llamada last name que es una variable que a propósito hice con datos ahora para mutar todo el tiempo y puedes ver lo que hizo el React compiler e identificar la pieza que no cambia en.

Todo dentro de cualquier renderizado añadiendo como una cadena y añadiendo está disponible una variable donde cambia en las nuevas versiones del compilador. Se volvió aún más inteligente porque ahora te dice que esto es una duda en función pura, como si probablemente fuera un efecto secundario, es algo que no quieres en absoluto. Así que ahora es capaz de decirte en el paso de compilación, ahora es mucho más fácil para nosotros identificar esos pequeños errores y prevenir que ocurran por completo.

Así que aquí, si te detienes a pensar, hemos logrado algo más allá de la paridad de características, mejoramos la memorización y mejoramos el rendimiento mientras mantenemos la experiencia de desarrollo, lo cual es muy importante para nosotros. Entonces, ¿qué sigue para nosotros? Lo siguiente que necesitamos saber es cómo adoptar el compilador para que podamos usarlos en nuestras aplicaciones y la recomendación de React es que hagas una adopción gradual.

Así que no lo detengas, haz que funcione, haz que esté bien y luego hazlo mejor. El primer paso que puedes comenzar ahora mismo es que la dependencia del compilador es este plugin de babel que creará el ST para nosotros. Luego puedes editar tu archivo de configuración o en tu configuración de babel, ya sabes, para agregar el plugin del compilador de React. Necesita ser el primero para que sepas que cambió todas las transformaciones para ti.

Entonces. Si me preguntas, eso es también otra cosa de la que tenemos que hablar, básicamente el compilador está haciendo mucho trabajo pesado por nosotros. Pero no es magia. ¿Verdad? Siempre hay un truco.

Siempre hay cosas importantes que tenemos que hacer para que funcione. Así que aquí lo que el compilador está asumiendo es que estás siguiendo las reglas de React. Esto es muy importante. ¿Verdad?

Porque las reglas de React han existido durante mucho tiempo. Ahora todos sabemos que nuestros componentes deben ser puros, que no debemos llamar a hooks condicionalmente, por ejemplo, y que tenemos que seguir las reglas de hooks.