React Compiler Internals

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

React Compiler fue introducido en 2024 como una forma de manejar automáticamente las optimizaciones de rendimiento en tus aplicaciones—pero, ¿cómo funciona? 

En esta charla, te guiaré a través de algunos de los aspectos internos de React Compiler. Exploraremos su proceso completo, desde el análisis hasta la transformación del Abstract Syntax Tree (AST), junto con sus tecnologías clave, beneficios, compensaciones y un ejemplo práctico de cómo transforma tu código para prevenir re-renderizados innecesarios.

La buena noticia: (afortunadamente) no necesitas dominar sus aspectos internos para integrarlo en tu base de código. Dicho esto, un sólido entendimiento de sus aspectos internos mejorará significativamente tu capacidad para aplicar las técnicas de optimización que desbloquea.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

Lydia Hallie
Lydia Hallie
23 min
13 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Introducción al React Compiler, sus beneficios y el problema de la memoización en React. Problemas de rendimiento debido a componentes con estado en React, solución con React.memo y use memo, y los beneficios del React Compiler en la automatización de la memoización. La transformación del compilador en una representación intermedia de alto nivel proporciona una comprensión más clara de las operaciones del código y el flujo de datos, abordando los problemas con identificadores únicos para variables en escenarios complejos. El compilador asegura que cada variable se asigne exactamente una vez a través de la asignación estática única, resolviendo problemas con los valores de las variables basados en rutas de código e introduciendo nombres únicos para las asignaciones. Los efectos describen cómo las operaciones interactúan con los datos, asegurando un almacenamiento en caché seguro con tipos como efectos de lectura, almacenamiento, captura, mutación y congelación. El compilador entiende las operaciones pero necesita identificar los valores que cambian entre renderizados para React, llevando a la fase de análisis reactivo para determinar los valores reactivos en el componente. Las variables marcadas como reactivas para cambios potenciales entre renderizados se optimizan para el almacenamiento en caché. El compilador identifica dependencias para agrupar operaciones para un almacenamiento en caché eficiente. Se establecen ámbitos para almacenar en caché variables relacionadas juntas y asegurar una renderización eficiente y mejora del rendimiento en el código JavaScript final. El compilador configura espacios de caché para dependencias y salidas para optimizar el rendimiento. Los ámbitos funcionan independientemente para recalcularse en base a cambios, asegurando una memoización eficiente. React Compiler simplifica la memoización, proporcionando optimizaciones automáticas correctas sin carga manual, allanando el camino para un código enfocado en el rendimiento.
Available in English: React Compiler Internals

1. React Compiler and Memoization

Short description:

Introducción al React Compiler, sus beneficios y el problema de la memoización en React.

Oh, buenos días a todos. Espero que hayan tomado un café bien cargado esta mañana porque comenzaré hoy con los aspectos internos del React Compiler. El año pasado en React Conf, el equipo de meta presentó el React Compiler, que es una herramienta de tiempo de compilación que automáticamente añade memoización a tus componentes y también aplica las reglas de React. Pero la auto-memoización es personalmente lo que más me entusiasma porque esto significa que finalmente no tenemos que añadir manualmente use memo, use callback, o React.memo. En su lugar, podemos escribir código React limpio y simple como este y el React Compiler automáticamente lo transforma en código JavaScript altamente optimizado con lógica de caché que sería prácticamente imposible de lograr manualmente.

Y lo bueno es que nunca tenemos que ver o mantener este código. Todo lo que tenemos que hacer es instalar el compilador, configurarlo con nuestra línea de compilación, pero ¿qué exactamente sucede detrás de escena para convertir nuestro código React simple en este código más optimizado? Bueno, hay muchas, muchas fases por las que pasa nuestro código en la línea de compilación. También puedes ver todas estas fases en los playgrounds de React Compiler si alguna vez has trabajado con eso. Demasiadas para mencionar en 25 minutos, así que en esta charla solo quiero repasar algunas de ellas, las más importantes.

Pero antes de entrar en el compilador, primero quiero centrarme en el problema que está resolviendo porque ¿por qué necesitamos siquiera memoización en React? Bueno, tomemos este código, por ejemplo. Así que tenemos un array con algunos usuarios, tenemos un componente de estadísticas de usuario que filtra los usuarios para encontrar cuáles están activos, y muestra los conteos. Y luego también tenemos un componente principal de la aplicación que muestra el conteo de usuarios activos y una forma de ordenar los usuarios en la lista. Claramente es un código de demostración, sé que esto no es muy de producción, pero cumple su función por hoy.

2. React Performance Optimization

Short description:

Problemas de rendimiento debido a componentes con estado en React, solución con React.memo y use memo, y los beneficios del React Compiler en la automatización de la memoización.

Ahora, hay un problema de rendimiento bastante grande en este código porque nuestro componente app es stateful. Tenemos un estado de sort que podemos cambiar de ascendente a descendente. Pero cada vez que actualizamos el estado, por ejemplo, en user sort, el componente app se vuelve a renderizar. Y por defecto, como sabemos, en React, cuando un componente se vuelve a renderizar, también lo hacen los componentes hijos. Así que esto significa que cada vez que cambiamos sort, user stats también se vuelve a renderizar, y este componente de función se vuelve a ejecutar. Pero dentro de user stats, estamos filtrando el array de users. Ahora, esto no es un gran problema si solo tenemos estos tres users, pero si tuviéramos 10,000 users, esto tiene implicaciones de rendimiento importantes.

Así que antes de que cualquier cosa pueda renderizarse, primero tiene que filtrar todos estos users. Pero el problema es que el array de users ni siquiera ha cambiado. Simplemente se está volviendo a renderizar porque sort cambió. Así que es completamente innecesario que esto se vuelva a renderizar. Para evitar esto, o para evitar esta re-renderización, podríamos envolver este componente en un React.memo. Y esto simplemente le dice a React que solo queremos volver a renderizar este componente si los valores de las props han cambiado. Así que en este caso, el array de users. Ahora también podríamos ser un poco más específicos y decir que solo queremos evitar que la función filter se vuelva a ejecutar en cada renderizado, y luego simplemente envolverla en un use memo en su lugar.

Y en ese caso, solo volvemos a ejecutar esta función filter cada vez que users cambie. Pero este enfoque tiene algunas desventajas. Porque ahora digamos que también queremos filtrar los users según su departamento. Bueno, ahora no podemos olvidar agregar también el valor de department a este array de dependencias. Si olvidamos agregar esto, el valor de active users no se actualizará cada vez que department cambie. Y este es un error que todavía cometo con bastante frecuencia, y este es como el mayor inconveniente de use memo. Así que esto es exactamente lo que el React Compiler resuelve.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Compilador React Forget - Entendiendo React Idiomático
React Advanced 2023React Advanced 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
Todo lo que necesitas saber sobre React 19
React Summit US 2024React Summit US 2024
29 min
Todo lo que necesitas saber sobre React 19
React 19 introduces new features such as React Compiler and React Actions, which optimize code and provide better performance. The useOptimistic hook allows for optimistically updating UI, while the UseFormStatus hook tracks loading states and enables button disabling. The introduction of the 'action' attribute simplifies form handling and data retrieval. React 19 eliminates the need for useMemo and useCallback thanks to the React Compiler. The stability of React 19 has been observed in side projects without major issues.
What Refs Can Do for You
React Summit US 2024React Summit US 2024
27 min
What Refs Can Do for You
Today's Talk focused on using refs and profiling Agigrid in React. The speaker shared their experience with optimizing custom cell components and performance, including using memo and leveraging the React compiler. They also discussed improving performance with manual style updates and refactoring the use of useEffect. The speaker highlighted the use of ref callbacks, which can be implemented with useLayoutEffect. React 19 introduces changes to the ref callback approach. The Talk touched on using React DevTools and CSS variables for monitoring renders. It also discussed the compatibility of Azure Grid with React and the trade-offs between using React components and vanilla JavaScript. The speaker emphasized the importance of considering the DX improvements and the complexity of not seeing a React component tree in the dev tools. The Talk concluded with a mention of AG Grid features, handling refs at various levels, and the recommendation to consult with Stephen for technical questions and application architecture.
React 19 y el compilador para el resto de nosotros
React Day Berlin 2024React Day Berlin 2024
30 min
React 19 y el compilador para el resto de nosotros
Hi everyone. I'm Johnny, an application engineer who builds user-centric React 19 applications. Today, our goal is to help you reach production mountain with React 19. Let's start by gathering a crew and discussing the motives for installing the compiler. We'll revisit React rules and explore the compiler's impact on code. The React compiler translates from JavaScript to JavaScript and provides error reporting. It enables deeper levels of optimization and focuses on user experience. To upgrade to React 19, install the latest version and be aware of any compatibility issues. Check if any custom runtime code needs to be disabled. The React compiler can be used with versions 17 or 18 if you have runtime support. The compiler removes use memos and optimizes the initialization process based on static components. It provides granular reactivity and reduces rendering, making the application feel quicker. Follow React rules and conventions to ensure compatibility. Test custom hooks, be aware of the impact on build time, and address any unexpected issues like the removal of the global JSX namespace. Debugging tools and source mapping in Chrome are useful for understanding compiler output. Enjoy translating chants and exploring the possibilities of React 19!
Guía para Desarrolladores de Aplicaciones sobre React 19: Lo que Necesitas Saber y Todo lo que Puedes Ignorar con Seguridad
React Summit US 2024React Summit US 2024
33 min
Guía para Desarrolladores de Aplicaciones sobre React 19: Lo que Necesitas Saber y Todo lo que Puedes Ignorar con Seguridad
Today's Talk focused on React 19 and its features, APIs, changes, and optimizations. The speaker emphasized the importance of migrating apps and building with React 19. They discussed the high-level features of React 19, including TypeScript emphasis and the testing library philosophy. The Talk also covered the APIs and integration of React 19, as well as the changes and type safety it brings. The speaker highlighted the improvements in useReducer types and the use of TypeScript. They introduced useActionState for migrating code and the useOptimistic hook for maintaining state immediacy. Real-time updates, action functions outside components, and the benefits of using the 'use' prefix in React were also discussed. The Talk touched on upgrade considerations, the role of RSEs and server actions in React, and the current state of RSC development. Overall, the Talk provided valuable insights into the new features and enhancements in React 19 and their impact on the development process.

Workshops on related topic

Dominando React Server Components y Server Actions en React 19
React Advanced 2024React Advanced 2024
160 min
Dominando React Server Components y Server Actions en React 19
Workshop
Maurice de Beijer
Maurice de Beijer
¡Llamando a todos los desarrolladores de React! Únete a nosotros para una inmersiva masterclass de 4 horas profundizando en React Server Components y Server Actions. Descubre cómo estas tecnologías revolucionarias están transformando el desarrollo web y aprende a aprovechar su máximo potencial para construir aplicaciones rápidas y eficientes.
Explora el mundo de React Server Components, combinando sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y experiencia de usuario incomparables. Sumérgete en React Server Actions para ver cómo combinan la interactividad del lado del cliente con la lógica del lado del servidor, facilitando el desarrollo de aplicaciones interactivas sin las limitaciones tradicionales de API.
Obtén experiencia práctica con ejercicios prácticos, ejemplos del mundo real y orientación experta sobre la implementación de estas tecnologías en tus proyectos. Aprende temas esenciales como las diferencias entre Server y Client Components, optimización de la obtención de datos, pasando datos de manera efectiva y maximizando el rendimiento con nuevos hooks de React como useActionState, useFormStatus y useOptimistic.
Ya sea que seas nuevo en React o un profesional experimentado, esta masterclass te equipará con el conocimiento y las herramientas para elevar tus habilidades de desarrollo web. Mantente a la vanguardia y domina la tecnología de vanguardia de React 19. No te lo pierdas: regístrate ahora y desata todo el poder de React!
Evolución de la Gestión de Formularios en React
React Summit US 2024React Summit US 2024
72 min
Evolución de la Gestión de Formularios en React
Workshop
Adrian Hajdin
Adrian Hajdin
Aprende cómo manejar formularios en React utilizando las últimas características, como startTransition, useTransition, useOptimistic y useActionState, con y sin acciones del servidor de React 19, junto con la validación adecuada, manejo de errores y mejores prácticas.La masterclass comenzará demostrando el manejo tradicional de formularios usando useState y useEffect para el renderizado del lado del cliente. Gradualmente, pasaremos a utilizar las últimas características de React 19, incluyendo formularios del lado del servidor y los hooks más recientes para gestionar estados y errores de formularios. Al final de la masterclass, los participantes entenderán cómo crear formularios robustos con validación adecuada y manejo de errores.Objetivos de AprendizajeÚltimos Hooks de React 19 — useTransition, useFormStatus, useOptimistic, useActionState, useDeferredValueAcciones del ServidorRevalidacionesValidación del lado del ServidorManejo de ErroresPrácticas de Seguridad