React Compiler - La Pieza que Falta para Optimizar Aplicaciones React

Hola a todos. Hoy, voy a hablar sobre el compilador de React. Y antes que nada, muchas gracias por invitarme a hablar en este evento, el React Debugging, y estoy muy emocionado de compartir mi conocimiento sobre el compilador de React con ustedes.

Antes de comenzar, una pequeña introducción sobre mí. He estado trabajando con código durante casi 20 años. He abarcado múltiples tecnologías y stack. Soy un YouTuber enseñando, ya saben, como educador personal en mi canal de YouTube llamado TypeScript y un blogger de tecnología. Tengo mi propia startup que recientemente llamé Creowaste y también estoy dirigiendo una comunidad de código abierto llamada React Live para desarrolladores de React.

Ahora, para comenzar con la discusión y la charla de hoy, esto es lo que planeo cubrir. Entonces, el compilador de React se trata de optimizaciones. A medida que hablamos de optimizaciones, entendamos qué tipo de optimizaciones están en marcha hoy con React y el compilador de React se introdujo junto con React 19. Así que también conoceremos un poco sobre React 19 y luego profundizaremos en la comprensión del compilador en general, luego la arquitectura del compilador de React, luego veremos un poco de proyectos de código como el compilador de React en acción. Obtendremos una comprensión profunda de lo que exactamente está haciendo el compilador en el fondo, y terminaremos con algunos consejos y trucos para ustedes. Muy bien.

Entonces, comencemos con las optimizaciones. Antes de que siquiera pensemos en el compilador, estoy seguro de que si eres un desarrollador de React, conoces algunas de estas optimizaciones en su lugar. Entonces, sabes que hay algo llamado keys, ¿verdad? Entonces, cuando estás iterando a través de la lista de elementos en React, hay algo llamado key para que tu DOM virtual pueda hacer un juicio eficiente de qué actualizar cuando un elemento de la lista se actualiza. Puedes cargar tus imágenes de manera diferida. Puedes cargar tus componentes de manera diferida. Puedes hacer muchas optimizaciones de rendimiento usando la técnica de memoización, ya sea hooks como useMemo o useCallback para que tus componentes no se vuelvan a renderizar a menos que haya una dependencia que cambie. Así que, todos estos tipos de optimizaciones ya están en su lugar en React, y están ahí desde el principio hasta 18.x.

Ahora, con React 19, hay un compilador de React que también entra en escena, y eso va a hacer aún más optimizaciones, pero ¿por qué? Ya tenemos este tipo de optimizaciones. ¿Qué crees? Sabes, el tío de Spider-Man, el Tío Ben, una vez dijo que con gran poder viene una gran responsabilidad. Y nosotros, los desarrolladores, cuando obtenemos este poder, obtenemos todas estas herramientas que React ya nos dio tenemos que ser un poco más responsables, ¿no es así? Así que, en los últimos años, si miras el código, especialmente yo miro mucho código en los proyectos de código abierto, hay un gran, gran número de useMemo, useCallback, ya sabes, ese tipo de código ha surgido. ¿Está ese código escrito teniendo en cuenta todos los efectos secundarios de optimización? Puede que no todos. Es porque los desarrolladores somos un poco ambiciosos, y nos gusta escribir código donde sentimos que las cosas van a funcionar. Pero también necesitamos tomar una decisión, como si hay algún tipo de efecto secundario o efecto negativo, porque estamos usando esas herramientas que se nos dan. Ahí es donde, en lugar de dar este poder al desarrollador, ¿qué tal si mantenemos el poder con la propia biblioteca? Creo que ahí es donde React jugó muy inteligentemente al introducir el compilador de React. Vamos a ver cómo el compilador de React va a eliminar todas estas técnicas de memoización que se dan a React, y luego hacer las cosas por sí mismo. ¿Significa eso que no usaremos, ya sabes, React Memo, useMemo, useCallback, esas técnicas en absoluto cuando el compilador entre en escena? Principalmente no tenemos que hacerlo, pero si tu código existente ya tiene esas optimizaciones de rendimiento y además de eso vas a usar el compilador de React, aún puedes usarlo. El compilador simplemente los ignorará.

¿De acuerdo? Entonces, antes de hablar más en profundidad sobre el React Compiler, creo que necesitamos hablar un poco sobre React 19, porque React 19, React Compiler está llegando a todos los desarrolladores. Así que con React 19, se están introduciendo un montón de características. Una es los componentes de servidor, el componente que puede ejecutarse en el servidor. Cuando tienes las acciones del servidor, hay muchas cosas con los web components ahora mismo. Hacer que los web components funcionen con React en sí es un poco tedioso, pero hay una promesa de que los web components funcionarán de manera muy fluida con React. Los metadatos del documento para el propósito de SEO, hay hooks mejorados, especialmente para el manejo de formularios. Hay muchos. El manejo de referencias va a mejorar, y un nivel de optimización para la carga de activos ya está llegando en React 19. Pero junto con todo esto, hay una introducción del React Compiler, y de eso es de lo que vamos a hablar hoy. En caso de que estés interesado en conocer más en profundidad las características de React 19, puedes revisar este código QR, y te llevará a un enlace donde puedes aprender más sobre React 19 y todas las características que básicamente necesitas.

Ahora para continuar, como estamos hablando sobre React Compiler, creo que tiene sentido entender qué hace exactamente un compilador. Entonces, en ingeniería informática, cuando hablas de compilador, significa que toma un código fuente como entrada, y luego realiza una variedad de pasos, una variedad de cosas sobre él. Y al final, genera algo como un código máquina que tu máquina o la computadora entiende. Nuestra computadora no entiende const count equals to zero directamente. Tiene que ser compilado, y debe generarse un código máquina, que nuestra computadora finalmente entenderá.

Así que si repaso estos pasos a un nivel muy alto nuevamente, en la ciencia de la computación de la ingeniería, cómo funciona el compilador, toma tu lenguaje de programación de alto nivel como entrada, y luego pasa a algo llamado analizador léxico. Lo que hace básicamente es tokenizar tu código fuente. Así que si tienes const count equals to 10, va a crear tokens como const count signo igual y el valor 10. Luego lo pasa al analizador sintáctico, que va a crear algo llamado árbol de sintaxis abstracta o AST. Habríamos oído hablar de este término si vienes de un fondo de ciencia de la computación e ingeniería. Ahora este AST nos ayuda a estar con la estructura o la gramática del lenguaje de programación. Ahí es donde el analizador semántico, el siguiente paso, hace la validación de que mi AST está en el formato correcto, para que pueda decir que esta línea de código escrita por el desarrollador va a ser compilada. Si no, el compilador va a lanzar un error. Ahí es cuando obtienes un error de compilación. Eso sucede en el paso del analizador semántico.

Después de eso, genera un código intermedio, que se llama código IR en la etapa del generador de código intermedio. Y finalmente, se le dará a algo llamado optimizador de código, donde se realizarán más optimizaciones. El código muerto será eliminado y todos estos casos. Y finalmente, finalmente, se generará el código máquina. Y eso es lo que tu máquina será capaz de ejecutar. Así es como funciona el compilador a un alto nivel. Ahora, cuando se trata de React Compiler, un tipo similar de paradigma está en su lugar. Así que déjame mostrarte eso también. Este diagrama particular que estás viendo en la pantalla está tratando de demostrar qué hay dentro de React Compiler. En el lado izquierdo estás viendo el proyecto React 19. Es porque se recomienda usar React Compiler con React 19. También veremos cómo podemos hacerlo funcionar con la versión anterior de React hacia el final. Pero consideremos que tienes un proyecto React 19, y ahora tienes que hacer que React Compiler funcione con él. Entonces, ¿qué hay dentro de React Compiler? Hay tres piezas que entran en juego. Una es el Babel plugin.

Ahora, si estás en el desarrollo web, estoy seguro de que conoces muy bien Babel, el transpiler. Luego hay algo llamado ESLint. También conoces ESLint porque es lo que usamos para la validación de nuestro código, el analizador de código estático, análisis. Y luego, cuando escribes el código, puede decir OK, estamos rompiendo esta regla en particular, y reporta el error. Podemos encargarnos de esos errores, etcétera. Y luego está la lógica escrita por el equipo del compilador, el equipo central del compilador, que se llama lógica central del compilador.

Entonces, ¿cuál es el uso de cada uno de estos? El plugin de Babel puede identificar qué parte de tu proyecto React 19 debe ser optimizada, qué parte no debe ser optimizada. Así que significa que puede haber algunas configuraciones que tú como desarrollador puedes hacer para tu proyecto donde puedes decir, ya sea tomar todo mi proyecto, considerar todo mi proyecto para la optimización o considerar solo una parte de él para la optimización. Una vez que el plugin de Babel se entera de esto, entonces lo que hace es crear ese árbol de sintaxis abstracta, el AST del que hablamos. Pero en este caso, el nodo de cada uno de estos, en este caso, el nodo del AST va a ser componentes de los hooks, porque eso es lo que vamos a optimizar.

Ahora, una vez que el AST está en su lugar, lo que también estará allí es el plugin de ESLint estará allí para verificar que todas las reglas de React estén en su lugar o no. Si eres del entorno de React, sabes que hay ciertas reglas que seguimos. Por ejemplo, si estás usando un hook, sabes dónde y cómo usar el hook. No puedes usar el hook en una declaración condicional. No puedes usar el hook dentro del bucle for. Así que si esas cosas se presentan, entonces el compilador de React va a lanzar el error directamente diciendo que esto no es compatible para que yo optimice más. Y tanto este plugin de Babel como el plugin de ESLint usarán el código del compilador, ese particular código para optimizar las cosas. Una vez que se crea el AST, se aplicarán las optimizaciones y los pasos, la eliminación de código muerto, todas estas cosas. Tal como hemos visto con otro proceso de compilación, el proceso de compilación genérico hace un tiempo. Y al final, lo que se generará a partir de este AST es el viejo y simple código JavaScript. En última instancia, en tu navegador, ¿qué se ejecuta? JavaScript, HTML, CSS. Así que una vez que escribes un componente de React, tu navegador realmente no ejecuta el componente de React directamente, ¿verdad? Tiene que ser transpilado a código JavaScript. Eso es lo que entiende tu navegador. Así que en este caso también, después de toda la técnica de optimización, lo último que obtendremos es el viejo y simple JavaScript. También te voy a mostrar eso, cómo el compilador de React va a impactar en un componente particular para crear un código JavaScript. Así es como están sucediendo las cosas. Así es como funciona el compilador de React a un alto nivel. Ahora queremos ver un proyecto donde voy a mostrar sin el compilador de React, cómo ese proyecto se comporta y con el compilador de React en escena, qué tipo de cambios podemos ver. Así que déjame explicar de qué se trata este proyecto y cuál es la estructura a un nivel muy alto. Proyecto muy simple.

Supongamos que tenemos una página de producto. Voy a mostrar esa página en un momento. Y esa página de producto tiene un encabezado y la lista de productos que muestra. Así que tengo este componente de página de producto que puedes ver aquí. Toma dos props. Uno es como encabezado y el segundo prop es la lista de productos, que es un array.

Después de eso, para componer la UI, utiliza tres componentes más. Uno es el propio encabezado, donde simplemente pasa el encabezado y de los productos calcula el número total de productos y pasa estas dos cosas como props a este encabezado. Luego, la página de producto pasa el array de productos a otro componente llamado lista de productos, que simplemente itera y renderiza la lista de productos. Y hay otro componente llamado productos destacados donde podemos calcular los productos destacados de estos productos y pasarlo para renderizar solo los productos destacados. Estamos hablando de una jerarquía muy simple.

Así que mientras hablamos de esto, déjame abrir el navegador aquí. Así que esta es la app de la que estaba hablando. Este es el encabezado y luego este es el componente de lista de productos y este es el componente de lista destacados. Muy bien. Ahora, si miro el código, voy a abrir mi VSCode aquí. La jerarquía que ya he explicado. Este es el nivel superior app.js dentro de eso esta es una página de producto y la página de producto básicamente tiene encabezados, lista de productos y los productos destacados y esos props los paso adecuadamente. Ahora lo que voy a hacer, voy a poner esto justo al lado de mi VSCode para que puedas ver algunas de estas cosas en efecto a medida que hago cosas.

OK, así que echa un vistazo. Solo reduciendo esto un poco. Sí. Así que si voy al archivo app.js ahora, esta página de producto aquí, obtiene este props llamado encabezado, que es como estos productos alimenticios. Y junto con eso, también toma productos, ¿verdad? Eso es lo que realmente está renderizando esta página de producto. Ahora, si voy a cada uno de estos componentes dentro, ya sea producto, ya sea encabezado o ya sea lista de productos o los productos destacados, notarás que estoy renderizando algo llamado dead dot now, lo que significa que es una marca de tiempo actual. OK, así que significa que esta página no solo muestra la lista de productos, sino que junto con eso, está mostrando la marca de tiempo actual. OK, ¿por qué estoy mostrando esto? Porque una vez que esta página se renderiza, esta marca de tiempo también se renderiza y veremos el cambio en el tiempo inmediatamente. Así que ahora déjame hacer el cambio. Lo que voy a hacer aquí. La primera cosa es como este encabezado particular, los productos alimenticios.

El producto está en plural productos. Voy a cambiar eliminando esta S de aquí. Solo nota este número. Esto es 12 12 12. OK. ¿Ves eso? Todo cambió a 76 76 76. La marca de tiempo cambió. Pero, ¿notaste que este heading props solo se está usando dentro de este componente heading? No se está usando ni en la lista de productos ni en el producto destacado. Pero entonces, ¿por qué innecesariamente volví a renderizar este componente y este componente? Hoy, solo hay tres o cuatro elementos que estamos mostrando. Pero si es una lista enorme, si es algo que toma tiempo volver a renderizar, tendrás el retraso de rendimiento, ¿no es así?

Así que este es un problema típico porque en React, si el padre se vuelve a renderizar, va a volver a renderizar todos sus componentes hijos también. De manera similar, si estoy cambiando tal vez este taco de aquí, este taco a 234 aquí, verás el cambio de nuevo. Todo ha cambiado. Correcto. El taco a 234 ha cambiado y todo se ha cambiado. Así que esto realmente podría crear un problema. Sabes, con react memo y todas estas cosas en la imagen, aún puedes resolver el problema de una manera que este componente de lista de productos en particular puedes memoizar con react.memo, tal vez la lista destacada, la creación de la lista destacada en un a puedes usar used memo o use callback para asegurarte de que hasta que los props de ese componente en particular no se cambien, no volverás a renderizar ese componente. Pero el caso clásico de cambiar este heading desde arriba, cambiar todo este volver a renderizar todo este componente descendente realmente está creando un problema. Creo que aquí es donde entra en juego el compilador de React y va a ayudar mucho.

Correcto. Así que esto es lo que vamos a hacer ahora. Vamos a traer el compilador de React a esta aplicación en particular y te vamos a mostrar cómo nos va a ayudar. Muy bien. Así que para eso, voy a eliminar esto y voy a abrir la terminal para que pueda mostrarte algunas cosas. Voy a ir a mis documentaciones para que pueda copiar algunos comandos muy fácilmente. Así que para usar React 19, para usar el compilador de React en tu proyecto de React 19 o cualquier otro proyecto, lo primero que puedes hacer es como hacer un chequeo rápido de salud, como si tu proyecto está en un estado donde puedes usar el compilador de React o no. Ahora, para hacer ese chequeo de salud, hay un comando que podemos usar. El comando dice npx react-compiler health check at experimental. Una vez que ejecutes este comando, te va a decir como todos los componentes que tienes en tu aplicación están todos optimizados o pre-optimizados para ejecutar este compilador de React en él o si hay algún componente que está rompiendo las reglas de React para que no puedas ejecutarlo. Como estás diciendo eso, tengo cinco componentes y exitosamente cinco de cinco están diciendo que están listos para funcionar.

Ahora, lo siguiente que voy a hacer es configurar esos plugins de Babel y el ESLint. Muy bien, así que hagamos primero el ESLint. Para eso, haré yarn add y esto va a instalar esto. Solo tomará probablemente un segundo. Eso es todo. Está hecho. Ahora, después de esto, voy a abrir un archivo llamado .eslint.cgs y una configuración muy minimalista que tengo que hacer. Como he instalado este ESLint experimental para el compilador de React, esta biblioteca en particular, solo tengo que incluir algunas cosas. Por ejemplo, si voy a la sección de plugins de él, voy a incorporar este plugin en particular ESLint React compiler, el que acabo de instalar. Y junto con eso, voy a establecer unas reglas. Hay un montón de reglas. Voy a establecer una nueva regla para este compilador de React en particular. Eso es todo. Esto es todo para el ESLint.

Ahora, lo último que queda pendiente es instalar Babel y de manera similar porque Babel es otra parte. Eso es lo que aprendimos. Así que haremos yarn add y luego voy a instalar Babel. Esto también se va a instalar bastante pronto y después de que esté instalado, tengo que hacer una configuración muy minimalista. Para eso, voy a ir a Control-P, y.config.js. Ahora aquí una cosa que decir es que mi aplicación de React usa React 19 en Bit. Si estás usando Next.js, habrá una configuración específica de Next.js para este paso que podemos obtener de la documentación del sitio web react.dev. Pero como estoy usando Bit, puedo hacer la configuración bastante bien. Así que usando la documentación de Bit. Así que para eso, los pasos son bastante simples. Tengo que crear una configuración de compilador. Por ahora, la configuración del compilador estará vacía. No va a tener nada, pero vamos a agregar algunas cosas más tarde cuando hablemos sobre los consejos y trucos. Y luego finalmente, este React en particular tendrá algunas configuraciones. Eso es lo que voy a copiar directamente de la documentación y luego voy a explicar a ti. Así que revisa lo que tiene.

El plugin de Babel que acabo de instalar. Estoy definiendo ese plugin junto con esta configuración del compilador de React. Eso es todo. No hay otra configuración. Esa es la única configuración del plugin de Babel que tengo.

Y esto es todo. No vamos a hacer más configuraciones ni más cosas, ¿verdad? Así que volvamos a nuestra pantalla. Volvamos y actualicemos esto por última vez. Así que vamos al archivo app.js. Déjame reducir esto de nuevo para que pueda ver esto. Y ahora este es producto, ¿verdad? Y voy a cambiar a productos. Y de nuevo, mira todo este timestamp y veamos si este timestamp cambia ahora o no, si la re-renderización de todo el componente está sucediendo o no. ¿Lo viste? Era 31, 31. Lo quitaré de nuevo. Sigue siendo 31. No está cambiando. Eso significa que está haciendo una actualización in-place de la parte que estamos actualizando dentro del componente. Los componentes hijos no se están re-renderizando y toda la re-renderización, la re-renderización innecesaria que estaba sucediendo como antes realmente no está ahí. Así que es algo genial y esto es lo que el compilador de React está prometiendo y para llegar a con.

No estás usando ningún tipo de memorizaciones por ti mismo, sino que lo estás entregando a algunas configuraciones que React promete cuidar y el compilador de React está cuidando de todas estas configuraciones por ti. Aquí hay una cosa que mencionar, como lo has visto, creo que este es el momento adecuado para mencionar que tuve que instalar y configurar todo sobre el compilador de React por separado de mi proyecto de React 19. Así que aunque los anuncios del compilador de React y todas estas cosas vienen junto con React 19 y se recomienda usar con un proyecto de React 19, pero no está incluido dentro de React. Es una herramienta incorporada que necesitas configurar, necesitas optar si estás buscando usar React 19 y el compilador de React juntos. Así que una cosa más que quiero mostrarte rápidamente es si voy a las herramientas de desarrollo, solo lo haré un poco más grande para ti y luego tengo las herramientas de desarrollo de React por aquí en algún lugar. Así que una vez que el componente es optimizado por el compilador de React, también puedes ver qué componente ha sido optimizado por el compilador de React usando estas cosas. Esto se ha añadido con la versión 5 de las herramientas de desarrollo de React, supongo, que tendrás esta insignia llamada memo. Eso significa que este componente en particular está optimizado por el compilador de React. En mi caso, lo he hecho a nivel de configuración de proyecto, así que todos los componentes fueron optimizados. Pero puedes tomar una decisión, sabes, qué componente en particular quieres optimizar versus qué componente en particular puedes dejar fuera.

Vamos a ver eso en un momento.

Así que volveré a mi presentación.

Así que ahora, en los próximos minutos, quiero llevarte a un análisis profundo de lo que exactamente el compilador de React está haciendo con el código. Y para entender eso, tenemos algo llamado playground del compilador de React, que es una cosa bastante eficiente que puedes usar para entender qué está pasando exactamente debajo.

Así que vamos al playground del compilador. Este es el playground del compilador de React. Aquí, el lado izquierdo es un componente de React. Y aquí he tomado el componente heading, por ejemplo, el componente heading, que muestra el encabezado más el número total de productos al lado. Y el lado derecho es el código generado, el código optimizado que el compilador de React genera para este componente de React en particular.

Si miras un poco más profundo en este código, es un JavaScript simple. Y déjame llevarte rápidamente a través de lo que exactamente está haciendo. Así que aquí, el t0 no es más que los props que estás pasando a este componente, que es como heading y el total de productos. Así que el t0, lo desestructuramos y obtenemos heading y el total de productos. Muy simple. La simple desestructuración de objetos.

Luego ha creado algo llamado guion bajo C3. ¿Qué es? El guion bajo C3 es un hook interno de React, que nos ayuda a crear un array memorizado. Eso significa que creará un array y el array tendrá tres elementos aquí. Por eso estamos pasando tres. Y cada elemento de ese array particular tendrá elementos cacheables, algo que puedes cachear. OK, así es como obtienes la mejora de rendimiento. Ahora, ¿por qué este tres? La pregunta podría surgir. Así que significa que estamos tratando de optimizar tres cosas, o probablemente estamos tratando de cachear tres cosas. Por eso es tres. Pero, ¿por qué tres? Es porque tenemos dos props, ¿no es así? Uno es heading. Otro es total de productos. Y luego, basado en heading o total de productos, ¿qué cambiará? Cambiará lo que exactamente este componente particular produce, que es el JSX. Si el heading cambia, este JSX cambia. Si el total de productos cambia, este JSX cambia. Pero si tanto heading como total de productos no cambian, entonces este JSX nunca cambia.

Así que hay una oportunidad de cachear este JSX también. Así que hay tres cosas para cachear. Por eso es tres. Ahora este dólar tendrá tres elementos, dólar de 0, 1, 2. En todos estos elementos podemos mantener las entradas cacheables.

Ahora aquí está verificando si heading o total products, cualquiera de estas cosas está cambiando o no. En caso de que haya un cambio, aquí tienes que ver, en caso de que haya un cambio, entonces ¿qué estamos haciendo? Estamos calculando la parte fresca de JSX con el heading y el total products. Y luego estamos haciendo dólar cero igual a heading este array particular, dólar uno igual a total products. Básicamente lo estamos cacheando, manteniéndolo. Dólar dos es este JSX calculado. Si no está cambiando, entonces solo devuelve dólar dos, que no es más que el JSX calculado. Así que significa que si tu heading y total products no están cambiando, siempre estás devolviendo lo que se calculó previamente. Eso es todo lo que está haciendo. Bloque muy simple, memorizado, ese bloque para calcular algo basado en las dependencias que le estás pasando. ¿No es así?

Así que eso es genial. Ahora, las últimas cosas que quiero mencionar nuevamente sobre este es un poco, algunos consejos y trucos que debes saber. Por ejemplo, en el código, te he mostrado que puedo configurar este compilador de React para todo el proyecto, ¿verdad? Como estoy haciendo en el archivo vid.config.js. Pero siempre tienes la oportunidad de no hacer esto para todo el proyecto. Puedes omitirlo, ¿sabes? Así que para eso, no hagas esto, ¿sabes? y luego estamos haciendo esto, tienes que pasar algunas configuraciones más.

Aquí es donde esta configuración del compilador de React entrará en juego. Lo que puedes hacer en lugar de dejarlo vacío, ahora puedes establecer un modo de compilación, algo como esto. Puedes decir que el modo de compilación es annotation. Y después de eso, el componente que te interesa optimizar, por ejemplo, este heading.jsx, aquí en la parte superior de tu componente donde comienza el componente, puedes hacer algo como useMemo. Así que significa que tu compilador ahora identificará cuáles son esos componentes que tienen esta directiva useMemo, y optimizará solo esos componentes porque he seleccionado para el modo de anotación. En este caso, solo el componente heading será optimizado. La mayoría de los componentes, lista de productos, ya sabes, producto destacado no serán optimizados. También hay otra directiva llamada useNomemo. La escribes así.

Aunque he anotado, pero no optimices. Usarás esto principalmente cuando encuentres algún tipo de problema con este componente, tal vez rompiendo las reglas de React por el momento. Por el momento, usas useNomemo, y luego puedes volver a useMemo cuando realmente esté funcionando y optimizando este. Así que para quien busque optimizaciones graduales, creo que para ellos, el modo de anotación funciona muy bien. Y puedes optimizar componente por componente. Espero que eso tenga sentido para ti.

Ahora nuevamente, volveré a mi presentación. Ahora surge la pregunta de que el compilador de React funciona bien con React 19. Por supuesto, también hemos visto la demostración. Y se recomienda. Pero, ¿puedo usarlo con React 18? Porque React 19 todavía está en RC al dar esta charla. Y hay proyectos que se ejecutan en React 17, React 18. ¿Puedes usar el compilador de React? La respuesta es sí. Cuando comencé a investigar el compilador de React, sabes, al principio, el soporte no era muy directo. Pero ahora el soporte es bastante directo. Así que si tienes un proyecto en React 17 o React 18, solo tienes que instalar esta dependencia llamada React compiler runtime en beta, ya sea con npm o yarn o pnpm, lo que prefieras. Y luego la configuración de Babel, lo que acabamos de ver, te he mostrado la configuración del compilador de React, donde estaba usando las anotaciones y todas las configuraciones, o lo estaba dejando en blanco. Puedes usar tu objetivo de React. Puedes usarlo como 18, o para 17 o 18, sabes, esta versión que puedes dar. El resto permanece exactamente igual. Así que si haces esto, entonces va a funcionar con tu base de código de React 18 y React 17 también. Pero siempre se recomienda que lo uses con React 19. Así que con eso, creo que he terminado con lo que quería transmitir sobre el compilador de React. Es algo muy, muy emocionante que está llegando. Y deberías estar experimentando, especialmente algunas cosas como el playground del compilador de React Toma cualquier componente de tu elección, colócalo allí y ve cómo el compilador de React está compilando y creando ese JavaScript de salida. Te sorprenderá ver cómo exactamente está funcionando.

Si te gustaría conectarte conmigo, este es el código QR que puedes escanear y puedes conectarte conmigo. También puedes visitar mi canal de YouTube y si te gusta, puedes suscribirte a eso. Me gustaría agradecer a todos por ver esto, especialmente a React Berlin, el comité organizador y a todos por invitarme a esta charla. Muchas gracias.