Everything new in React 19

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

React 19 introduce Actions, una nueva forma de simplificar la gestión de formularios al simplificar el manejo de formularios, agregar estados de carga y facilitar la recuperación de datos. Esta charla práctica explora la transición a React 19 utilizando Form Actions, con demostraciones de código para gestionar el envío de formularios, mostrar indicadores de carga y recuperar datos de formularios de manera eficiente.

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

Shruti Kapoor
Shruti Kapoor
29 min
19 Nov, 2024

Comments

Sign in or register to post your comment.
  • Alexis Ware
    Alexis Ware
    I came upon your blog on everything new in React 19—great breakdown of features! The insights on React Actions and the new Compiler really highlight how React 19 is making development more efficient. While researching, I found this resource on optimizing performance with the React 19 Compiler: https://mobisoftinfotech.com/resources/blog/react-19-shadcn-ui-integration-tutorial . It dives into how the Compiler optimizes renders and reduces unnecessary computations. Since React 19 introduces auto-memoization, do you think useMemo and useCallback will become obsolete in most cases? Or are there still scenarios where manual memoization is preferable?
Video Summary and Transcription
React 19 introduce nuevas características como React Compiler y React Actions, que optimizan el código y proporcionan un mejor rendimiento. El hook useOptimistic permite actualizar la interfaz de usuario de manera optimista, mientras que el hook UseFormStatus rastrea los estados de carga y permite deshabilitar botones. La introducción del atributo 'action' simplifica el manejo de formularios y la recuperación de datos. React 19 elimina la necesidad de useMemo y useCallback gracias a React Compiler. Se ha observado la estabilidad de React 19 en proyectos paralelos sin problemas importantes.

1. Introduction to React 19

Short description:

React 19 está en la etapa RC, listo para autores de bibliotecas. Esta charla introduce lo nuevo en React 19, lo que está cambiando y una demostración de algunas características. También cubriremos la conversión de un formulario de React 18 a 19, incluyendo React actions y dos nuevos hooks. Introducción del orador: Shruti Kapoor, una ingeniera de front-end en Slack.

Hola, gente. Muchas gracias por asistir a mi charla. Si no se han dado cuenta, React 19 ha sido anunciado y está en la etapa RC, lo que significa que está listo para los desarrolladores de aplicaciones. Pero está listo para los autores de bibliotecas, pero aún no está listo para los desarrolladores de aplicaciones.

Entonces, si no está listo, ¿por qué estoy dando esta charla? Bueno, siento que cada vez que sale una nueva versión de React, mi mente simplemente dice, OK, cosa brillante, vamos a actualizar. A través de esta charla, quiero mostrarles cuáles son las diferentes cosas que estarán en React 19. Como desarrollador de aplicaciones, ¿cuáles son algunas cosas de las que necesitas preocuparte, especialmente si estás del lado del cliente? Siento que como alguien que acaba de mover el código de su empresa de React 16 a React 18, tengo un pequeño colapso nervioso cada vez que veo que sale una nueva versión. Y pienso, oh, Dios mío, ¿mi código está obsoleto ahora? ¿Tengo que actualizarlo? Pero a través de esta charla, quiero mostrarles todas las cosas que necesitan saber para mover sus componentes de React 18, 17 a React 19.

Así que vamos a hablar de todo lo que necesitas saber sobre React 19. Y hay algunas cosas de las que vamos a hablar hoy, que es lo nuevo en React 19, lo que está cambiando, y una demostración de algunas características a través de las cuales entenderás cómo se ve en el código. Y hablaremos sobre la conversión de un formulario de React 18 a 19. Y a través de eso, aprenderemos sobre React actions y dos nuevos hooks, use action state y use form status.

Antes de continuar con mi charla, quiero presentarme rápidamente. Mi nombre es Shruti Kapoor. Soy una ingeniera de front-end en Slack. Puedes encontrarme en internet en ShrutiKapoor08. También he incluido un enlace a las diapositivas aquí mismo. Así que si estás interesado, puedes escanear este código. No puedo ver a nadie, y si estás escaneando, así que haré una pausa aquí por tres segundos.

2. Dev Jokes and New Features of React

Short description:

Bromas de desarrolladores, nuevas características de React, nuevos hooks y APIs. React Actions explicado a través de código.

Genial. Si has asistido a alguna de mis charlas, sabes lo que viene a continuación. Bromas de desarrolladores. ¡Yay! Así que la forma en que esto funciona es cuando digo toc-toc, tú dices, ¿quién es? Toc-toc. Lo tienes. Genial. Bien. Toc-toc. Sí. ¡No Yahoo! Búscalo en Google. Toc-toc. ¿Quién es? Tailwind. Lo tienes. Tailwind relative inline flex item center Px2, Py2. Sí. Toc-toc. Búscalo en Google. Toc-toc. Tailwind. Java. Tailwind relative inline flex item center. Lo siento si eres un desarrollador de Java. Si conoces una broma de desarrolladores, Toc-toc. Haz un pull request. Aquí está la URL de GitHub si quieres aprender más bromas de desarrolladores, si tienes una broma de desarrolladores. Pero de todos modos, estás como, Vine aquí por React 19, vamos a lo bueno. Así que vamos a lo bueno. Voy a hablar sobre las nuevas características de React, algunos nuevos hooks y algunas nuevas APIs. Así que las nuevas características de React, creo que las dos características principales populares de las que voy a hablar son React Actions. Y echemos un vistazo a cómo funcionan las React Actions echando un vistazo a parte del código que escribimos actualmente.

3. React Actions and React Compiler

Short description:

React 19 introduce acciones, funciones async con StartTransition, acciones del servidor, acciones de formulario, hook useFormStatus, y React Compiler para auto-memorización y re-renderizados optimizados.

Así que aquí hay un valor de entrada, campo de entrada, y añadimos un onChangeHandler a esto. Usualmente hay un botón. Esto es como una extensión, como una simplificación de un formulario. Así que usualmente hay un botón que tiene un handle click. Cosas bastante simples. Si necesitas añadir algún estado inferior, usualmente pondremos algo como isPending, capturar manualmente una bandera, establecerla en true antes de hacer una llamada a la API, y luego establecerla en false una vez que la API ha regresado.

Con React 19, podemos realmente poner una función async usando un StartTransition hook en sí mismo. En caso de que no estés familiarizado con StartTransition, este fue un hook que se introdujo en React 18, que básicamente te permite marcar ciertas actualizaciones como actualizaciones no urgentes. Así que en React 19, ahora puedes poner una función async dentro de StartTransition, y eso es una acción. Así que, simplemente hablando, las funciones que usan transiciones async son acciones. También son compatibles en el servidor, así que también tenemos acciones del servidor con React 19.

React 19 también introduce una acción en el DOM en sí mismo. Así que esto puede parecerte familiar si alguna vez has usado PHP. Ahora tenemos una acción de formulario, que ahora se puede adjuntar a la acción en sí misma que acabamos de crear. Así que en lugar de tener ahora como un onclick handleSubmit o tener un onSubmit en el formulario, puedes adjuntar una acción y no tienes que preocuparte por capturar los estados pendientes más. Otra cosa genial que React 19 también introduce es un nuevo hook llamado useFormStatus, que es realmente genial porque se puede usar para obtener la bandera pendiente de él, así que puedes usarlo para rastrear estados de carga o incluso obtener el objeto de datos. Los datos son todos los campos que fueron enviados al formulario. Así que esas son las acciones de React en resumen. Lo veremos en detalle en la demo también.

Pero hablemos sobre React Compiler. Así que con React 19, no tenemos que usar useMemo o useCallback más, y estoy muy feliz por eso porque React Compiler ahora puede encargarse de la auto-memoización. ¡Woo! Lo sé. Es impresionante. Es realmente genial porque ya no tienes que memorizar manualmente tu código. Solíamos hacer eso con useMemo o ReactMemo o useCallback. Pero sabes que si alguna vez memorizas tu código, a menudo es fácil olvidar dónde memorizar e incluso hacerlo bien es un arte. Así que estoy muy feliz de que React Compiler pueda optimizar las re-renderizaciones, y la forma en que optimiza el rendimiento es por dos cosas. Así que una, omite la re-renderización de los hijos cuando el padre se actualiza. Un ejemplo que puedes haber visto es, digamos que hay un componente y acepta una lista de amigos o una lista de datos. El componente se re-renderizará completamente si los amigos cambian.

4. React Compiler and Code Optimization

Short description:

Con React 19, el componente solo se vuelve a renderizar cuando es necesario, omitiendo cálculos costosos para ciertas funciones. React Compiler puede optimizar el código memorizando componentes y hooks, resultando en un mejor rendimiento sin la necesidad de useMemo y useCallback.

Pero con React 19, el componente es lo suficientemente inteligente, o React Compiler es lo suficientemente inteligente para entender que a través de la reactividad de grano fino, si ninguno de los amigos cambia, entonces friendsListCard solo necesita actualizarse para un amigo específico con un ID específico. Así que el componente completo no necesita volver a renderizarse. Otra cosa que también hace es omitir cálculos costosos para ciertas funciones. Un ejemplo está aquí. Así que solo memoriza componentes y hooks, no todas las funciones. Un ejemplo siendo, digamos que hay una función realmente grande en la parte superior del archivo, proceso costoso. Si el compilador fuera a mirar esto, memorizará la llamada de esa función, que está en la línea const data, donde la función está siendo realmente llamada. Pero debido a que la función está fuera del límite de React, el componente de React, no será memorizada. Así que ese es un punto importante a recordar.

Ahora, ¿cómo se ve el código compilado y cómo sabes si el código ha sido compilado? Lo que puedes hacer es realmente copiar y pegar tu código en el React Compiler Playground, que se ve así. Una advertencia, sin embargo, esto es algo público, así que si tu código es de código abierto, esto sería una buena idea. Así que puedes copiar tu código y ponerlo aquí, y en el lado derecho, verás cosas que están compiladas. Y así, cosas específicas a tener en cuenta son el $="C", que es el hook que React está usando para auto-memorizar el código. Así que en resumen, no más useMemo y callback. Gracias a Dios.

QnA

React Compiler, FAQ, and New Hooks

Short description:

React Compiler proporciona una forma diferente de memorización de código en comparación con useMemo y useCallback. También se puede usar con versiones de React menores a la 19. Las memorizaciones por el compilador son diferentes de las de useMemo y useCallback. Puedes evitar que el compilador optimice ciertos archivos usando useMemo. Si encuentras problemas después de usar el compilador, verifica si estás rompiendo alguna regla de React e intenta solucionar el error sin el compilador añadido. Proporciona comentarios en las discusiones de GitHub si es necesario. React 19 introduce nuevos hooks como useFormStatus, que proporciona información sobre el último envío de formulario, y useActionState, que actualiza el estado basado en acciones disparadas.

¿Qué pasa si dices, me encanta memorizarme a mí mismo? Usa el compilador. Aquí hay algunas preguntas frecuentes que vi en internet, que quiero responder en mi charla. ¿Necesito eliminar useMemo y useCallback ahora? Siento que es una pregunta muy común. La respuesta es, es seguro dejarlo tal como está en el código actual. La forma en que el código de React Compiler memoriza es diferente de useMemo y useCallback, por lo que es seguro dejar tu código tal como está. No tienes que volver atrás y eliminarlo todavía. ¿Puede React Compiler usarse con versiones menores a React 19? Una cosa que quiero señalar que suele ser un tipo de concepto erróneo es que React 19 viene con React Compiler de serie. React Compiler es en realidad un plugin que también se puede usar con React menor a 19. Así que la respuesta es sí, puedes usar React Compiler con otras versiones de React también. Hay un runtime de React Compiler que puedes usar para versiones de React menores a esa. ¿Es la memorización la misma entre React Compiler y useMemo, useCallback? La respuesta es no. La forma en que useMemo y useCallback memorizan es diferente de la forma en que el compilador memoriza el código, por lo que las memorizaciones del compilador son diferentes. ¿Puedo evitar que el compilador optimice ciertos archivos? La respuesta es sí. Puedes usar useMemo en un archivo que quieras ignorar del compilador, pero si escribes useMemo, el compilador no mirará el archivo en absoluto, así que incluso si quieres volver atrás y cambiar algunas cosas, tendrás que eliminar useMemo si quieres que el compilador lo mire de nuevo. Entonces, si ves problemas después del compilador, ¿qué hago? No hagas nada. Hay algunas cosas que verificar para la resolución de problemas. Primero es verificar si estás rompiendo alguna regla de React. Una de las cosas geniales que encontré sobre Playground es que si copias y pegas tu código allí, realmente te dará algunas advertencias que realmente te dan algunas pistas muy útiles, como si estás rompiendo reglas de React, te lo señalará. Otro punto es intentar solucionar el error con useNoMemo. Así que si tu código se rompe al agregar el compilador, intenta arreglar tu código sin el compilador añadido, y si aún ves problemas y si no puedes superarlo, entonces proporciona comentarios en las discusiones de GitHub, que es el grupo de trabajo del compilador de React.

Así que eso fue React Compiler. Hablemos de los nuevos hooks que vienen con React 19. Uno de los hooks que acabo de señalar fue useFormStatus, que es realmente un hook muy útil porque te da la información del último envío de formulario. Específicamente, las banderas pendientes en los datos son realmente útiles, especialmente si quieres agregar un estado de carga y si quieres extraer datos del formulario que fue enviado. Sin embargo, una advertencia de este hook es que solo se puede usar dentro de un hijo del formulario. Así que aquí en este estado, por ejemplo, tienes un formulario, y escribes useFormStatus en el mismo componente que el formulario. Esto no funcionará. Para que funcione, tienes que moverlo dentro de un componente hijo, así que lo mueves dentro de un submit, y ahora puedes agregar useFormStatus. Otro hook que también es realmente útil con formularios es useActionState, y esto es realmente útil porque puede darte un estado actualizado basado en una acción cuando se disparó una acción. Y las cosas que te devuelve es el estado, que se inicializa por el estado inicial durante el primer renderizado pero también se actualiza por los datos que se devolvieron después.

React 19 Features and Form Demo

Short description:

React 19 introduce el hook useOptimistic para actualizar la UI de manera optimista. La nueva API Use se puede usar para leer recursos, como contextos y promesas. React 19 también presenta React Compiler y React Actions. Los tres hooks principales introducidos son useActionState, useFormStatus y apisuse. Se proporciona una demostración para mostrar la diferencia entre renderizar un formulario en React 18 y React 19, junto con el uso de los nuevos hooks.

Se ve así. Tenemos un formulario. Le adjuntamos la acción, y la acción regresa del hook useActionState. Y luego hay otro hook llamado useOptimistic, que se usa para actualizar la UI de manera optimista. Actualizar la UI de manera optimista realmente significa, en caso de que no estés familiarizado, significa que digamos que tienes un botón de Me gusta. Haces clic en el botón de Me gusta. Tienes que esperar para actualizar eso en el servidor, pero mientras esperas, quieres mostrar algún tipo de actualización optimista, lo que significa que quieres mostrar que el corazón está clicado. Entonces puedes usar actualizaciones optimistas para eso. El hook useOptimistic puede ser realmente útil allí porque puede devolverte un estado optimista que se puede usar para devolver el valor combinado del estado actual con el valor optimista.

React 19 también introduce una nueva API llamada Use. Parece un hook pero no es un hook. Se puede usar para leer recursos. Recursos específicos que es realmente útil usar es context, y de hecho puedes usarlo así con el contexto que se proporciona. Súper fácil, y me parece muy práctico de usar. También se puede usar para leer promesas. Sin embargo, hay una advertencia. No se puede usar para leer promesas que se llaman dentro de Render. Así que solo se puede llamar dentro de Render, y promesas como con una biblioteca de suspense se pueden usar con Use.

Así que en resumen, ¿qué hay de nuevo en React? Hay dos características principales, React Compiler, React Actions. Tres hooks principales, useActionState, useFormStatus, y apisuse. Hagamos una demostración rápida. Tengo cinco minutos. Espero poder hacerlo dentro de ese tiempo. Así que en esta demostración, estoy tratando de mostrarte cuál es la diferencia entre renderizar un formulario entre React 18 y React 19 se verá como mientras doy un ejemplo de cómo usar useActionState, useFormStatus, y el hook de acción. Este es un formulario muy simple. Solo tiene un campo, así que si escribo mi nombre, Shruti, todo lo que hace es actualizar la UI con el nombre que se escribió, y si hago clic en Actualizar, va a simular un estado de carga que en realidad está simulando un envío de API, y solo estoy esperando 500 milisegundos, y todo lo que estoy haciendo es simplemente actualizar mi API en ese punto. Así que este es un formulario simple de React 18, así que déjame mostrarte cómo se ven los formularios en React 18 en caso de que necesites un recordatorio. Así que hay un componente de formulario aquí. Normalmente, también habrá un OnSubmit aquí, pero también puedes adjuntar un controlador onClick también y tener tu manejo de envío. Tengo exactamente un campo aquí solo para demostrar el propósito, y ahora tengo una bandera IsPending, así que la forma en que manejo la bandera IsPending en React 18 es en mi función de manejo de envío, estableceré IsPending en true, que está iniciando mi cargador, y luego falsificaré toda mi API y luego estableceré IsPending en false.

React 19 Form Handling and Data Retrieval

Short description:

React 19 introduce el hook UseActionState para manejar acciones de formularios. El hook UseFormStatus proporciona una bandera de pendiente para rastrear estados de carga y permite deshabilitar botones basados en el envío del formulario. La diferencia entre React 18 y 19 es la introducción de un nuevo elemento DOM y un atributo llamado action, que simplifica el manejo de formularios y la recuperación de datos.

Así que eso es muy simple. Así es como hacemos hooks de React ahora mismo. Así es como hacemos formularios ahora mismo. Ahora veamos cómo cambia esto si tenemos React 19.

Bien, si actualizo esto, ja-ja, no funciona porque cerré mi servidor. NPM run dev. Recarga esto. Ah, gracias a Dios. Bien, y si agrego mi nombre aquí, no hace nada. Así que lo que estoy haciendo aquí es escribir mi nombre, pero quiero enviar ese nombre, enviarlo al servidor, y luego pretender que mi servidor está enviando esos datos de vuelta a mí. Entonces, ¿cómo funcionaría eso en React 19? Formulario similar, pero un poco diferente.

Así que primero, en mi React 19, tengo una acción adjunta al formulario, y esta acción del formulario en realidad proviene del hook UseActionState. UseActionState acepta dos parámetros. Uno es la acción en sí, y el segundo es un estado inicial. Veamos qué es esta acción en sí. Así que aquí, es una muy simple. No está haciendo nada. Solo está obteniendo los datos que fueron enviados al formulario del objeto FormData, y obtengo el nombre de entrada, que es en realidad el nombre que estoy escribiendo. Luego estoy pretendiendo que esto es una API de nuevo, esperando 500 milisegundos, y luego devolviendo mis datos adjuntos con el estado anterior, que es otro parámetro que la acción SubmitForm nos devuelve. Así que estoy adjuntando PreviousState con el nombre, y luego simplemente lo estoy enviando de vuelta al cliente.

Ahora, en el cliente, en realidad en el componente RenderName, estoy buscando el estado. Voy a obtener el nombre de él, que es lo que mi acción acaba de devolverme, y todo lo que voy a hacer es simplemente renderizar eso. Ahora, hablé sobre cómo UseFormStatus también devuelve un componente pendiente, una bandera de pendiente también. Esto es realmente genial porque así es como puedo rastrear estados de carga, y también puede ser realmente útil si quiero deshabilitar mi botón basado en si el formulario se está enviando o no. Así que lo que puedo hacer es si estoy escribiendo algo y actualizo, el botón está deshabilitado. Y así es como agregar estados pendientes y estados de carga dentro de React 19. Así que para resumir la diferencia entre React 18 y 19 ahora tengo un elemento DOM llamado action, que puedo adjuntar al formulario. Tengo un atributo DOM llamado action, que puedo adjuntar al formulario. Y en lugar de rastrear actualizaciones manualmente, puedo tener el atributo pendiente que proviene de UseFormStatus. Y si necesito recibir cualquier dato basado en lo que los datos fueron enviados al formulario, puedo obtener eso de UseActionState usando FormAction.

React 19 New Features

Short description:

React 19 introduce ref como un prop, eliminando la necesidad de forward refs. useMemo y useCallback ya no son necesarios gracias a React Compiler. Ahora se pueden agregar metatags a los componentes para mejorar el SEO. Las hojas de estilo pueden tener precedencia. Los formularios reciben mejor soporte con useFormStatus y useActionState. Los componentes de servidor de React se anuncian oficialmente en React 19.

Bien. Ahora, básicamente, qué hay de nuevo y qué... Así que acabamos de hablar sobre lo nuevo. Aquí hay algunas cosas que han cambiado con React 19. Ref es ahora un prop. Eso significa que no más forward refs. Lo sé. Solía tener tantos errores en mi código debido a los forward refs, no olvidando poner forward refs. Pero afortunadamente, no más forward refs. Si alguna vez has usado ref, sabes que tendrías muchos problemas por eso. Así que ref es ahora solo un prop. Lo pasas, lo obtienes. Ya no hay más cableado necesario. Ya no necesitas usar useMemo y useCallback. React auto-memoiza el código por ti usando React Compiler.

Hay algunas otras actualizaciones. Algunas cosas de las que voy a hablar, sin embargo, es la metatag que está disponible. Así que es realmente genial, especialmente si estás haciendo, como, un sitio de blog o, como, un contenido... o, como, una página que depende mucho del SEO. Así que lo que puedes hacer es agregar metatags a cada uno de tus componentes o los componentes que necesitan metatags para que no tengas que depender de metatags que vienen de otro lugar. Así que puedes adaptar el contenido basado... puedes adaptar los metatags basados en el contenido que estás mostrando, lo cual es realmente genial para el SEO. Otra cosa que me emociona mucho es la precedencia de las hojas de estilo. Así que ahora, en lugar de tener, como, tener que recordar en qué orden deben venir los enlaces, puedes realmente dar una precedencia de defecto u ocultar a las hojas de estilo de enlace también.

Así que para recapitular, los formularios están recibiendo un mejor soporte. Finalmente, obteniendo el primer lugar que se supone que deben tener. Ahora se está volviendo más fácil manejar estados pendientes usando useFormStatus y useActionState. Ya no hay más useMemo y useCallback con la ayuda de React Compiler. Ya no hay más forward refs porque ref es ahora solo un prop. Hay otras características, como los componentes de servidor de React, que se anuncian oficialmente con React 19 como una característica estable.

React 19 Q&A

Short description:

StartTransition ahora acepta funciones async. React 19 proporciona mejor soporte para formularios y elimina la necesidad de useMemo y useCallback. El compilador de React utiliza optimizaciones de bajo nivel para la memoización. Los usuarios de Formic pueden considerar usar hooks de estado de formulario.

StartTransition ahora acepta funciones async. No tengo tiempo para repasar todas estas funciones, todas estas características, pero aquí hay una instantánea de todo lo que viene en React 19. Y haré una pausa aquí por uno o dos segundos en caso de que alguien quiera tomar una captura de pantalla.

Bien. Si todo esto te pasó por alto y estás como, soy nuevo en React, solo quiero decirte que ya no tienes que actualizar a React 19. No tienes que actualizar a Write 19 todavía. React 18 y todo tu conocimiento sobre React 18 sigue siendo válido, pero si estás buscando algo que quieras entender cómo funciona React. También tengo un curso en O'Reilly. Aquí está.

Haré una pausa aquí por uno o dos segundos en caso de que alguien quiera tomar una foto. Con eso, llego al final de mi presentación, pero no podemos irnos sin un último chiste de muerte.

Muchas gracias a todos. Entonces, primera pregunta.

Dado que los desarrolladores generalmente están acostumbrados a la interfaz actual, en tu opinión, ¿cuál es la ventaja de React 19 sobre algo como React 18 y menos u otros frameworks compilados como Svelte? Oh, buena pregunta. Creo que una de las grandes cosas que veo con React 19 es que no tengo que usar useMemo y useCallback, especialmente en aplicaciones escaladas en el trabajo. Y la razón es que cada vez que construyes un componente, tienes que pensar en cuáles son los conjuntos de datos que entran, tienes que optimizarlo manualmente, mirar los rendimientos, tienes que mirar la consola para ver cuál es la diferencia entre useMemo y todo eso. Entonces, con React Compiler, puedes hacer eso automáticamente y no tienes que preocuparte por una cosa, que es honestamente un gran dolor de cabeza que ha desaparecido.

Así que estoy realmente feliz por eso. Creo que una cosa que también me emociona mucho es cómo los formularios ahora están recibiendo un soporte mucho mejor con React 19 en comparación con React 18 y otras versiones.

Creo que esto es realmente bueno, especialmente para aplicaciones como aplicaciones basadas en formularios, algo que solía hacer mucho en PayPal, donde teníamos como 10 campos de entrada diferentes, y luego tenías que ver manualmente qué campos tienen qué datos, y era un lío con los datos del formulario y React 19 obteniendo mejor soporte para formularios, se está volviendo mucho más fácil, lo cual es algo que me emociona mucho. Sí, definitivamente. Siguiente pregunta.

¿Cuál es específicamente la diferencia entre cómo funciona el compilador y useCallback useMemo? Sí, es una muy buena pregunta. La diferencia entre React Memo y React Callback es que el compilador de React utiliza optimizaciones de bajo nivel. Específicamente, está usando un hook llamado underscore c. Es un hook interno de React que está usando para la memoización a diferencia de React useMemos.

Genial. El siguiente. Herramientas como Formic han hecho bastante sencillo trabajar con el estado del formulario en React.

React 19 Q&A Part 2

Short description:

Los usuarios de Formic pueden considerar usar hooks de estado de formulario. useNoMemo se puede usar cuando el compilador de React está optimizando el código. El futuro de React query y React hooks form se discutirá en un panel. El compilador de React mejora el rendimiento, especialmente con las dificultades de memoización manual.

¿Esperas que la gente en Formic use hooks de estado de formulario en su lugar? Oh, esa es una muy buena pregunta. No he usado Formic, así que no puedo dar ejemplos muy específicos. Imagino que autores de bibliotecas como Typeform y Formic estarían usando estos hooks internamente, por lo que probablemente no tengas que integrarte con useForm status si ya estás usando una herramienta de terceros.

Sí, genial. Veamos. Ya respondimos esta. Aquí vamos. ¿Tienes un caso de uso de ejemplo donde querrías usar useNoMemo si el compilador está optimizando mi código detrás de escena? Sí, creo que uno de los muy buenos ejemplos es que si estás usando el compilador de React y tu código comienza a romperse, ese es un muy buen lugar para comenzar a usar useNoMemo. Creo que una de las otras cosas que noté en línea que estaba leyendo es que React use effect ha estado llevando a muchos problemas, especialmente con el compilador de React, así que ese es un buen lugar para poner useNoMemo también.

Genial. Déjame limpiar algunos de estos que ya hemos respondido. Bien. Solo un segundo. Lo siento. Aquí vamos.

¿Qué significan estos nuevos hooks para el futuro de React query y React hooks form? Oh, me encanta esa pregunta. ¿Sabes qué? Vamos a llevar esa pregunta al panel esta noche. Me gusta eso. Habrá un panel más tarde, por cierto, y Shruti estará moderando, así que puedes verificar eso. Muy bien.

¿Cómo se ven las mejoras de rendimiento en React 19? Entonces, el equipo de React ha publicado un documento diciendo que el compilador de React ha mejorado el rendimiento. No sé las métricas de memoria, pero creo que lo que hemos notado es que con useMemo y useCallback, si tus aplicaciones ya están bien memoizadas, es posible que no veas una gran diferencia con el compilador de React.

React 19 Q&A Part 3

Short description:

El compilador de React mejora el rendimiento en React 19. Los valores pendientes de useActionState y useFormStatus son efectivos como el estado tradicional y confiables para usar como un componente de carga. No hay cambios disruptivos al pasar de React 18 a 19. Las dependencias de UseMemo pueden llevar a re-renderizados en efectos de uso.

Sin embargo, con el compilador de React, porque la memoización manual es tan difícil de hacer, con el compilador de React, es probable que veas más rendimiento en React 19. Espero que eso tenga sentido. Creo que sí, sí. Eso me cuadra.

El siguiente aquí. ¿Los valores pendientes de useActionState y useFormStatus... Lo siento, esta pregunta. Déjame reformularla. ¿Los valores pendientes de useActionState y useFormStatus son efectivos como el estado tradicional? ¿Podría haber latencia que permita múltiples clics de botón? Espera, di eso de nuevo. Lo sé, sí. Básicamente, déjame ver si puedo formular esto de manera diferente. ¿Los valores pendientes de useActionState y useFormStatus, son tan efectivos como el estado tradicional? ¿Habrá latencia? Oh, creo que la idea es que ¿sigue siendo confiable? ¿Es el estado pendiente confiable para usar como un componente de carga? En mi experiencia, ha funcionado muy bien, así que no tengo ninguna preocupación con eso. Genial.

Esto sería un poco más fácil de formular aquí. ¿Hay algún cambio disruptivo al pasar de React 18 a 19? Oh, buena pregunta. Hmm. No puedo pensar en nada. No puedo pensar en nada. Sí. Intrínsecamente no confío en la auto-memoización. ¿Cómo calcula las dependencias? Convénceme de que estoy equivocado. Oh, Dios. Vaya, si pudiera. Creo que una cosa que he visto con las dependencias, especialmente en los efectos de uso, es que especialmente si tienes algo que está memoizado por useMemo, a veces lleva a muchos re-renderizados, y eso ha roto algunos efectos de uso, y ha habido mucha reacción en contra. Pruébalo. Inténtalo. Eso es todo lo que puedo decir. Sí. Eso es bueno.

React 19 Q&A Part 4

Short description:

El compilador de React está usando underscore C como técnica de memoización. No está claro si utiliza señales similares a Svelte o Solid. Se desconoce si el compilador de React funciona con gestores de estado mutable como MobX. Las actualizaciones de formularios de React 19 pueden afectar la relevancia de bibliotecas como React hook form. Los roles de las bibliotecas de formularios de React pueden cambiar después de React 19, pero es mejor preguntar a los autores de las bibliotecas. Broma de Java: Java tarda mucho tiempo.

Sí. Eso es bueno. Sí. Muy bien. Mencionaste que el compilador de React está memoizando de manera diferente ahora. ¿Está usando señales similares a Svelte o Solid? En realidad está usando underscore C, que es un hook interno de React. No sé si utiliza señales.

Sí. Genial. ¿Funciona el compilador de React con gestores de estado mutable como MobX? Oh, buena pregunta. No lo sé. Sí. Sí. Yo tampoco lo sé. Bien. Veamos. Oh, alguien dijo que no.

¿Alguien dijo que no? Muy bien. ¿Ves que las actualizaciones de formularios de React 19 hacen que bibliotecas como React hook form sean redundantes? Muy bien. Otro React hook form. ¿Cómo ves que cambian los roles de las bibliotecas de formularios de React después de React 19? Vaya. Estas preguntas. Ojalá fuera un autor de bibliotecas. No puedo responder esa pregunta por ti porque no soy ese autor de bibliotecas. Pregunta a ese autor de bibliotecas. Sí. Sí. No soy un desarrollador de Java, y no entendí la broma de Java. ¿Por qué estaba cargando infinitamente? Así que la broma es toc toc. ¿Quién está ahí? Larga pausa.

React 19 Q&A Part 5

Short description:

En el ejemplo de React 19, la UI no se actualizó mientras se escribía. La diferencia entre React 18 y 19 es que React 18 usa set state mientras se escribe, mientras que React 19 se centra en el envío del formulario. No hay deprecaciones de React 18. Simular datos para el estado del formulario en Jest se puede hacer usando la biblioteca de pruebas, como React Testing Library (RTL).

Bien. En el ejemplo de React 19, la UI no se actualizó mientras se escribía. ¿Eso se habría implementado de la misma manera que en React 18? Oh. React no se actualizó. Creo que la diferencia entre lo que mostré en el formulario con React 18 y 19 fue que estaba usando como un set state para mostrarte mientras escribía. La diferencia entre eso y lo que mostré con React 19 fue que en React 19 estaba enviando el formulario. Así que puedes hacer lo mismo con React 18 también, solo una característica diferente que estaba tratando de mostrar. Bien.

Muy bien. Tenemos tiempo para quizás una o dos más. ¿Hay algo que se esté deprecando de React 18? Oh, creo que ya respondí esa pregunta. Si algo está rompiendo. Sí. Sí.

¿Cómo simularía los datos para el uso del estado del formulario en vTest o Jest? ¿Cómo simulo los datos? Jest. Sí. ¿Usar la biblioteca de pruebas? Sí, usa la biblioteca de pruebas. Sí. Muy bien. Creo que podríamos hacer una más aquí. Veamos. Vamos a encontrar una buena. De hecho, usa RTL. ¿Qué es eso? Usa RTL. React Testing Library. Oh, sí. Usa React Testing Library. Sí. Genial. Muy bien.

React 19 Q&A Part 6

Short description:

Usar nuevas características en React justo después del lanzamiento depende de la estabilidad de la versión. Mientras React está en la etapa de release candidate (RC), no se recomienda. Sin embargo, una vez que alcanza la etapa estable, actualizar formularios y proyectos secundarios a React 19 es una opción viable. Se ha observado la estabilidad de React 19 en proyectos secundarios sin problemas importantes.

¿Crees que está bien usar nuevas características justo después del lanzamiento? Oh. Creo que ahora mismo, porque React está en la etapa RC, no es un buen momento para hacerlo ahora mismo. Sin embargo, una vez que esté en la etapa estable, definitivamente estaría actualizando algunos de mis formularios a React 19. De hecho, ya he comenzado a actualizar algunos de mis proyectos secundarios a React 19. Lo veo bastante estable. No he visto ningún problema importante, así que no veo un problema.

Sin embargo, si estás en una empresa, creo que la respuesta es que depende. Realmente no puedo responder eso ahora mismo. Sin embargo, en proyectos secundarios, lo he visto bastante estable. No he visto ningún problema todavía. Genial. Una vez más, un aplauso para Shruti Kapoor. Muchas gracias, Shruti. Gracias. Gracias.

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.
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!
Guía para Desarrolladores de Aplicaciones sobre React 19: Lo que Necesitas Saber y Todo lo que Puedes Ignorar con Seguridad
React Summit US 2024React 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
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.

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