Everything new in React 19

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.

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.

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.

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.

¿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.

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.

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.

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.

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.

¿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.

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.

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.

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.

¿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.