If You Were a React Compiler

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

Si tuvieras los mismos objetivos que React Compiler, ¿qué tipo de componente de React escribirías? En esta masterclass Tony y la audiencia imaginan que son React Compiler, reescribiendo un componente de React de la misma manera exacta en que lo hace el compilador. A lo largo del camino, obtendremos una comprensión más profunda de los internos de React, para comprender completamente cómo funciona el compilador, por qué funciona de esa manera y cómo decidir si deberías usarlo.

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

Tony Alicea
Tony Alicea
26 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
  • Christos kuznos
    Christos kuznos
    None
    Thank you @Tony Alicea for the explanations, it true that I didn't check the QA.
  • Tony Alicea
    Tony Alicea
    The Smyth Group
    @Christos kuznos As I mentioned in the Q&A, you should keep an eye on browser memory if you are passing around extremely large objects in your code. Other than that, the downside is that it's another layer of abstraction -- the code you write isn't what's given to the browser, so there's debugging difficulties potentially there. Overall, though, I don't think the upsides outweigh any potential downsides.
  • Christos kuznos
    Christos kuznos
    None
    any downsides?
Video Summary and Transcription
En esta charla, el orador tiene como objetivo construir una comprensión precisa de cómo funciona el nuevo compilador de React, centrándose en minimizar los re-renders y mejorar el rendimiento. Discuten el concepto de memoization y cómo se puede usar para optimizar aplicaciones de React almacenando los resultados de las llamadas a funciones. El compilador de React automatiza este proceso analizando el código, verificando dependencias y transpiling JSX. El orador enfatiza la importancia de ser consciente de las preocupaciones de memoria al usar memoization y explica cómo el compilador de React detecta cambios en los valores de cierre de funciones. También mencionan el Fibre Tree, que impulsa el proceso de reconciliación y ayuda a optimizar el rendimiento en React. Además, el orador toca la transpilation de JSX, el almacenamiento en caché del compilador y la generación de código. Animan a los desarrolladores a comprender el código generado por el compilador para optimizar secciones específicas según sea necesario.
Available in English: If You Were a React Compiler

1. Introducción al Compilador de React

Short description:

En esta charla, el objetivo es construir un modelo mental preciso de cómo funciona el nuevo compilador de React. Vamos a pretender que somos el compilador de React e intentar hacer lo que hace. Nuestro enfoque está en minimizar los re-renderizados y omitir cálculos innecesarios para mejorar el rendimiento. El compilador de React es esencialmente un compilador de fuente a fuente, tomando el código como entrada y generando un código equivalente con características adicionales. Como compilador, analizamos el código y podemos convertirlo en un árbol de sintaxis abstracta antes de generar un nuevo código.

[♪ música ♪ He sido desarrollador durante unos 25 años. Soy el director de educación para el grupo SMYTH, S-M-Y-T-H, y he enseñado a unos 350,000 estudiantes los fundamentos web en mis cursos en Udemy, Pluralsight y otros lugares, y actualmente puedes encontrarme en understandingreact.com para profundizar en el código fuente de React.

Y la charla de hoy se titula, Si Fueras un Compilador de React. ¿Cuál es la herramienta más poderosa en el cinturón de herramientas de un desarrollador? Bueno, muchas personas podrían tener diferentes respuestas a eso, pero creo que la herramienta más poderosa en el cinturón de herramientas de un desarrollador es un modelo mental preciso, lo que significa que tienes una comprensión razonable de cómo funcionan las herramientas que usas. Porque si tienes una comprensión razonable de cómo funcionan las herramientas que usas, tomas buenas decisiones arquitectónicas. Tienes confianza al usar la herramienta. Y eres capaz de depurar cuando las cosas no van como se espera.

Así que en esta charla, el objetivo es construir un modelo mental preciso de cómo funciona el nuevo compilador de React. Y para hacer eso, vamos a pretender que somos el compilador de React. Vamos a tomar un ejemplo de código que es lento, e intentaremos hacer lo que hace el compilador. Así que si vamos a ser el compilador, tenemos que tener algunas reglas básicas. ¿Cuál es nuestro enfoque y cuáles son nuestros objetivos? Bueno, sabemos que React por diseño llama a las funciones que le damos, es decir, nuestros componentes, una y otra vez. Ahora, a React le gusta llamar a eso re-renderizado de componentes. Pero realmente, le damos a React nuestros objetos de función, y luego React elige cuándo ejecutar y re-ejecutar esas funciones. Y eso significa que el rendimiento de React puede estar ligado a la frecuencia con la que se llaman nuestras funciones, y cuánto trabajo hacen nuestras funciones.

Entonces, ¿cuáles son nuestros objetivos? Bueno, nuestros objetivos como compilador son minimizar los re-renderizados, es decir, minimizar con qué frecuencia, cuántas veces, se llaman nuestras funciones que le damos a React una y otra vez, y omitir cálculos costosos si no necesitamos ejecutarlos. Y eso mejorará nuestro rendimiento. Ahora, ha habido cierta controversia en línea sobre si el compilador de React es un compilador, así que saquemos eso del camino. En los currículos de ciencias de la computación, a menudo se introduce a las personas a los compiladores cuando se habla de convertir lenguajes de programación de alto nivel en lenguaje de máquina, y eso es cierto. Pero también siempre ha sido cierto que existe algo llamado un compilador de fuente a fuente. A veces lo llamamos un transpiler. Y eso es esencialmente lo que es el compilador de React. De fuente a fuente, toma el código como entrada y genera un código equivalente, código que hace lo mismo que nuestro código original, pero con algunos extras. Y eso es lo que hace el compilador de React. Así que si somos el compilador, vamos a hacer lo mismo que hace el compilador de React.

Ahora, cuando un programa que funciona como compilador se ejecuta, analiza el texto del código. Así que eso es lo que haríamos. Ahora, en el caso de un compilador real, podría convertir el texto en algo llamado un árbol de sintaxis abstracta. Así que podría tomar una línea de código que escribimos y luego convertirla en algún tipo de estructura de objeto, que luego puede ser recorrida, razonada, etcétera, y luego generar nuevo texto, nuevo código. De fuente a fuente.

2. Proceeding Algorithmically to Minimize Rerenders

Short description:

Vamos a proceder algorítmicamente para evitar useMemo, memo y useCallback. Comencemos observando un ejemplo artificial de un contador simple con re-renderizados innecesarios. Al proceder algorítmicamente, podemos encontrar una solución sin usar manualmente memos y callbacks.

Y luego va a tomar esa idea y proceder algorítmicamente. Va a recorrer nuestro código y tomar decisiones sobre qué código va a generar. Así que eso es lo que vamos a hacer. Simplemente vamos a proceder algorítmicamente. Y veremos qué sucede.

¿Cuál es la primera cosa que necesitamos hacer? Bueno, nuestro objetivo es evitar useMemo, memo, useCallback. Así que necesitamos prepararnos para memoizar valores. Así que comencemos observando algo de código. Este es un ejemplo muy artificial, pero es una charla de 20 minutos. Así que los ejemplos artificiales pueden ser útiles. Así que aquí está nuestro ejemplo artificial. Y tengo algo de código ajustado a la derecha, pero puedes prestar atención al código a la izquierda, y lo moveremos de un lado a otro un poco.

Así que tengo un contador muy, muy simple. Ejemplo clásico, pasándole un count y una función de incremento. Tengo una función intencionalmente súper lenta. Ahí está nuestro problema principal. Y luego he levantado el estado al nivel de la app aquí, y esencialmente tengo algunos re-renderizados innecesarios ocurriendo. Lo que estoy haciendo es que tengo un par de clics para sumar dos números, y eso va a ser lento. Y luego estoy llamando a mi componente de contador, que solo va a incrementar su propio estado. Así que termina luciendo así. Hago clic fue 5 más 10. Es lento. Ahora es 5 más 11. Y eso está bien, pero nota que el contador también se renderizó. No necesitaba hacerlo. Y luego, cuando hago clic en más en count, nuevamente ejecuta esa función lenta y luego incrementa. Así que eso es un problema.

Ahora, tenemos algunas maneras de manejar esto, y una de las maneras sería que manualmente hagamos use memos y use callbacks, etcétera. Pero no vamos a hacer eso. En su lugar, vamos a proceder algorítmicamente.

3. Memoization with Custom Hook

Short description:

Voy a estar preparado para poner cosas en memoización. Definiré el concepto de vacío y crearé un hook personalizado, C para cache, para memoizar un array de valores. En lugar de usar use memos en todas partes, tendré un array de valores en la parte superior. Los valores memoizados se almacenan en un objeto de JavaScript en la memoria del navegador y se accede a ellos a través del fiber tree.

Voy a estar preparado para poder poner cosas en memoización. Así que {{^}}voy a dejar caer una función simple aquí, y {{^}}voy a definir el concepto de vacío. Simplemente voy a hacerlo un símbolo porque no quiero preocuparme de si es null o undefined. ¿Es ese un valor preciso? Quiero saber que esto está vacío, voy a tener lo que es esencialmente un hook personalizado, C para cache, digamos, y va a memoizar un array del tamaño que le dé y llenar ese array inicialmente con esa representación de un valor vacío. Y eso es todo.

Ahora, cuando vaya a usarlo, y solo tendré mi código de referencia aquí. Vamos a pasar por un poco. Cuando empiece a trabajar algorítmicamente a través de todo este código, lo primero que siempre voy a hacer es decir, bueno, sé que quiero este array de posibles valores memoizados para este componente. Este componente ahora va a ser optimizado. Pero no voy a pasar por y añadir use memos literalmente en todas partes. Simplemente voy a tener un array de valores en la parte superior. ¿Y qué está pasando realmente aquí cuando hago eso? Bien, refresquemos esto y asegurémonos de que tenemos... Asegurémonos de que tenemos eso en su lugar. Y me perdí mis use memos, así que hagámoslo. Y simplemente dejaremos que esto se refresque.

Bien, eso está corriendo, pero ¿dónde están los valores memoizados? ¿Dónde está ese array vacío? Bueno, es interesante. En realidad podemos ir a buscar el elemento de sección creado en ese contador. Y en el elemento de sección, en realidad puedo obtener una referencia, ves eso allí, al nodo en el fiber tree que es lo que coloquialmente ahora llamamos el DOM virtual. Puedo ir a buscar o encontrar ese nodo que generó ese elemento DOM, así que vamos a obtener eso. Y dentro de eso, puedo ir a encontrar su padre, que se llama return. ¿Cuál es el padre de esta sección? Es Counter. Y ahí está. Y en ese nodo del DOM virtual del fiber tree, es decir, hay un array, y ahí están todos mis valores vacíos en el array. Así que el valor memoizado simplemente está sentado en un objeto de JavaScript en la memoria en el navegador. Y mientras React está recordando y llamando una y otra vez mis funciones, puede acceder a esa parte del nodo colgando del fiber tree. Se ve un poco como... vamos a mostrar esto. Se ve un poco como esto. Siempre que usas un hook, en realidad se está moviendo hacia abajo el siguiente valor en una lista enlazada. Así que cada vez que ves Use algo, en realidad significa moverse al siguiente valor en la lista enlazada, y ahí están los datos que necesito para ese valor, ya sea estado, callback, memo, lo que sea.

4. Memoizing Functions and Dependencies

Short description:

Quiero poner funciones o los valores de retorno de las funciones en memoria. Las funciones son puras en React, lo que significa que siempre devuelven la misma salida para la misma entrada. Esto me permite memoizar o almacenar el valor de una función y evitar ejecutarla nuevamente. En JSX, que se convierte en llamadas a funciones, otras funciones se llaman internamente. Memoizar estas funciones y sus dependencias, como los children, puede optimizar el rendimiento.

Pero ahí está, sentado en la memoria. Así que estoy preparado para poner cosas en memoria. Y lo que quiero poner en memoria son funciones, o realmente los valores de retorno de las funciones. Y mi suposición es que las funciones son puras. Esa es una de las reglas de React, ¿verdad? Que si le doy a una función la misma entrada, siempre obtengo la misma salida, y eso me permite memoizar o almacenar o guardar el valor de esa función cuando le doy la misma entrada para no ejecutar la función nuevamente.

Bien, aquí hay una pregunta, compiladores. En esta simple función de contador, ignorando la consola, ignorando estas dos líneas aquí arriba, ¿hay otras funciones siendo llamadas en este ejemplo simple? La respuesta es sí. Porque recuerda, nuestro modelo mental de React, escribimos JSX, pero ¿qué es JSX? JSX son llamadas a funciones. No está realmente llamando a nuestras funciones, está llamando a funciones internas de React y le estamos dando objetos de función para llamar o le estamos dando cadenas que dicen, llama a estas funciones internas que React ya tiene, y construye el DOM. Si soy el compilador y estoy diciendo que no quiero volver a llamar a una función si no es necesario, entonces también quiero memoizar las funciones a las que se convierte el JSX. Y la dependencia serían las cosas que se pasan a esas funciones, que tendemos a llamar children. Esos son realmente solo un objeto o un array que se pasa en esa llamada a función.

5. Optimizing Memoization with JSX and Dependencies

Short description:

Si empiezo a pensar en esto de manera programática, voy a verificar si el valor es igual a count y si ya está almacenado en el array de memoización. Si no, llamaré a la función nuevamente y almacenaré el resultado. Al hacer esto repetidamente, creo una secuencia de declaraciones if que colocan valores en el array memoizado. Cada componente tiene su propio array de memoización en el fiber tree. La función lenta tiene dos dependencias, que se verifican y almacenan en el array de memoización. Si el array está vacío, se crea la función, de lo contrario, se recupera. El mismo proceso se aplica a todos los componentes JSX con sus respectivas dependencias.

Si empiezo a pensar en esto de manera programática, ¿qué voy a hacer? Bueno, me voy a encontrar, digamos que tomamos este párrafo. Voy a decir, bueno, tengo un valor. Nuevamente, solo voy a pensar algorítmicamente. No voy a pensar demasiado profundamente. Y voy a verificar si ese primer valor es igual a count. Si mi función de contador se llama nuevamente y se le pasa count, voy a verificar si ya he almacenado ese mismo número en el array de memoización. Y si no lo he hecho, entonces necesito esencialmente llamar a mi función nuevamente, porque hay un nuevo valor de count. Si originalmente era count cero y estoy más allá de cero, ya conozco el resultado, p count colon cero. Pero si es uno, ahora necesito recalcular eso. Y lo que puedo hacer entonces es almacenar ese valor para comparar con el nuevo valor. ¿Y sabes qué? Voy a almacenar realmente los resultados de esa llamada a función, porque si almaceno los resultados de la llamada a función y se introduce el mismo valor de count, no tengo que hacer nada de eso. Puedo simplemente decir, ve a buscarlo de la memoización. Y luego puedo realmente reemplazar este p con ese b cero. ¿Tiene sentido? Bastante simple, ¿verdad? Si hiciera esto algorítmicamente una y otra y otra y otra y otra y otra y otra y otra y otra y otra y otra, ¿qué obtengo? Bueno, obtengo una secuencia de declaraciones if colocando valores en ese array memoizado donde siempre estoy verificando las dependencias. En este caso, button tiene una dependencia de increment, que es una función que se pasa. Puedo ir a app, todavía tengo mi use state. Almaceno un nuevo array memoizado, que se almacena ¿dónde? En el nodo app, en el fiber tree que está asociado con esa llamada a función. Y los reviso.

Aquí está mi función lenta. Ahora tiene dos dependencias, así que solo voy a verificar, ponerlas en el array de memoización, ver si han cambiado. Oh, esta era solo la función increment, que no tiene parámetros. No, solo necesito crearla una vez. Así que esta es mi pequeña excepción. Voy a decir, bueno, si está vacío, ese lugar en el array de memoización, entonces crea la función, de lo contrario, simplemente sáquela. Porque mientras lo haga una vez, una vez que ya no esté vacío, sé que tengo la función correcta. Bien. Y llamaré a eso increment. Y haremos lo mismo. Todas estas pequeñas piezas de JSX. Esta tiene num1, num2, y sum, así que verificamos todos esos.

6. Understanding the React Compiler

Short description:

Acabo de memorizar todo. El resultado es un código que podemos entender. El compilador de React es una herramienta que hace el trabajo por nosotros, permitiéndonos centrarnos en crear grandes aplicaciones y software. No es una caja negra mágica, sino una herramienta que analiza el código, añade memorización, verifica dependencias y transpila JSX. Entender cómo funciona el compilador es valioso, pero no necesitas conocer todas sus complejidades. Únete a mí en understandingreact.com para profundizar en el código fuente de React.

Y verificamos, y verificamos, y verificamos, y verificamos, y verificamos, y verificamos, y verificamos, y lo sacamos, y lo guardamos. Y actualizamos. Vamos a actualizar. Todavía va a ser lento en la carga inicial. Todavía estamos llamando a eso. Pero mira lo que pasa cuando hago clic en count. ¡Yay! ¡Súper rápido! Y nada más se está renderizando. Y cuando hago clic en el lento, sigue siendo lento. Pero el contador no se vuelve a renderizar. Entonces, ¿qué acaba de pasar? Acabo de memorizar todo. Pero no lo hice demasiado profundamente, ¿verdad? Solo lo hice algorítmicamente. Y el resultado es un código que podemos entender.

De hecho, lo puse en el playground del compilador de React, y aquí está el código que salió. ¿Te resulta familiar? Hmm. ¿Podrías escribir un código como este? Tal vez no quieras. Probablemente podrías si realmente tuvieras que hacerlo, ¿verdad? Pero eso es lo grandioso de una herramienta. Es una herramienta que pasa y hace ese trabajo por nosotros, para que podamos centrarnos en crear grandes aplicaciones, en crear un gran software. Pero la idea es que no tenemos que pensar en ello.

¿Por qué no tenemos que pensar en ello? Bueno, porque tenemos una herramienta que lo hace por nosotros. Y no necesitas entender las complejidades de cómo funciona un compilador para usar el compilador de React. Pero la herramienta más poderosa que un desarrollador puede tener en su cinturón de herramientas es un modelo mental preciso. Siempre te beneficiarás de saber cómo funcionan las cosas. Y así, cuando miramos el compilador, no es una caja negra mágica que hace que tu aplicación sea más rápida. El compilador es una herramienta que analiza el texto de tu código, añadiendo memorización, añadiendo verificaciones de dependencias en llamadas a funciones, incluyendo el JSX, en lo que se transpila, y eso es todo.

Es un código que podrías escribir si tuvieras la inclinación y el tiempo. Si fueras un compilador de React. Y eso es todo. Soy Tony Alisea. Puedes encontrarme en understandingreact.com para profundizar completamente en el código fuente de React para ti y tu equipo. Ahora es un buen momento para unirte a mí allí.

QnA

React Compiler and Memoization

Short description:

El compilador de React memorizza los resultados de las llamadas a funciones, dependiendo de los parámetros pasados. Funciona de manera similar a cómo se memoriza el valor más visto en tu código. Si la pregunta no está clara, puede haber oportunidades para una explicación más sencilla.

Y espero que disfruten de la última charla de la conferencia. Gracias a todos por el placer.

Aquí hay una pregunta rápida, súper fuera de lugar. Tu primera computadora. TRS-80 Color Computer 2 Tandy. Bien. Nadie aquí sabe qué es eso. Sí, bien. Muy bien, muy bien. Muy bien. Ahí vamos. Y la otra cosa que quiero decir, Ron Harper. Oh, eso es todo. Sí, ahí lo tienes. Solo estamos teniendo una conversación. Tuvimos toda una conversación sobre los deportes de Cleveland. No entremos en eso. Muy bien, no mucho tiempo.

Entremos en el primero que les va a gustar, que estaba en tu código, solo se memorizó el valor más visto. ¿Hace, oh, se acaba de mover. ¿Hace, se acaba de mover de nuevo. Espera. ¿Dónde estás? ¿Funciona un compilador de React de la misma manera? ¿Solo un valor? Tratando de entender. En tu código, solo se memorizó el valor más visto. ¿Funciona el compilador de React de la misma manera? Solo un valor. No estoy seguro de entender completamente la pregunta. Lo que diré es que el compilador está pasando y memorizando los resultados de las llamadas a funciones, ¿verdad? Y siempre va a depender de cuántos parámetros, argumentos se pasen a esa función, siempre que la función sea pura. Bien. Y de nuevo, solo voy a decirlo, ya sabes, si leemos la pregunta, no está lo suficientemente clara, lo que sea, habrá una especie de oportunidades para tener una más directa. Sí, lo siento por eso.

Memory Concerns and Function Closure Detection

Short description:

Es importante ser consciente de los posibles problemas de memoria al memorizar todo en aplicaciones de React. Aunque el compilador de React puede ahorrar mucho trabajo al memorizar llamadas a funciones, volcar una gran cantidad de información en los resultados de estas llamadas puede afectar el rendimiento del navegador del usuario. El compilador de React detecta cambios en los valores de cierre de una función analizando estáticamente el código utilizando varias técnicas, como la generación de árboles de sintaxis abstracta. Ha sido probado extensamente en producción y se puede experimentar con él en el playground para entender su salida. Hay una pregunta sobre por qué React se alejó de solo memorizar cálculos costosos, lo cual se puede explorar más a fondo.

Si quieren aclarar. Oh, sí, exactamente. Y quiero disculparme. No lo estoy leyendo correctamente. Roger, gracias por el reconocimiento. Pero solo quiere decir que esta charla fue increíble. Así que merci, Roger. No es que deba tomar el crédito. Esto es para lo que vinimos.

¿Hay preocupaciones de memoria al memorizar todo? Esa es una gran pregunta. Potencialmente, ¿verdad? Creo que para la mayoría de las aplicaciones comunes de React, no será un problema. Pero es algo de lo que hay que estar consciente. Así que si vas a usar el compilador, que es una gran herramienta. Claramente va a ahorrar mucho trabajo. Si estás volcando una gran cantidad de información en los resultados de tus llamadas a funciones, entonces debes ser consciente de que eso va a estar ahí, si estás haciendo actualizaciones del lado del cliente con React, eso va a estar en el cliente del usuario en su navegador. Y eso es algo que al menos hay que mirar, ¿verdad?, en las herramientas del navegador para estar consciente. Gracias por esa pregunta nuevamente.

¿Dónde fuiste? Ahí estás. ¿Cómo detecta el compilador de React cuando los valores de cierre de una función habrían necesitado cambiar, incluso si su lista de parámetros está vacía? Sabes, esa es una buena pregunta. Sé que el equipo del compilador, lo que mostramos hoy no es todo lo que hace el compilador. No es el alcance de sus habilidades. Así que está analizando estáticamente tu código y está utilizando una variedad de técnicas para hacerlo. Así que diría que el compilador claramente ha sido probado intensamente y ya se usa en producción. Así que creo que se trata más del código del compilador haciendo análisis estático y tomando esas determinaciones generando árboles de sintaxis abstracta, generando todo lo que necesita generar para hacer esas determinaciones. Si alguien está preocupado por si algo funciona o no, digo que lo mejor es probarlo. Incluso solo colócalo en el playground y ve cuál es la salida y luego sigue desde allí. Genial. Me gusta esta pregunta de anónimo.

React Compiler: Memory Concerns and Fibre Tree

Short description:

React se alejó de la memorización manual porque el compilador optimiza las llamadas a funciones automáticamente. El tamaño de los resultados en la mayoría de los casos es insignificante. El Fibre Tree es la parte más interesante de los internos de React, ya que impulsa el proceso de reconciliación y ayuda a optimizar el rendimiento. La interacción del compilador con los arrays de dependencias de efecto no está clara, pero puede ignorarlos. El impacto del código de memorización en el tamaño del bundle es una pregunta interesante.

¿Por qué React se alejaría de esto y hay alguna preocupación de memoria mientras lo hacemos un poco… Sí. Bueno, por un lado con el compilador, no puedes optar por no participar. Así que puedes poner una nota en una función particular para decir, por favor no optimices esta función. Así que eso es una preocupación. Hay habilidades de exclusión. Y creo que por otro lado, el tamaño de los resultados para la mayoría de las cosas, como un fragmento de JSX o algo así, es bastante insignificante. Así que creo que lo original dentro de los documentos de React sobre preocuparse solo por cosas grandes es porque React no está tratando de alentarnos a usar memo en todas partes manualmente. Así que estás diciendo, bueno, no te preocupes por memorizar todo. Eso es trabajo innecesario. Pero en el caso del compilador, realmente no importa porque no estamos haciendo ese trabajo manual. Muy bien.

¿Cuál es la parte más interesante de los internos de React? Oh, creo que el Fibre Tree es fascinante. Cómo funcionan los hooks y realmente cómo el proceso de reconciliación surge de eso. Pero solo el Fibre Tree en general es interesante. Lo que solíamos llamar el DOM virtual. Gran parte de lo que React es y hace ahora está centrado en ese árbol. Programar trabajo, pausar trabajo, ayudar a que las cosas sean optimizadas y rápidas. Así que creo que profundizar en cómo funciona el Fibre Tree es algo excelente para un desarrollador de React. No es 100% requerido, pero es realmente fascinante y útil. Genial.

¿Cómo interactúa el compilador con los arrays de dependencias de efecto? Ooh, esa es una buena pregunta. No creo que sepa la respuesta a eso. Asumiría que probablemente lo ignora. Como el array de dependencias de use effect, porque ya está ahí. Ya está como que solo va a ejecutarse cuando las dependencias cambien. Pero no estoy 100% seguro. Bien. Y nuevamente, si entre ahora y cuando vayamos a la sesión de preguntas y respuestas, si quieres hacer esa pregunta de nuevo, o quieres aclarar, por favor, las oportunidades estarán ahí. ¿Dónde está esa pregunta? ¿Sabes cómo todo este código de memorización afecta el tamaño del bundle? Esa es una pregunta interesante. Obviamente, estamos agregando algunos if statements.

JSX Transpilation and Compiler Caching

Short description:

El código transpilado de JSX suele ser más grande y complicado que el código generado por el compilador. El compilador almacena en caché los valores de las funciones y los compara para actualizar la caché. En el compilador de React, solo se memorizan los valores más vistos. Funciona con parámetros de objeto y array debido a la igualdad de referencia en JavaScript.

Pero si realmente miras el código generado, en lo que JSX se transpila es probablemente más grande y más complicado que lo que el compilador está generando. Así que no creo que tenga un impacto tan grande como alguien podría pensar.

Genial. Gracias. ¿Entiendo que un compilador estoy almacenando en caché los valores de las funciones que los hijos podrían llamar y comparando nuevos valores con los antiguos para luego actualizar la caché? OK, no estoy seguro si eso es una pregunta real. Tal vez no estoy leyendo bien. Sí, creo que entiendo lo que están diciendo. Sí, lo eres. Cada vez que se llama a tu función, se vuelve a renderizar, se vuelve a ejecutar, se está comparando con lo que ya está en la caché.

Si coincide, no se molestará en ejecutar la función. Si no coincide, ejecutará la función. Muy bien, gracias. En tu código, solo se memorizó el valor más visto. ¿El compilador de React funciona de la misma manera, solo un valor? Esa es la pregunta principal. En el código, solo se memorizó el valor más visto. Sí, creo que esa es la pregunta que hicimos antes. ¿Lo hice? Siento que podría tener que dejar eso. OK. Muy bien.

Está bien.

Memory Optimization and Code Generation

Short description:

Voy a intentar resolver eso después. Entonces, ¿funciona con parámetros de objeto y arrays? Sí, porque los objetos y arrays tienen igualdad de referencia en JavaScript. En memoria, si la memoria es una preocupación, podrías almacenar un hash del argumento de la función en la caché en su lugar. Sin embargo, puede que no sea necesario ya que los argumentos memorizados generalmente no son valores masivos. Si estás pasando objetos increíblemente grandes a una función, eso puede ser una señal de que algo más está mal con la arquitectura. No hay riesgos de romper el código que no usa el compilador. Puedes mirar el código que se genera.

Voy a intentar resolver eso después. Lo siento. Genial. Lo siento. OK, acabo de ser desconectado. ¿Qué está pasando aquí? Disculpas, dame un segundo. No te preocupes. Oh, pero está aquí arriba. Oh, lo siento.

Entonces, ¿funciona con parámetros de objeto y arrays? Sí, en realidad, porque los objetos son— puedes argumentar sobre la igualdad de referencia en JavaScript, pero hay un grado de igualdad de referencia en JavaScript. Así que un array es un tipo especial de objeto. Así que vas a poder comparar esos dos.

Muy bien. Siguen llegando más preguntas. Increíble. En memoria, si la memoria es una preocupación, ¿podrías almacenar un hash del argumento de la función en la caché en su lugar? Esa es una pregunta interesante. Siento que eso es una posible optimización, seguro. Simplemente no estoy seguro de que sea necesario. Creo que si estás memorizando lo que llega como argumentos, probablemente no van a ser valores masivos. Supongo que eso es otra cosa en la que pensar. No solo si tu función está devolviendo arrays o objetos extremadamente grandes, sino también si estás pasando objetos extremadamente grandes a la función. Eso también es algo a tener en cuenta en términos de memoria. Pero de nuevo, creo que eso es— si estás pasando objetos increíblemente grandes a una función, eso puede ser una señal de que algo más está mal con la arquitectura.

Absolutamente. Y creo que esta será nuestra última pregunta. ¿Tienes alguna aprensión sobre el compilador? Habilita muchas características nuevas, pero ¿hay algún riesgo de romper el código que no usa el compilador? No lo creo. Puedes mirar el código que se genera.

Understanding Generated Code and Optimization

Short description:

Puedes entender el código que se genera y tomar una determinación. Tómalo pieza por pieza, optimizando secciones específicas. Gracias, Sr. Alisaiah, por su tiempo y presentación.

Puedes entender el código que se genera, y luego tomar una determinación. Piénsalo como si otro desarrollador intentara optimizar tu código y ver qué aspecto tiene. Si vas a tener mucho código que se está ejecutando y siendo optimizado, claro, podrías tener una preocupación como, ¿qué va a pasar? Pero de nuevo, también podrías tomarlo pieza por pieza. Podrías decir, sé que esta interfaz de usuario en particular tiene algunos problemas. Voy a excluir todo lo demás, y solo voy a usar el compilador allí, ver qué pasa, y seguir desde allí.

Genial. Sr. Alisaiah, muchas gracias por su tiempo y su presentación. Gracias. Un aplauso para Tony, por favor. Lo aprecio.

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

Una Guía del Comportamiento de Renderizado de React
React Advanced 2022React Advanced 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
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.
Uso efectivo de useEffect
React Advanced 2022React Advanced 2022
30 min
Uso efectivo de useEffect
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Concurrencia en React, Explicada
React Summit 2023React Summit 2023
23 min
Concurrencia en React, Explicada
Top Content
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Next.js para Desarrolladores de React.js
React Day Berlin 2023React Day Berlin 2023
157 min
Next.js para Desarrolladores de React.js
Top Content
Featured WorkshopFree
Adrian Hajdin
Adrian Hajdin
En esta avanzada masterclass de Next.js, profundizaremos en conceptos clave y técnicas que permiten a los desarrolladores de React.js aprovechar al máximo Next.js. Exploraremos temas avanzados y prácticas prácticas, equipándote con las habilidades necesarias para construir aplicaciones web de alto rendimiento y tomar decisiones arquitectónicas informadas.
Al final de esta masterclass, serás capaz de:1. Comprender los beneficios de los Componentes del Servidor React y su papel en la construcción de aplicaciones React interactivas, renderizadas por el servidor.2. Diferenciar entre el tiempo de ejecución de Edge y Node.js en Next.js y saber cuándo usar cada uno en función de los requisitos de tu proyecto.3. Explorar técnicas avanzadas de Renderizado del Lado del Servidor (SSR), incluyendo streaming, fetching paralelo vs. secuencial, y sincronización de datos.4. Implementar estrategias de caché para mejorar el rendimiento y reducir la carga del servidor en las aplicaciones Next.js.5. Utilizar Acciones React para manejar la mutación compleja del servidor.6. Optimizar tus aplicaciones Next.js para SEO, compartir en redes sociales, y rendimiento general para mejorar la descubrabilidad y la participación del usuario.
Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
Consejos sobre React Hooks que solo los profesionales conocen
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
Consejos sobre React Hooks que solo los profesionales conocen
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
La adición de la API de hooks a React fue un cambio bastante importante. Antes de los hooks, la mayoría de los componentos tenían que ser basados en clases. Ahora, con los hooks, estos son a menudo componentes funcionales mucho más simples. Los hooks pueden ser realmente simples de usar. Casi engañosamente simples. Porque todavía hay muchas formas en las que puedes equivocarte con los hooks. Y a menudo resulta que hay muchas formas en las que puedes mejorar tus componentes con una mejor comprensión de cómo se puede usar cada hook de React.Aprenderás todo sobre los pros y los contras de los diversos hooks. Aprenderás cuándo usar useState() versus useReducer(). Veremos cómo usar useContext() de manera eficiente. Verás cuándo usar useLayoutEffect() y cuándo useEffect() es mejor.
Presentando FlashList: Construyamos juntos una lista performante en React Native
React Advanced 2022React Advanced 2022
81 min
Presentando FlashList: Construyamos juntos una lista performante en React Native
Top Content
Featured Workshop
David Cortés Fulla
Marek Fořt
Talha Naqvi
3 authors
En esta masterclass aprenderás por qué creamos FlashList en Shopify y cómo puedes usarlo en tu código hoy. Te mostraremos cómo tomar una lista que no es performante en FlatList y hacerla performante usando FlashList con mínimo esfuerzo. Usaremos herramientas como Flipper, nuestro propio código de benchmarking, y te enseñaremos cómo la API de FlashList puede cubrir casos de uso más complejos y aún así mantener un rendimiento de primera categoría.Sabrás:- Breve presentación sobre qué es FlashList, por qué lo construimos, etc.- Migrando de FlatList a FlashList- Enseñando cómo escribir una lista performante- Utilizando las herramientas proporcionadas por la biblioteca FlashList (principalmente el hook useBenchmark)- Usando los plugins de Flipper (gráfico de llamas, nuestro perfilador de listas, perfilador de UI & JS FPS, etc.)- Optimizando el rendimiento de FlashList utilizando props más avanzados como `getType`- 5-6 tareas de muestra donde descubriremos y solucionaremos problemas juntos- Preguntas y respuestas con el equipo de Shopify
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.