Versión en EspañolES

React Compiler - La Pieza que Falta para Optimizar Aplicaciones React

La charla te introducirá al React Compiler, su arquitectura, las reglas para usarlo y la base de código de React 19. Aprenderemos el poder de las optimizaciones de aplicaciones al incluir React Compiler en una aplicación existente. Por último, nos adentraremos en los aspectos internos de las fases de compilación del React compiler usando el playground, y algunos consejos y trucos al respecto.

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

react 19

Tapas Adhikary

30 min

16 Dec, 2024

Comments

Video Summary and Transcription

La charla de hoy presenta el React compiler y sus optimizaciones en React 19. El compilador maneja las optimizaciones internamente, permitiendo que las optimizaciones existentes coexistan. React 19 también trae componentes de servidor, hooks mejorados, manejo de referencias mejorado y optimización de carga de activos. El React compiler sigue los mismos principios que un compilador típico, con un plugin de Babel y un plugin de ESLint que identifican optimizaciones. El compilador optimiza componentes realizando actualizaciones in situ y reduciendo renderizados innecesarios. El playground del React compiler ayuda a entender el proceso de optimización. Almacenando en caché JSX y configurando el React compiler se pueden optimizar aún más componentes específicos. El React compiler es compatible con React 18 y 17 con alguna configuración, pero se recomienda usar React 19. Conéctate con el orador para más información y suscríbete a su canal de YouTube. ¡Gracias por ver!

Available in English: React Compiler - The Missing Piece for Optimizing React Applications

Video transcription and chapters available for users with access.

Available in other languages:

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 2023

33 min

Compilador React Forget - Entendiendo React Idiomático

Top Content

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.

react builders and founders build tools react forget react 19

Todo lo que necesitas saber sobre React 19

React Summit US 2024

29 min

Todo lo que necesitas saber sobre React 19

Shruti Kapoor

Lead Front End Engineer @ Slack

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.

react 19

What Refs Can Do for You

React Summit US 2024

27 min

What Refs Can Do for You

Stephen Cooper

AG Grid

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

Guía para Desarrolladores de Aplicaciones sobre React 19: Lo que Necesitas Saber y Todo lo que Puedes Ignorar con Seguridad

React 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

Michael Chan

React Podcast

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.

react 19

React 19 y el compilador para el resto de nosotros

React Day Berlin 2024

30 min

React 19 y el compilador para el resto de nosotros

Johannes Goslar

Synthesia

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!

react 19

Workshops on related topic

Dominando React Server Components y Server Actions en React 19

React Advanced 2024

160 min

Dominando React Server Components y Server Actions en React 19

Workshop

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!

react server components react 19

Evolución de la Gestión de Formularios en React

React Summit US 2024

72 min

Evolución de la Gestión de Formularios en React

Workshop

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

react hooks react 19