React 19: Evolution and Features

Rate this content
Bookmark

React 19 introduce una gran cantidad de nuevas capacidades y APIs. Entonces, ¿qué necesitas? ¿Qué puedes implementar hoy? ¿Y qué deberías dejar para que los autores del framework lo integren?

Incluso si no planeas adoptar Server Components, hay nuevas capacidades en React 19 para mejorar la velocidad, clarificar el código e incluso eliminar dependencias de larga data.

En este resumen práctico y progresivo, aprenderás todo lo que necesitas para estar preparado para una actualización a React 19.

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

Michael Chan
Michael Chan
33 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy se centró en React 19 y sus características, APIs, cambios y optimizaciones. El orador enfatizó la importancia de migrar aplicaciones y construir con React 19. Discutieron las características de alto nivel de React 19, incluyendo el énfasis en TypeScript y la filosofía de la biblioteca de pruebas. La charla también cubrió las APIs y la integración de React 19, así como los cambios y la seguridad de tipos que trae. El orador destacó las mejoras en los tipos de useReducer y el uso de TypeScript. Introdujeron useActionState para migrar código y el hook useOptimistic para mantener la inmediatez del estado. También se discutieron las actualizaciones en tiempo real, las funciones de acción fuera de los componentes y los beneficios de usar el prefijo 'use' en React. La charla tocó consideraciones de actualización, el papel de los RSEs y las acciones del servidor en React, y el estado actual del desarrollo de RSC. En general, la charla proporcionó valiosos conocimientos sobre las nuevas características y mejoras en React 19 y su impacto en el proceso de desarrollo.

1. Introduction to React Migration

Short description:

Gracias a todos por estar aquí. Hoy hablaremos sobre lo que React significa para nosotros. He estado trabajando en la educación de desarrolladores durante los últimos cinco años, ayudando a equipos a migrar a nuevas tecnologías. En esta sesión, aprenderás sobre cómo migrar tus aplicaciones y construir con React 19.

Hola, muchas gracias a todos por estar aquí. Sé que ahora mismo en el gran teatro hay algo así como el futuro de React. Todo va a estar llegando en el futuro. Y estaba realmente emocionado de tener la oportunidad de estar en una sala más pequeña con personas para hablar sobre lo que React realmente significa para nosotros hoy.

Durante los últimos, supongo, como cinco años, he estado haciendo educación para desarrolladores con varios equipos. Trabajé en Storybook y Chromatic por un tiempo, y más recientemente con WorkOS, tratando de resolver el tema de la autenticación para todos. Y antes de eso trabajé como arquitecto de front-end para una empresa durante, como, diez años. Y algo que tuve que hacer fue comunicar cómo íbamos a migrar con éxito a cualquier cosa nueva a la que necesitábamos migrar y elaborar un plan para eso.

Así que en esta sesión, verás muchos diffs, verás muchos, ya sabes, gráficos, opiniones sobre cómo se verá, como, hoy, la próxima semana, los próximos meses para ti mientras comienzas a migrar tus aplicaciones y construir con React 19. Así que si estás dentro, vamos.

2. React 19 Features

Short description:

Cometí el error de hacer todas las diapositivas una página web en mi sitio web. Puedes acceder a ellas para ver e interactuar. Soy Chan Tastic en las redes sociales, solía hacer un podcast llamado React Podcast. Ahora publico sobre microplásticos. Trabajo para WorkOS, que proporciona una caja de inicio de sesión para un millón de usuarios activos. Hablemos de las características de alto nivel de React 19: énfasis en TypeScript, filosofía de la biblioteca de pruebas y más.

Bien. Así que cometí el error no aconsejable de hacer todas estas diapositivas una página web en mi sitio web. Así que puede ser un poco problemático, pero tendrás acceso a ellas. Así que si quieres abrirlas, puedes revisarlas, hacer clic, hacer de todo. Deberías estar viendo todo lo que estoy viendo. Si no, lo siento. Debería resolverse en algún momento pronto. Tengo, como, mi marco es un poco raro. No sé si hice algo.

Bien. Así que primero, soy Chan Tastic en, como, redes sociales. Solía hacer un podcast que quizás hayas escuchado llamado React Podcast. Lo dejé hace un tiempo debido a mi crisis de mediana edad, desafortunadamente. Así que ahora solo, ya sabes, publico tonterías sobre microplásticos en mis redes sociales. Así que si quieres escuchar más de ese gran contenido, puedes ir allí. Y como dije, trabajo para una empresa llamada WorkOS. Hacemos la mejor caja de inicio de sesión del mundo, y es gratis para un millón de usuarios activos, y te llevará de todo, desde un prototipo hasta listo para empresa. Es bastante genial. Así que con eso fuera del camino, hablemos.

Quiero asegurarme de que si tienes que irte, como, en cinco minutos, que obtengas lo máximo de esta charla. Así que la gran característica de alto nivel o tipo de cosas que estamos aprendiendo sobre React 19 son, hasta donde puedo decir, como, cuatro grandes cosas. Así que primero y ante todo, si miras los documentos de migración, hay un gran énfasis en realmente fomentar TypeScript. Verás que muchas de las características de seguridad de tipos en tiempo de ejecución que han estado en React anteriormente están desapareciendo por completo. Y como la mitad del documento de migración solo habla sobre mejoras en los tipos, tipo, como, asociaciones con el TypeScript definitely typed, etcétera. También se está respaldando la filosofía de la biblioteca de pruebas, donde pruebas desde el exterior hacia adentro. Esto beneficia la accesibilidad de tus componentes. Es realmente la mejor manera de probar. Hace que tus pruebas sean más duraderas. Nos estamos alejando de las utilidades de prueba y el renderizado superficial y todo ese tipo de cosas. Vamos a cubrir eso.

QnA

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.
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 Compiler - La Pieza que Falta para Optimizar Aplicaciones React
React Day Berlin 2024React Day Berlin 2024
30 min
React Compiler - La Pieza que Falta para Optimizar Aplicaciones React
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 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!

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