Versión en EspañolES

React 19 y el compilador para el resto de nosotros

Johannes Goslar

30 min

13 Dec, 2024

Comments

Video Summary and Transcription

Hola a todos. Soy Johnny, un ingeniero de aplicaciones que construye aplicaciones React 19 centradas en el usuario. Hoy, nuestro objetivo es ayudarte a alcanzar la montaña de producción con React 19. Comencemos reuniendo un equipo y discutiendo los motivos para instalar el compilador. Revisaremos las reglas de React y exploraremos el impacto del compilador en el código. El compilador de React traduce de JavaScript a JavaScript y proporciona informes de errores. Permite niveles más profundos de optimización y se centra en la experiencia del usuario. Para actualizar a React 19, instala la última versión y ten en cuenta cualquier problema de compatibilidad. Verifica si es necesario deshabilitar algún código de tiempo de ejecución personalizado. El compilador de React se puede usar con las versiones 17 o 18 si tienes soporte de tiempo de ejecución. El compilador elimina el uso de memos y optimiza el proceso de inicialización basado en componentes estáticos. Proporciona reactividad granular y reduce el renderizado, haciendo que la aplicación se sienta más rápida. Sigue las reglas y convenciones de React para asegurar la compatibilidad. Prueba hooks personalizados, ten en cuenta el impacto en el tiempo de construcción y aborda cualquier problema inesperado como la eliminación del espacio de nombres global JSX. Las herramientas de depuración y el mapeo de fuentes en Chrome son útiles para entender la salida del compilador. ¡Disfruta traduciendo cánticos y explorando las posibilidades de React 19!

Available in English: React 19 and the Compiler for the Rest of Us

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 Compiler - La Pieza que Falta para Optimizar Aplicaciones React

React Day Berlin 2024

30 min

React Compiler - La Pieza que Falta para Optimizar Aplicaciones React

Tapas Adhikary

CreoWis Technologies

Today's Talk introduces the React compiler and its optimizations in React 19. The compiler handles optimizations internally, allowing existing optimizations to coexist. React 19 also brings server components, enhanced hooks, improved reference handling, and asset loading optimization. The React compiler follows the same principles as a typical compiler, with a Babel plugin and ESLint plugin identifying optimizations. The compiler optimizes components by performing in-place updates and reducing unnecessary re-rendering. The React compiler playground helps understand the optimization process. Caching JSX and configuring the React compiler can further optimize specific components. The React compiler is compatible with React 18 and 17 with some configuration, but using React 19 is recommended. Connect with the speaker for more information and subscribe to their YouTube channel. Thank you for watching!

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