React 19: Evolution and Features

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

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.

3. React 19 APIs and Integration

Short description:

Estamos adoptando compiladores y mejorando la integración de la plataforma. Un gráfico de cuadrantes muestra cómo estas características impactan tus aplicaciones. React 18.3 prepara tu código para React 19, y las bibliotecas pueden requerir actualizaciones. Discutiremos nuevas APIs y APIs que desaparecerán en React 19.

También estamos adoptando compiladores. Otros frameworks como Svelte han estado haciendo esto desde el primer día. Y estamos empezando a ver mucho movimiento en eso. No vamos a cubrir eso. Sridhar dio una muy buena charla que incluye muchos más detalles sobre el compilador. Los documentos probablemente sean el mejor lugar para eso. Realmente es como una cosa de integración en este punto.

Y finalmente, hay muchas cosas donde están adoptando la plataforma un poco mejor. Como hablaremos de esas características. Pero están adoptando la plataforma de una manera que realmente me emociona como alguien que creció aprendiendo HTML y CSS. Y siempre me he sentido un poco en desacuerdo con React por cuánto lo abarca todo y te convierte en un desarrollador de React. Así que estamos volviendo un poco a la web.

Ahora, esto es un poco, hice un pequeño gráfico de cuadrantes, si quieres, de cómo veo estas características influyendo en tus aplicaciones en tu vida hoy. Así que hay cosas que son internas a React. Así que cosas que son fundamentales para la biblioteca de React. Hay cosas que vienen con un framework, ya sea Next.js o Remix o Redwood u otros frameworks que ni siquiera han sido inventados aún. Hemos eliminado APIs en React 19 y nuevas APIs. Ahora estoy pensando en esto un poco como hoy, lo que puedes hacer. Así que hay una versión React 18.3, que es 18.2, que es la versión que hemos tenido creo que como dos años ahora. Pero tiene, advierte sobre todas las APIs que van a ser eliminadas. Así que esto es algo a lo que puedes actualizar hoy, tener todo tu código seguro para React 19 cuando finalmente se lance. Y luego, ya sabes, mañana, tenemos algunas cosas que son como un poco en este borde donde las bibliotecas van a tener que actualizarse de algunas de las estrategias que han usado. Y esto puede ser tu responsabilidad actualizar o arreglar algunas de tus dependencias, de lo que hablaremos un poco.

No vamos a hablar de este cuadrante aquí arriba, RSCs y acciones del servidor, solo porque realmente no se aplican a todos los desarrolladores de React todavía. Y vamos a hablar sobre acciones, metadatos, scripts y hojas de estilo, las nuevas APIs que tenemos. Así que una hoja rápida para que mires. Estas son todas las APIs que van a desaparecer en React 19, y recibirás advertencias en 18.3. Así que prop types, muerto. Default props, muerto. Context types, get child context.

4. React 19 Changes and Type Safety

Short description:

String refs, create factory, module pattern factory y más están desapareciendo. React proporciona code mods para una migración fácil. La actualización puede ser difícil si tienes dependencias antiguas sin mantenimiento. La seguridad de tipos en React 19 trae cambios emocionantes y se recomienda el uso de TypeScript.

String refs, create factory, module pattern factory. Algunas de estas cosas, quiero decir, como que puede que nunca las hayas visto en tu vida. Test utils, React on render, React on hydrate, unmount component at node, find DOM node, la biblioteca de prop types está muerta, React test renderer, shallow está desapareciendo.

Ahora, algo que realmente me encanta es que el equipo de React ha estado muy dedicado a proporcionar code mods para todas estas cosas, y los he encontrado muy bien documentados. Así que puedes revisar el repositorio de code mods. Te dan instrucciones sobre cómo ejecutarlos. Es una forma bastante buena de migrar tu aplicación sin tener que tocar todo el código.

Ahora, algo emocionante sobre React es que ya no puedes ser despedido por usar internals secretos. Eso es bastante emocionante. Pero también, significa que puedes tener muchas dificultades para actualizar si tienes muchas dependencias antiguas sin mantenimiento. Así que estamos cambiando el prefijo de internals secretos, y se va a cambiar de internals secretos no usar o serás despedido a no usar o advertir a los usuarios que no pueden actualizar. Ahora, hice una pequeña búsqueda rápida en GitHub, y parece que hay, déjame abrir esto en el correcto. Sí, parece que esto realmente creció desde que obtuve este número. Ahora hay 12.3 mil archivos con referencias a internals secretos no usar. Y así que casi puedo garantizar que algo de lo que dependes hoy probablemente requerirá una actualización. Y algo que siempre me gusta decir es que eres dueño de lo que instalas. Así que este es tu problema. Podría ser un problema para ti muy pronto. Así que echa un buen vistazo a tus dependencias.

Bien, entonces la seguridad de tipos en React 19. Así que vas a ver muchos diffs en este punto. Tenemos cosas realmente emocionantes. Este es un código histórico. Este es el tipo de cosas con las que comencé. Esta fue mi primera experiencia con la seguridad de tipos, poder usar prop types, y realmente me introdujo al concepto de seguridad de tipos, y es, no sé, tiene un lugar especial en mi corazón. Sin embargo, TypeScript es mucho mejor, y ahora incluso tenemos características de lenguaje en JavaScript moderno que nos permiten proporcionar valores predeterminados para algunas de nuestras cosas. Así que todas estas APIs están desapareciendo. Eso es genial. Ups. Fui demasiado lejos.

5. React 19 API Improvements

Short description:

Los tipos de useReducer están mejorados. useRef ahora requiere un argumento, eliminando la necesidad de un tipo de ref mutable. Se requiere limpieza de ref para la seguridad de tipos. El elemento React ha cambiado a unknown. El espacio de nombres JSX debe colocarse dentro de React para evitar colisiones con otras bibliotecas. Las pruebas ahora usan useTestingLibrary, y el método ACT ahora es parte de la biblioteca React.

Tenemos mejores tipos de useReducer. Así que toda esta tontería que tenías que hacer para, como, hacer que useReducer funcionara bien con TypeScript, eso se ha ido, y puedes simplemente escribir un reducer, puedes poner tus tipos allí. Súper genial. useRef ahora requiere un argumento, y eso es, no sé, bueno, supongo. Así que nos permite deshacernos de algunos tipos, así que hay un tipo de ref mutable, que te permitiría cambiar el valor con el tiempo si alguna vez fuera nulo, y ahora eso simplemente desaparece ahora que React requiere ese valor desde el principio.

No voy a pasar demasiado tiempo en todos estos, pero obtienes una limpieza de ref que ahora es necesaria para la seguridad de tipos, y el elemento React ha cambiado a unknown desde any... También hay un pequeño cambio en el espacio de nombres JSX. Ahora tienes que poner eso dentro de React para eliminar cualquier colisión con otras bibliotecas. Y sí, las pruebas ahora son oficialmente solo useTestingLibrary ya. Ahora, una cosa que sabrás, con todas esas APIs desapareciendo, todas las utilidades de prueba desapareciendo, ACT, que es un método muy importante para las pruebas, se ha movido a la biblioteca propia de React, por lo que deberías poder deshacerte de esa dependencia de testutils por completo.

6. React 19 Reacting to User Actions

Short description:

Introducción de useActionState para migrar código y traer APIs de formularios familiares a React. El contador de clics clásico se transforma usando useActionState y formAction. Las acciones en React 19 son asincrónicas, permitiendo esperar solicitudes de red. El hook useOptimistic mantiene la inmediatez del estado mientras se ejecutan procesos asincrónicos.

Bien, entonces, ahora, una cosa que históricamente me ha encantado, vamos a cambiar un poco de marcha aquí, leí este libro hace mucho tiempo, se llamaba simplemente Refactoring, creo, probablemente debería haber averiguado el título real de eso, pero me hizo pensar sobre las formas en que pensamos sobre la migración de código, y cómo, para cada tipo de transición que tu código podría atravesar, hay estos pequeños pasos que puedes hacer para llevarlo de un lugar a otro, son predecibles, son repetibles, y pueden darte una sensación de seguridad al hacer cambios que podrías no haber tenido la intención de hacer, o cambios de biblioteca, etc.

Así que vamos a comenzar hoy, voy a mostrarte un puñado de visualizaciones para introducir algunas de las nuevas características de React, comenzando con algo que me entusiasma mucho que es useActionState, aquí es donde realmente traemos algunas de las grandes APIs de formularios del navegador, no grandes, pero APIs de formularios familiares a la biblioteca de React. Así que vamos a comenzar con lo que ves en pantalla aquí, es solo este clásico contador de clics tienes algún tipo de useState, onClick vas a incrementar, vas a llamar a esa función de actualización e incrementar. Así que useState simplemente se convierte en useActionState, vamos a tomar nuestra función de incremento y la vamos a poner dentro de nuestro useActionState. Ese es uno de los principales movimientos, es que la acción va dentro de useActionState cuando estás haciendo esta migración. Después de eso, vas a llamar a formAction, y formAction es una API que realmente se añade a input, button, y submit, ¿tal vez? Creo que hay otro. Pero todos los elementos relacionados con formularios puedes llamar a formAction. Luego simplemente cambias esto a un formulario, y todo funciona como lo hacía antes con tu contador de botones, pero ahora realmente estás usando elementos de formulario adecuados, lo cual es súper emocionante. Comenzaremos a ver por qué eso es genial en solo un segundo.

Así que por definición, en React 19, una acción es algún tipo de funcionalidad asincrónica. Así que mientras estamos usando useActionState aquí, porque este no es un manejador asincrónico, técnicamente no es una acción. Así que podemos hacer esto asincrónico, sigue siendo lo mismo, pero ahora lo hemos desacoplado de ser inmediato. Y ahora podemos hacer cosas como esperar algún tipo de acción. Así que ahora mismo, solo estoy simulando con tiempo que alguna solicitud de red va a suceder. Algo va a suceder que no sabemos cuánto tiempo va a tomar. Y porque es asincrónico, esto va a ser manejado por nosotros. Ahora voy a abrir un playground para esto, para que podamos ver eso. Puedes ver cómo funciona esto. Así que pasamos de ese tipo de ejemplo clásico de botón con el que estamos familiarizados, y a través de acciones, hemos podido hacer esto asincrónico. Y si hago clic en esto, verás un pequeño retraso. Y luego ese número aumenta. Ahora odiamos los retrasos, sin embargo. Los retrasos apestan. Así que también tenemos métodos para manejar eso. Así que useOptimistic es una forma en la que podemos mantener la inmediatez de lo que teníamos con el estado, pero luego también en segundo plano, ejecutar este proceso asincrónico. Ahora con el código que teníamos arriba, veamos. Así que tenemos nuestra acción aquí. Vamos a introducir un nuevo hook. Este es React useOptimistic. Vamos a tomar el conteo que obtenemos de nuestro useActionState.

7. React 19 Optimistic Count

Short description:

Al usar un conteo optimista y una función actualizadora, podemos rastrear los cambios de datos en React con solo unas pocas líneas de código.

Y vamos a implementar un conteo optimista. Así que este es un valor que se actualizará de manera optimista independientemente de cuánto tiempo tome la solicitud. Lo siento, déjame alejar esto un poco. Bien, genial. Luego, al igual que useState, vamos a tener una función actualizadora que vamos a definir en línea. Tenemos acceso tanto al estado como al conteo optimista que se nos envía a través de esta acción, que es, veamos, cuando lo estamos llamando, ¿verdad? Oh, aún no lo he llamado. Y luego todo lo que tenemos que hacer es llamar dentro de nuestra función asincrónica, este update optimistic con nuestro valor nextCount, y cambiar nuestra función de renderizado para usar el conteo optimista. Ahora, lo genial de esto es que con solo estas tres líneas de código, hemos podido rastrear estos datos, o React automáticamente rastrea estos datos por nosotros.

8. React 19 Real-Time Updates

Short description:

Ahora podemos actualizar el número en tiempo real, manejar acciones de formulario con facilidad y usar la nueva API use para renderizar componentes condicionalmente sin las limitaciones de los hooks.

Así que vamos a abrir nuestro playground para este. Y puedes ver cómo ha mejorado nuestra experiencia. Así que vamos a hacer clic en esto, y el número se actualiza automáticamente. Así que el número sube, pero luego tenemos este spinner mientras ese proceso asincrónico continúa. Esta es una experiencia increíble para los usuarios, poder, por ejemplo, pensar en un cliente de chat donde las personas pueden publicar cosas y tener esa sensación de tiempo real, aunque en realidad está yendo a una red, puede tomar un poco de tiempo, puede haber retrasos.

Así que una API realmente genial aquí alrededor de las acciones de formulario. Nos quedan 57 segundos. Veamos cuánto más podemos avanzar. Ahora no necesariamente pasaré por todos estos entonces. Las acciones no están limitadas a los botones. En realidad, prefiero manejarlas en el formulario. Y lo genial de cuando haces esto en el formulario, tienes acceso al tipo de datos de formulario estilo navegador. Así que si ponemos un campo oculto en esto, en realidad podemos tomar los datos del formulario como el segundo argumento para nuestras acciones, y hacer lo que queramos con ellos. Así que una API súper genial que realmente trae los formularios web de vuelta al juego.

Y en realidad, creo que 15 segundos, podemos hacer el último. Así que hay una nueva API llamada use. Es súper impresionante, e interactúa muy bien con el contexto. Así que el contexto, ahora puedes eliminar estos proveedores. Así que eso es bastante genial. Puedes simplemente cortarlos del camino. Ahora podemos usar use para renderizar condicionalmente cosas que de otro modo habrían usado hooks. Así que como use context y demás. Esto es súper genial porque use no es un hook. Nos permite evitar algunas de esas reglas estrictas requeridas de los hooks que hemos llegado a odiar. Así que de todos modos, creo que eso es todo. Creo que acabamos de llegar al tiempo. Espero que algunos de estos te ayuden. Nuevamente, todos estos ejemplos están en mi sitio web. Y estoy realmente emocionado por lo que el corto plazo de React nos permite hacer. Integrando la grandeza de los formularios web y HTML con React.

9. Defining Action Functions Outside Components

Short description:

Hay un beneficio en definir funciones de acción fuera de los componentes para su reutilización, pero debe hacerse con precaución para evitar una extracción prematura. Extraer código demasiado pronto puede llevar a peores decisiones y pérdida de contexto. Al usar useOptimist, si falla, revertirá el estado.

Así que eso es todo. Muchas gracias por tu tiempo, y contáctame si tienes alguna pregunta.

Entonces, en primer lugar, ¿hay un beneficio en definir tus funciones de acción fuera de tus componentes? Sí. Quiero decir, creo que siempre hay un beneficio en dividir las cosas solo porque puedes reutilizarlas. Yo tiendo a no sacarlas a menos que vaya a reutilizarlas. Pero eso es solo yo. La primera aplicación de React que construí, fue antes de las bibliotecas de estado. Era este componente masivo, no sé, de 15,000 líneas con un montón de... Ni siquiera era useState entonces. Era como setState, creo. Y fue genial. Me encantó.

Creo que siempre corres el riesgo de sacar el código. Terminas, ¿cómo lo digo? Cuando extraes el código demasiado pronto, tiendes a tomar peores decisiones porque estarás mirando ese código y dirás, oh, hey, esto necesita una condición aquí que me permitiría llamarlo de una manera diferente desde otro lugar. Versus si está en línea, lo cambias allí. Es como por qué a todos les encanta Tailwind ahora mismo. No tienes que pensar en toda la aplicación en tu cerebro para decir que esta cosa aquí necesita menos padding. Así que creo que hay un beneficio. Pero solo sería en esos casos donde sabes que esa acción exacta se comparte a través de un par de cosas. Así que hay un riesgo de sacar las cosas prematuramente.

Oh, sí. Sí. Algunos de los peores códigos que he visto fueron porque alguien dijo voy a sacar esto porque parece que debería estar aislado o repetido. Quieres simplemente echar un vistazo a todo lo que tienes en su conjunto y luego tomar decisiones desde allí. Sí. Sí. Es como si estuvieras quitando ese contexto muchas veces, ¿verdad?

Porque estás sacándolo y tal vez poniéndolo en un archivo diferente.

QnA

Optimization and Naming in React

Short description:

Comprender los beneficios y la optimización del uso en React. Explorando las ventajas sobre el uso de context y los riesgos potenciales. El nombre 'use' y su prevalencia en React.

Y ahora alguien tiene que abrir, ya sabes, como 50 pestañas solo para entender qué hace este maldito formulario.

Oh, tenemos más preguntas llegando. ¿Qué pasa si useOptimist falla? ¿Revierte el estado? Sí, lo hace. No cubrimos eso. Pero si hay un pequeño botón de documentación en algunos de los ejemplos, definitivamente miraría los documentos porque tienen muy buenos ejemplos de cómo manejar casos de falla. Probablemente te familiarizarás mucho más con los límites de error y cómo utilizarlos. Estos son ejemplos muy simplistas para mostrarte cómo cargar la función en tu cerebro. Pero sí, hay formas incluidas, como baterías incluidas, para retroceder el estado allí. Oh, eso suena muy útil. Sí. Genial.

Bien. ¿Puedes ayudarme a entender qué hace que use sea mejor que lo que ya es posible con use context? Parece que podría invitar a algunos anti-patrones. Sí. Así que eso es algo que todavía estoy tratando de entender por mí mismo. Sin embargo, muchas veces, ya sabes, context no es como, utilizar context no es como una operación gratuita. Y a veces puedes saber que ese componente no necesita ser renderizado, ya sabes, por virtud de algún otro estado. Y al renderizar el componente, y luego poner la condición dentro del render, has incurrido en el costo de renderizar ese componente y hacer esa búsqueda de context. Sí. Y aquí, puedes simplemente optar por no hacerlo completamente, como, oye, este computador, este, este componente, sabemos que este componente no se muestra, como, no busques el context en absoluto, como no hagas esa conexión. Y así creo que allí, como, no sé, tal vez haya riesgos, pero es una oportunidad de optimización para subvertir algunas de esas, ya sabes, reglas de hooks, lo cual es agradable.

Sí. ¿Qué piensas sobre el nombre use? Quiero decir, lo vi, como, use qué? Oh, solo use? Todo es, sí, todo es use en React. Ahora, especialmente si eres un desarrollador de Next, es como, use cache, use server, use como, lo que sea. Quiero decir, es legible, supongo. Sí.

The Use Action State Hook and Forms in React

Short description:

El hook use action state permite que los formularios se utilicen en React de una manera que se alinea con las prácticas de desarrollo web. Elimina la necesidad de componentes controlados y permite el uso de formularios como objetos holísticos. Esta integración de formularios en el marco de React se alinea con la intención de React para el control y proporciona una API emocionante para los desarrolladores.

Es divertido. Bien. Siguiente pregunta. ¿Por qué crees que fue necesario crear use action state?

¿Qué problema resuelve el hook que otros hooks o funcionalidades no pudieron? Sí. Así que este es, este es un área donde he estado en desacuerdo. Como alguien que creció en HTML, CSS, como mejora progresiva, como todo eso, soy como muy viejo. Así que, me enamoré de muchas de las APIs de la web, ya sabes, como la primera cosa que construí fue un formulario en PHP y me encanta ese flujo de formularios y usar formularios, datos de formularios, usar formularios de manera holística como un solo objeto con el que estás trabajando. Y creo que los formularios han sido realmente problemáticos en React porque siempre han recomendado usar componentes controlados. Sí. Y odio los componentes controlados en los formularios. Como que simplemente apestan.

Y siempre he sido alguien que dice, oye, solo envía un formulario, toma los datos del formulario. ¿Verdad? Y eso nunca ha sido la forma de React. Es como, puedes hacer eso si eres un idiota y realmente amas la plataforma web por alguna razón, pero como, esa no es la forma en que hacemos las cosas en React. Usamos cosas, estado controlado, etcétera. Lo genial de use, uh, use action state es que esas cosas pueden coexistir ahora. Y tienes los beneficios de, ya sabes, React, conociendo este formulario y teniéndolo integrado en el marco.

Y luego también puedes usar formularios de la manera en que estaban destinados a ser usados en la web. Así que es como si se hubiera reintegrado en React y, um, ya sabes, la intención de React para el control y, um, finalmente se ha encontrado con, con, con la web. Y por eso estoy tan emocionado con la API porque ahora no tenemos que hacer algo que no sea la forma de React nunca más. Puedo simplemente, ya sabes, está incorporado. Es genial.

React 19 Upgrade Considerations

Short description:

La actualización a React 19 puede requerir abordar la eliminación de APIs, pero puede facilitarse mediante modificaciones de código. El problema más difícil radica en el aspecto comunitario, con muchas bibliotecas que necesitan ajustes o reconsideración potencial. Las nuevas APIs proporcionan funcionalidades que reducen la necesidad de ciertas bibliotecas, lo que lleva a los desarrolladores a reflexionar sobre su necesidad.

He estado, sí. He estado criticando el estándar durante mucho tiempo. Simplemente, uh, sí. Y por eso estoy emocionado al respecto. Genial.

Bien. Entonces, ¿cómo resumes las cosas que se deben hacer cuando alguien actualiza a React 19, uh, cosas como, ¿cuáles son algunas de las cosas que esperas que se rompan? Sí, entonces las cosas que se deben hacer van a ser, um, uh, bla, bla, bla, bla, bla. Así que toda la lista de todas las, um, tipo de eliminaciones de API, um, eso va a ser como un problema del día uno. Um, y tienes esa especie de versión suave de, uh, React 19, tres, uno, creo que es la última versión allí. Eso te dará esas advertencias. Um, y hay modificaciones de código para todas esas cosas. Así que debería ser como una migración bastante fácil. Um, creo que muchas de esas cosas son APIs muy antiguas que, um, la gente puede que nunca haya usado. Um, y así creo que, um, el día uno va a ser simplemente como, ya sabes, eliminar todos esos errores, ejecutar las modificaciones de código, etcétera.

Sí. Creo que el problema más difícil va a ser esa pieza comunitaria de la, estas bibliotecas. Hay muchas bibliotecas de las que mucha gente ha llegado a depender. Creo que muchos de nosotros vamos a tener que ensuciarnos las manos en algunas de esas bibliotecas, tal vez bifurcarlas, como, ya sabes, realmente poseer ese código por primera vez. Um, o, ya sabes, tal vez darse cuenta de que no son necesarias. Es algo que no tuvimos tiempo de cubrir fue, um, uh, ya sabes, hay, hay nuevas APIs o nueva funcionalidad que te permite simplemente poner scripts, ya sabes, metadatos y hojas de estilo, como directamente en el componente. Y hará toda la deduplicación por ti, manejará el, ya sabes, precarga y, y demás. Hace todo eso por ti, lo que en realidad elimina la necesidad de un puñado de bibliotecas que históricamente pueden haber tenido una razón legítima para usar algunas de las, ya sabes, las APIs privadas. Así que, um, puede que descubras que ya no necesitas ciertas bibliotecas.

Oh, bien. ¿Sería agradable? Sí. Bien. Así que siento que este es un punto de inflexión para que la gente reflexione sobre si las cosas son necesarias o no. Sí. Sí, absolutamente.

React 19 RSEs and Server Actions

Short description:

Considera evaluar críticamente las dependencias y no asumir la necesidad de arrastrar bibliotecas no mantenidas. El debate sobre si RSC debería ser parte de Core React se refiere a la noción de 'jumping the shark' y expandirse más allá de una biblioteca de UI. RSEs y server actions, aunque todavía están evolucionando, han estado en desarrollo durante varios años y tienen diferentes implementaciones en varios frameworks. Aunque emocionado por los avances, la preferencia recae en aplicaciones centradas en la web y solo del lado del cliente.

Sí. Definitivamente miraría tus dependencias de manera crítica, um, y no solo asumiría que tienes que seguir arrastrando una biblioteca que no se está manteniendo, uh, contigo. Genial.

Bien. Uh, algunas personas no están convencidas de que RSC debería ser parte de Core React. Viendo que han 'jumped the shark' y se han convertido en más que una biblioteca de UI. ¿Opiniones? Siempre soy fan de cualquiera que use 'jump the shark'. ¿Alguien sabe de dónde viene esa referencia? No tengo idea. ¿No? Pensé, sí. Bien. Hay un, hay un episodio de Happy Days. Oh, bien. Donde el Fonz está en una moto de agua o como que está esquiando y literalmente salta sobre un tiburón en el agua. Es tan estúpido. Y es, es como ampliamente considerado como el momento en que este programa comenzó a apestar. Y así, así que 'jumping the shark' es cuando, ya sabes, haces, haces una acrobacia estúpida y como que comienzas a apestar. Uh, podría ser. Cosas que aprendí. Sí. Sí.

Um, uh, podría ser, creo, como, um, no sé, intencionalmente no incluí mucho sobre, uh, RSEs y server actions solo porque, um, realmente no están aquí todavía. ¿Sabes? Y así creo que lo que vemos hoy es como una, como una luz tenue de lo que realmente serán, ya sabes, um, creo que olvidamos que, como anunciaron este concepto de cómo hacer esto, como hace siete años. Uh, es como, es muy como, ha estado en proceso durante mucho tiempo y aún no está aquí. Lo que significa que es como, todavía está evolucionando, ya sabes, um, Next obviamente tiene como una solución que está como impulsando el lenguaje y como el, ya sabes, los, los pensamientos de ello y cómo creen que debería verse. Pero como, Remix tiene una implementación muy diferente de ello. Teóricamente, esto debería, esto debería funcionar en cualquier framework, ya sabes, podrías, ya sabes, tener como PHP, um, hacer como server components para ti o server actions, pero es muy, es muy integrado. Como que requiere, como que está integrado en el framework, integrado en el empaquetador. Um, y creo que, ya sabes, probablemente me alineo con ese sentimiento de, me gusta, uh, me gustan las cosas que están más cerca de la web, ya sabes, como, quiero decir, como hablamos sobre con los formularios o lo que sea. Y así, estoy emocionado por esas cosas. No me gusta, realmente me gustan, um, ya sabes, aplicaciones solo del lado del cliente.

React 19 RSC and Use Cases

Short description:

No interesado en RSC para el caso de uso actual. Esperando un mayor desarrollo antes de considerarlo. Sea paciente, ya que aún no es ampliamente utilizable.

Y así no está, no está haciendo mucho por mí. Um, creo que son muy geniales y creo que hay, uh, aplicaciones que tienen mucho sentido. Pero como, quiero decir, cuando miras las cosas que se están construyendo, um, como Next está realmente invirtiendo mucho en, es mucho de cosas de comercio electrónico y como, no estoy construyendo sitios de comercio electrónico. Como la mayoría de las cosas que estoy construyendo, como la gente solo quiere como una, como una UI agradablemente optimista, ya sabes, actualizada, uh, como una aplicación de una sola página.

Y así creo que si tienes ese problema, um, es genial que haya como una solución para ti y sabes, vas a estar en la vanguardia y va a, ya sabes, doler y vas a tener muchos cortes y moretones en el camino. Pero, um, no sé. Simplemente no es lo que estoy construyendo ahora mismo. Sí. Así que lo aprecias, pero no es para tu caso de uso.

Sí. Como, me gustaría, me gustaría verlo, um, ya sabes, desarrollado un poco más antes de introducir algo en mi aplicación que voy a tener que como seguir persiguiendo durante los próximos como, ya sabes, cinco años mientras es como, oh, en realidad nos gusta más esta API. Como, ya sabes, lo teníamos todo mal antes. Es como, simplemente no estoy interesado en ello. Sí. Sí. Puedes simplemente esperar. Estar al margen por un tiempo.

Sí, solo espera. Puedes esperar. Es como, ni siquiera está aquí todavía. Y la gente está como, oh hombre, es como, ya sabes, es tan increíble y lo que sea. Y es como la mayoría de la gente no puede usarlo. Así que eso es decir, sé, sé paciente. Sí. Ni siquiera sabemos si hemos saltado el tiburón todavía, supongo que esa es tal vez la respuesta. Sí. Sí. Bien. Así que esas son todas las preguntas para las que tenemos tiempo. Muchas gracias por tomarse el tiempo para hablar sobre ReaNyteam. Aprendí mucho. Quiero decir, aprendí la frase saltar el tiburón hoy. Si necesitábamos algo, eso era. Sí. Vengan a hablar con Michael después si tienen alguna pregunta.

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.
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
React Compiler Internals
React Summit 2025React Summit 2025
23 min
React Compiler Internals
Introduction to React Compiler, its benefits, and the problem of memoization in React. Performance issues due to stateful components in React, solution with React.memo and use memo, and the benefits of React compiler in automating memoization. Compiler's transformation into high-level intermediate representation provides a clearer understanding of code operations and data flow, addressing the issues with unique identifiers for variables in complex scenarios. Compiler ensures each variable is assigned exactly once through single static assignment, resolving issues with variable values based on code paths and introducing unique names for assignments. Effects describe how operations interact with data, ensuring safe caching with types like read, store, capture, mutate, and freeze effects. The compiler understands operations but needs to identify values that change between renders for React, leading to the reactive analysis phase to determine reactive values in the component. Variables marked as reactive for potential changes between renders are optimized for caching. Compiler identifies dependencies to group operations for efficient caching. Scopes are established to cache related variables together and ensure efficient rendering and performance improvement in the final JavaScript code. Compiler sets up cache slots for dependencies and outputs to optimize performance. Scopes work independently to recalculate based on changes, ensuring efficient memoization. React Compiler streamlines memoization, providing automatic correct optimizations without manual burden, paving the way for performance-focused code.
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 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