Compilador React Forget - Entendiendo React Idiomático

Rate this content
Bookmark

React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.

33 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

AI Generated Video Summary

La charla discute React Forget, un compilador construido en Meta que tiene como objetivo optimizar el desarrollo de React en el lado del cliente. Explora el uso de la memoización para mejorar el rendimiento y la visión de Forget para determinar automáticamente las dependencias en tiempo de construcción. Forget se nombra con un juego de palabras con la F y tiene el potencial de optimizar las construcciones del servidor y permitir la eliminación de código muerto. El equipo planea hacer de Forget un código abierto y se centra en garantizar su calidad antes de su lanzamiento.

1. Introducción a React Forget y Nuestra Visión

Short description:

Soy Joe, un ingeniero del equipo de React en Meta. Voy a hablar sobre nuestra visión para el desarrollo de React en el lado del cliente y React Forget, un compilador que hemos construido en Meta. Mofe discutirá nuestro progreso en la implementación de Forget en Meta. Usamos valores y sintaxis de JavaScript simples en nuestro código, lo que nos permite usar la plataforma de manera eficiente. Sin embargo, existe un problema potencial con rerenders innecesarios en nuestra aplicación, afectando el rendimiento.

Entonces, sí, soy Joe. ¿Esto es demasiado fuerte? Parece fuerte. Bueno, está bien. Entonces, soy Joe. Soy un ingeniero en el equipo de React en Meta y en esta charla nos gustaría compartir nuestra visión para el desarrollo de React en el lado del cliente, específicamente estoy hablando de React Forget. Forget es un compilador que hemos construido en Meta que memoriza automáticamente tus componentes y hooks. Así que si esperabas que hiciéramos open source a Forget hoy, lamento decepcionarte. Pero hemos avanzado mucho y estamos emocionados de compartir más sobre eso contigo hoy.

Entonces, voy a hablar sobre cuál es nuestra visión, qué es Forget y cómo se ajusta a esa visión. Y luego Mofe va a subir y hablar sobre nuestro progreso en la implementación de Forget en Meta.

Para entender nuestra visión para React, ayuda mirar un poco de código. Aquí estoy mostrando una versión simplificada de un componente interno de Meta. Este componente toma un encabezado, una lista de videos y un filtro. Y luego renderiza el encabezado y la lista de videos que coinciden con ese filtro. Puedes imaginar que el componente real es más complicado. Ya sabes, los filtros son en realidad estado, etc. Es una versión simplificada. Personalmente, creo que hay mucho que me gusta de este código. Es un componente pequeño, claro y conciso. Utiliza valores de JavaScript simples, arrays. Usamos la sintaxis estándar de JavaScript, if-else para condicionales, un bucle for para iteración. No necesitamos aprender algo nuevo, esto es solo el JavaScript que ya conocemos. Usa la plataforma.

Entonces, en muchos aspectos, esto es React en su mejor momento. Usamos esta UI como una simple función de data. Realmente solo hay un problema potencial con este código. Si lo enviamos tal cual, podríamos ver partes de nuestra aplicación rerenderizadas innecesariamente, y eso puede afectar el rendimiento, ralentizando las cosas. Veamos un ejemplo de cómo puede suceder eso. Imagina que nuestro componente se vuelve a renderizar, pero solo el encabezado ha cambiado realmente. Cuando el componente se renderiza, pasa ese nuevo encabezado al componente de encabezado, que se actualiza como esperábamos.

2. Optimizando el Rendimiento con Memoización

Short description:

Por defecto, cuando un componente se vuelve a renderizar, todo el componente se vuelve a ejecutar, creando una nueva lista de videos filtrados. Para abordar esto, podemos usar usememo y react.memo para optimizar el rendimiento. Al aplicar usememo y react.memo de manera consistente, podemos lograr un buen rendimiento con React. Sin embargo, la memoización puede hacer que el código sea menos claro y llevar a debates sobre su uso. La necesidad de memoización depende del contexto de la aplicación.

Pero eso no es todo lo que sucede por defecto. Cuando nuestro componente se vuelve a renderizar, todo el componente se vuelve a ejecutar. Esta función completa se vuelve a ejecutar. Eso significa que creamos una nueva lista de videos filtrados, y luego pasamos eso a video list, que luego también se vuelve a renderizar todo el camino hacia abajo del árbol. Y esto sucederá todo el camino hacia abajo del árbol. Aunque nada cambió significativamente sobre los videos.

Para abordar esto, podemos usar dos APIs de React, usememo y react.memo. Así que aquí, he aplicado usememo a la lógica para filtrar los videos. La matriz en la parte inferior aquí le dice a React que solo vuelva a calcular los videos filtrados si los videos o los valores del filtro han cambiado realmente. Así que ahora si solo cambia el encabezado, no volvemos a calcular la lista de videos filtrados. Genial. Pero eso no es suficiente. Porque aunque estamos pasando los mismos videos filtrados al componente de la lista de video, por defecto, React seguirá volviendo a renderizar un componente, incluso si sus props no han cambiado. Para optar por no hacer eso, envolvemos el componente con react.memo. Así que ahora obtenemos el rendimiento esperado con estos dos cambios. Ahora cuando cambia el encabezado, no tendremos que actualizar el componente de la lista de video. Genial.

Pero si aplicas juiciosamente React use memo, use call back, que es una especie de call back versión de use memo, y luego react.memo, si los usas de manera consistente en tu base de código, puedes lograr un muy buen rendimiento con React. Y muchos otros presentadores han hablado de eso antes. Hemos encontrado que generalmente cuando las aplicaciones tienen un problema de rendimiento, es porque de esta especie de memoización faltante y puede ser solucionado simplemente añadiendo esto de vuelta. La memoización ha hecho que nuestro código original sea mucho menos conciso y claro. Ya no estamos simplemente describiendo lo que la UI debería estar mostrando. Tenemos que decirle a React cómo procesar nuestro código. Eso es un poco perder la idea original de React, ¿verdad? Renderizado declarativo. Pero ahora tenemos que entrar en el cómo. Y luego nuestras revisiones de código se convierten en si hemos memoizado correctamente, si hemos memoizado demasiado poco, demasiado. Tenemos posts en blogs diciendo que no deberías memoizar en absoluto, que no necesitas memoización. Y lo cierto es que ambos tienen razón, porque todo depende del contexto. Este código, el código original aquí podría estar bien en muchas aplicaciones. Pero para otras aplicaciones podrían tener un problema de rendimiento.

QnA

Memoización y la Visión de Forget

Short description:

Con la memoización, nuestro código se llena de lógica adicional, sacrificando la lógica original limpia y concisa para un mejor rendimiento. Nos cuestionamos la necesidad de decirle explícitamente a React sobre las dependencias cuando ya las hemos especificado en JavaScript. ¿Puede React averiguar automáticamente las dependencias en tiempo de compilación? Creemos que Forget ayudará a React a lograr su visión de una experiencia de desarrollador ergonómica con un gran rendimiento.

Pero realmente, con esta memoización, nuestro código se llena de lógica extra. No nos estamos enfocando solo en la experiencia del producto central, sino que volvemos a centrarnos en cómo lograrlo. Esto hace que nuestro código sea más difícil de leer y de cambiar. Entonces, en cierto sentido, useMemo es un compromiso.

Sacrificamos algo de la lógica original limpia y concisa a cambio de un mejor performance. Pero, ¿por qué necesitamos hacer este compromiso en absoluto? Bueno, volvamos al código. La razón por la que comenzamos este camino fue que necesitábamos usar useMemo para decirle a React que la lista de video no depende del encabezado. Pero todos somos desarrolladores, conocemos JavaScript, ¿verdad? Ya le hemos dicho a React que la lista de video no depende del encabezado. De hecho, hemos utilizado un formato de instrucciones muy bien especificado que las computadoras ya entienden para darle esa información a React. Se llama JavaScript. Ya lo conoces, ¿verdad? Entonces, ¿por qué tenemos que decirle a React de nuevo? ¿Por qué también tenemos que agregar en nuestro useMemo para decirle a React, oh, esto no depende de estos valores? ¿Qué pasaría si React pudiera averiguar eso automáticamente? Y mejor aún, ¿qué pasaría si React pudiera averiguar esto en tiempo de compilación cuando compiles tu aplicación? ¿Y si no lo hiciste?

...decisiones de design, pero es posible que necesitemos hacer ajustes y optimizaciones adicionales, dependiendo de los data. Nuestro próximo paso es escalar hasta que Forget se use en todas partes en Meta, refinando pequeños detalles. Finalmente, cuando hayamos probado y iterado lo suficiente, lanzaremos. Aunque todavía tenemos trabajo por delante, creemos firmemente que Forget ayudará a React a lograr su visión, una experiencia de desarrollador ergonómica, junto con un gran rendimiento. Gracias.

Vamos a saltar directamente a las preguntas del público. Así que espero que estés listo. La primera pregunta con más votos es ¿esto elimina completamente la necesidad de useMemo, memo y useCallback? Sí, a largo plazo, la idea es que nos gustaría eliminar completamente esas APIs. Obviamente, es un largo camino para llegar allí. Pero ese es el objetivo, sí. Genial. Eso es agradable. Es uno, en mi experiencia, uno de los conceptos más difíciles de entender. Pero sí, algo que necesitas entender si estás construyendo una gran aplicación. Así que super agradable. ¿Cómo hace React... ¿Por qué se llama React Forget y no React Remember? La pregunta anterior fue muy buena. Estaba emocionado por eso. Quería responder a eso. Bueno, sé lo que era.

React Forget y su papel

Short description:

React Forget lleva el nombre de un juego de palabras con la F, siguiendo nuestra política de nombres. Sabe cuándo aplicar la memoización utilizando el análisis de escape y la inferencia de tipos. Forget es para React del lado del cliente y ayuda a hacer las partes interactivas de la aplicación más rápidas y mejorar la experiencia del desarrollador. Es un compilador para React, con potencial para un análisis más profundo.

Vamos a llegar a eso. Oh, está bien, está bien. De acuerdo. ¿Por qué se llama React Forget? Entonces, tenemos una política de nombrar todas las cosas con palabras que comienzan con F que son juegos de palabras, y entonces remember no es, sí, no es una palabra que comienza con F. Bueno, es justo. Nos gustan las palabras que comienzan con F. ¿Dan? Somos neoyorquinos. No se permite maldecir en el escenario. Yo no lo dije. Adelante.

Siguiente pregunta. La mejor pregunta. De David. ¿Cómo sabe React Forget cuándo no aplicar innecesariamente memoizaciones, como cuando la memoización es más costosa que no hacer ninguna memoización en absoluto? Entonces, hacemos dos cosas aquí. Lo primero es el análisis de escape. Miramos los valores que realmente se devuelven de la función, como de JSX, o los valores que se pasan a los hooks como entradas. Así que solo memoizamos los valores que finalmente salen de la función. Lo segundo es que hacemos una inferencia de tipos para no memoizar primitivas. Entonces, cosas como array.length, por ejemplo, podemos inferir que es una primitiva. Y dado que eso no va a causar un re-renderizado innecesario en los hijos de React, actualmente optamos por no memoizar esos. Genial, gracias.

La siguiente pregunta es, mencionaste que Forget es para React del lado del cliente. ¿Cómo encaja este proyecto en el cambio de paradigma de los componentes del servidor de React? ¿Quizás Forget jugará un papel más grande en React Native? Sí, esa es una gran pregunta. Así que no vemos que React del lado del cliente desaparezca. Los RSEs expanden React. No disminuyen la necesidad de React del lado del cliente para manejar las partes interactivas de tu aplicación. Y entonces, para las partes de tu aplicación que siguen siendo interactivas, Forget ayuda a hacerlas más rápidas por defecto y mejora la experiencia del desarrollador allí. Pero creo que la otra parte es que Forget es un compilador para React. Y así que lo primero que estamos haciendo con ese compilador es optimizar la experiencia del desarrollador del lado del cliente. Pero tenemos otras ideas sobre cómo construir sobre el análisis que Forget está haciendo.

Optimizando las compilaciones del servidor y estrategia de código abierto

Short description:

Forget podría optimizar las compilaciones del servidor, eliminar el código innecesario para SSR y permitir la eliminación de código muerto. El equipo planea hacerlo de código abierto cuando esté listo. Tienen acceso único a científicos de datos y la escala de Facebook para pruebas de estrés. Han visto casos de uso interesantes y esperan que su experiencia beneficie a la comunidad de código abierto. El equipo dedica tiempo a su estrategia de lanzamiento de código abierto y está probando Git en aplicaciones de código abierto y otros marcos como Remix y Next.js.

Por ejemplo, tal vez haciendo compilaciones de servidor optimizadas. Si estás haciendo SSR, Forget podría descubrir que el estado de uso no se va a ejecutar en un entorno SSR y eliminarlo. Y luego podrías hacer algo de eliminación de código muerto desde allí y tener un servidor más optimizado construir. Así que tienes más ideas para qué hacer dado esta plataforma de compilador en el futuro.

Genial, gracias. La siguiente es una pregunta de Dennis Kroekneet. ¿Por qué no hacerlo open-source para que podamos mejorarlo como community? Sí, lo haremos cuando esté listo para open-source. Creo que Mofay, tú cubriste eso, ¿verdad? Y creo que en la última diapositiva realmente me gustó el tipo de etapas por las que pasamos. Creo que tenemos acceso único a científicos de data. Sí y como no sé si quieres... Sí, y creo que no hay mejor prueba de estrés que la escala de Facebook, ¿verdad? Así que todos los que quieran mejorar, no van a tener, o la mayoría de ellos no van a tener la escala que ustedes pueden tener para pruebas de estrés. Sí, siento que quieres compartir más sobre, no sé si hay algo más que quieras compartir, como lo que hemos pasado internamente solo para mirar en. Tienen un código bastante loco en Facebook. Tenemos miles de ingenieros escribiendo código durante una década en este punto, casi una década. Hemos visto casos de uso realmente interesantes y esperamos que al menos toda nuestra experiencia implementando Git en Meta solo lo haga mejor para la comunidad de código abierto community. Sí. Sí. ¿Y eso es algo... Cuando estás desarrollando esto, ¿es algo como, siempre está construido para Meta o es algo que realmente tienes en cuenta entonces, como esto también para el resto de la community? Porque Meta está pagando las facturas, por supuesto, así que lo entendería completamente.

Sí. Pasamos mucho tiempo pensando en nuestra estrategia de lanzamiento de código abierto. Entonces, durante los últimos, no sé, un par de meses, hemos... Whoa. Eso es mucha gente. Oh. Estamos probando Git en aplicaciones de código abierto también. Usa Git y aplicaciones como usando otros frameworks como Remix, Next.js solo para asegurarte de que encaja en el pipeline. Sí. Sí. Eso es genial escuchar.

Instalación y lanzamiento de React Forget

Short description:

La fecha de lanzamiento de React para Git no se proporcionó en esta parte. El equipo se centra en hacer que Forget sea lo más impresionante posible antes de lanzarlo como un proyecto de código abierto. Quieren asegurarse de que cumple con un alto nivel en términos de calidad, documentación, soporte y corrección de errores. El objetivo es tener Forget listo para salir al código abierto.

Gracias. Próxima pregunta de Metin Parzhinski. ¿Es esto algo que tendremos que instalar, o simplemente estará en la versión X de React? Es parte del pipeline de construcción, por lo que es algo que tendrás que instalar. Hay una pequeña dependencia, y depende de una API adicional de runtime en React. Por lo tanto, requerirá en algún momento que salga en una versión estable de React. Y una vez que hayas actualizado a esa versión de React, podrás agregar el plugin de Babel.

Sí. Vale. Genial. Bueno, la pregunta que sabíamos que vendría, ¿cuándo se lanzará React para Git? Creo que Mofe lo describió en su sección de la charla. Así que definitivamente consulta la charla, y repasamos los pasos que nosotros atravesamos, prototipo inicial, iteración, refinándolo en más y más productos que Meta, y luego lanzándolo. Como mencionaste en la charla, nos exigimos un nivel muy alto, ¿verdad? Pero no solo la calidad de lo que estamos lanzando, sino cosas como la documentation, estar disponible para responder a preguntas de soporte, ser capaz de revisar realmente las solicitudes de extracción que corrigen errores. Así que queremos, cuando sea de código abierto, queremos que sea realmente un buen proyecto de código abierto. Pero eso requiere trabajo de nuestra parte que nos quitaría tiempo para terminar Forget y hacer lo que necesita ser. Así que creemos que lo correcto a hacer ahora es realmente hacer que Forget sea tan impresionante como pueda ser para que esté listo para salir al código abierto.

Muy bien. Así que todos pueden olvidarse de React, olvidar hasta que se lance. Ese es el mensaje, sí. Pero muchas gracias por esta introducción. Perdimos la noción del tiempo. Se suponía que debíamos terminar hace cuatro minutos. Así que muchas gracias por estar aquí. Sí, gracias. Y vamos a continuar con la siguiente parte.

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

JSNation Live 2021JSNation Live 2021
31 min
Vite: Rethinking Frontend Tooling
Vite is a new build tool that intends to provide a leaner, faster, and more friction-less workflow for building modern web apps. This talk will dive into the project's background, rationale, technical details and design decisions: what problem does it solve, what makes it fast, and how does it fit into the JS tooling landscape.
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn