Se acerca React 19, ya está aquí una nueva versión de tu framework favorito con respeto a Vue o Angular.
No sé si será tu favorito, pero lo que es seguro es que ya llega.
Andrew Clark, para finales del 2024 va a ser bastante probable que estas APIs no las vuelvas a necesitar.
Use Memo y Use Callback y Memo, porque estas tres van a ir al compilador de React.
Forward Ref va a pasar a ser una prop llamada Ref.
React Lazy porque utilizamos los React Server Components.
Use Context pasa al Custom Hook Use.
Mandar una promesa también con el Custom Hook Use.
Con el Custom Hook no, con el Hook.
Y el Context Provider pasará a ser Context.
De hecho, por suerte, por fin, el blog de React tenemos novedades.
El 15 de febrero han puesto un nuevo pedazo de artículo con todas las cositas que se vienen.
Entre ellas vienen dos novedades importantes.
Una, el trabajo del compilador de React, hay novedades.
Y por otro lado, React 19, que además va a llegar más pronto de lo que pensamos.
Dicen que para el mes que viene.
Yo, que no soy tan optimista y no sé por qué me voy a oler mayo.
No lo sé.
Pero dicen que para el mes que viene.
Ahora os contaré.
Ahora os contaré y ahora os contaré yo porque creo que en mayo.
Pero del compilador de React, que ya lo sabéis, que van a crear un compilador para que cualquier tipo de optimización que antes hacíamos a mano,
como por ejemplo con UseMemo, UseCallback y Memo, en lugar de tener que hacerlas a mano, este compilador lo va a hacer automáticamente.
Va a detectar dónde se supone que necesitas esas optimizaciones y las va a hacer por ti.
Para que no tengas que modificar tu código, hacerlo demasiado complejo.
Esto la verdad que es una cosa que no es nueva porque es como funciona Svelte.
Svelte también funciona con un compilador.
Svelte lo que hace es que tú escribes Svelte y eso compila el código y detecta lo que estás utilizando como un estado, por ejemplo.
Y es lo que hace que sea tan interesante.
Que no tengas que tú estar pensando en ningún tipo de optimización.
¿Ves? Esto es un estado.
¿Vale?
Y si miramos aquí, tú no estás diciendo que es un estado, pero en el output, fijaos, todo lo que está compilando.
Está compilando el código.
Pues esto sería un poco la idea también del compilador de React.
¿Vale?
Además, pues otro tipo de optimizaciones, de activar algunas cositas internas y tal.
Ahora, ¿cuándo se supone que va a salir este nuevo compilador?
Yo la verdad, el compilador, por lo que he estado leyendo por aquí, por lo que he estado leyendo en Twitter, parece que va más para finales de año.
El compilador, con todas las optimizaciones y tal, de septiembre a diciembre.
Septiembre a diciembre.
¿Vale?
Ahí es donde saldría el compilador de React.
Pero antes del compilador de React, vamos a tener React 19, una versión mayor de React 19.
¿Y qué es lo que viene aquí?
Lo que va a venir primero, las actions.
Las actions es una cosa que ya sabéis que existe en NextGS.
Es una cosa que es de React, pero hasta ahora no estaban estables.
Pues vamos a tener no solo las server actions, sino que también vamos a tener acciones también en la parte del cliente.
Esto es bastante interesante, pues para que los formularios tengamos aquí una action y aquí directamente pueda llamar a un método.
Si es una React Server Component, se va a ejecutar en la parte del servidor, pero también vamos a tener la oportunidad de hacer con client side, por si no utilizamos en el servidor.
Y nos va a proporcionar unos hooks que son el UseFormStatus y UseFormState, donde vamos a poder acceder tanto al estado como la respuesta de la acción del formulario.
Así que ahí tendríamos eso.
También vamos a tener un nuevo hook que se llama UseOptimistic, que es para actualizaciones optimistas.
¿Qué significa optimizaciones optimistas?
Pues esto se utiliza un montón en las UIs.
Por ejemplo, en Twitter, me voy a mi perfil, imaginad que no tengo internet.
Voy a desactivar aquí internet, voy a poner offline.
Pero fijaos que si tú le das like aquí, una actualización optimista significa que primero va a cambiar visualmente el estado del botón y luego va a intentar actualizarlo en el servidor.
Y una vez que en el servidor lo actualiza o no, entonces volverá a cambiar la UI.
Si por lo que sea, pues ya ha funcionado bien, ha sido optimista, pues ya dejará el like.
Y si no, lo que hará es quitarle el like.
Mira, le doy, ¿vale?
¿Veis que lo primero que ha intentado es darle el like y como peta, pues entonces ya lo vuelve a quitar?
Mira, lo voy a poner con Slow3G para que lo veamos.
Le voy a dar like, ¿vale?
Primero pone el like y fijaos que esto todavía no había terminado.
O sea, visualmente hemos visto que tenía el like y luego lo que ha ocurrido es que cuando ha visto que sí que el like se tenía que quedar, pues lo ha dejado.
Pero si por lo que sea, y aquí lo mismo si se lo quitamos.
Primero lo quita y luego, y esto está pending todavía, y hasta que no termina no confirma el estado interno.
Esto sería una actualización optimista.
Primero, lo que hacemos es actualizar lo que es visual, porque así le damos la sensación al usuario que es súper rápido.
Esto en todas las redes sociales, en todas las cosas que utilizáis, incluso en chats, esto funciona así.
Primero lo veis visualmente y luego es que lo hace en el servidor.
Y si ha ido mal, pues lo quita o te lo indica.
Y si ha ido bien, pues ya lo deja ahí porque ya lo tiene súper bien, ¿vale?
Así que eso serían actualizaciones optimistas y vamos a tener justamente un custom hook, hay un custom hook, un hook, es que no es custom, es un hook en el que básicamente nos va a ayudar con todo esto para poder revertir el estado en el caso de que haya ido algo mal.
Luego más cositas tenemos, las directivas que ya hemos conocido, la de use client y use server, que esto está pensado para full stack React frameworks como Next.js, como Remix y todo esto, ¿vale?
Estas directivas nosotros en nuestro día a día no las vamos a utilizar a no ser que no utilicemos un framework.
Pero ojo, que esto sí que es de React y esto va a ser una novedad brutal de React 19.
Y es que por fin, parece mentira, pero por fin vamos a tener soporte de primera clase para etiquetas de el head.
Por ejemplo, con title, con meta y con link.
Las etiquetas title, meta y link las vais a poder utilizar en cualquier sitio de la aplicación de React
y va a actualizar pues el estado de la etiqueta en el head.
Por ejemplo, el title lo podéis cambiar en un componente y va a cambiar el title de la pestaña.
Esto hasta hace poco tenías que utilizar bibliotecas de terceros como React Head y cosas así.
O por ejemplo, claro, con Next.js, con los frameworks no había ningún problema.
Pero esto es una mejora sustancial.
Primero, porque ya no tenemos que depender de un framework para que lo haga,
porque simplifica el trabajo interno de los frameworks y porque no tenemos que utilizar ninguna biblioteca.
Hasta ahora, por desgracia, tenemos que utilizar, por ejemplo, React Head o React Helmet.
¿Vale? React Helmet, que es el más famoso.
React Helmet.
Que además, está curioso porque React Helmet es una biblioteca de la NFL.
No sé si lo sabíais.
La NFL es la liga de rugby o de fútbol americano de Estados Unidos.
Pues es de la NFL.
Era bastante curioso.
Pero ya casi no se actualizaba y veis esto, que tenías que utilizar este componente y tal.
Pues esto ya no lo vamos a tener que utilizar más porque de forma totalmente nativa lo va a tener React.
¿Vale?
Los document metadata.
Lo mismo para poder cargar tanto scripts externos, estilos, links.
Aquí lo tenéis.
Esto lo que va a hacer es que vamos a poder utilizar elementos.
Por ejemplo, un script de terceros lo vamos a poder cargar en un componente.
Y vamos a poder, utilizando Suspense, esperar a que cargue.
Esto lo que nos va a permitir es poder cargar de forma asíncrona dependencias.
Por ejemplo, Google Maps.
Imagínate, necesitas un componente de Google Maps.
Podrías cargar el script de Google Maps dentro del componente del mapa.
Y hasta que no cargue este script, no mostrarlo.
Y todo con un control interno del componente de React.
Mucho más fácil y mucho más fácil, o sea, mucho más sencillo de mantener.
Y tendríamos la nueva versión de React 19.
Parece ser que también van a quitar algunas cositas que están todavía por ahí.
Y este sí que dicen que podría llegar en los próximos meses.
Lo pone por aquí, ¿eh?
En los próximos meses.
En los próximos meses, por lo que he estado leyendo en Twitter, por lo que iban comentando por aquí,
porque lo aclaraba Andrew Clark en un tuit en el vídeo este de CIO,
decía que React 19 aparecerá con suerte dentro de un mes.
El compiler todavía faltará más.
Dentro de un mes, pues eso, nos deja en marzo.
Yo creo que en marzo no van a llegar porque siempre hay cositas que se complican un poco.
Y yo creo que, teniendo en cuenta que la React Conf es en mayo, el 15 de mayo,
no me extrañaría que la React Conf 2024 es en mayo,
pues que igual esperen para también un tema de hype.
No lo sé, pero no sería la primera vez que pasa que retrasan una versión para que el hype se una con la presentación de las charlas,
de todas las cosas nuevas que se puedan hacer y tal.
Así que igual puede ser en el abril.
Otra cosita interesante, ¿vale?
Que llega a la versión 19.
Y es que en React 19, además de que va a haber algunos breaking changes que hace tiempo que están esperando,
como quitar los ref, que son strings, ¿vale?
Que son muy antiguos.
También van a tener cambios en el soporte de los web components.
Que ya sabéis que los web components, pues a día de hoy en React, funcionar, funcionan, más o menos.
Pero no tienen el soporte que se espera.
De hecho, hay una página que ahora no sé, no encontraré la página.
Hay una página que te explica cuánto soporta cada uno de los frengos, ¿vale?
Por ejemplo, cuánto soporta Angular, Vue, React, trabajando con los web components.
Y en el caso de React es el que menos tiene, ¿vale?
Es el que menos tiene de lejos.
¿Por qué?
Porque el tema de los eventos, el tema de las integraciones de los atributos,
cuando cambian y todo esto, no funciona del todo bien en React.
Bueno, pues eso parece ser, no sé si lo van a arreglar del todo, pero lo van a mejorar.
Lo cual yo me alegro bastante las cosas como son, porque lo necesitamos.
Así que ahí lo tenemos.
Angular está inspirado en web components, lo soportamos.
Sí, no, hay un TikTok que lo explica.
No, hombre, pero no un TikTok, sino que hay una página que te dice el tanto por ciento
de las funcionalidades que soportan los web components.
Este es el que os comentaba.
Mira, claro, con el experimental ya está pasando al 100%.
Con el experimental.
O sea, que esto es lo que se viene, que va a tener un 100% de posibilidades.
O sea, que me encanta.
Mira, y Angular se quedan 14...
Ah, no, Svelte, Svelte, perdón.
Angular también, Angular el viejo.
Pero no, el Angular luego, bien, bien.
Vale, vale.
Oye, pues muy bien, ¿eh?
O sea, que React se va a poner ahí...
Se va a poner...
Se va a poner al día.
Cosa que me alegro la cosa, ¿eh?
Os doy malas noticias, eso sí.
Os doy malas noticias porque no todo va a ser bueno.
Un poquito también, pues como lo que comentaba el chico este, ¿no?
Decía por aquí, alguien le ponía aquí, oh, para 2024 dejarás de utilizar React.
Puedes irte del culto.
Puedes irte del culto.
Como, deja React, está mal.
Bueno, a ver.
Pues, por ejemplo, Andrew dice, pues mira, hay gente que a lo mejor...
Bueno, es su trabajo, ¿no?
Hablar de esto.
Pero sí, a lo mejor hay otros que dejan el culto, ¿no?
Andrew, pestañeas dos veces si quieres escapar.
La verdad es que no sé, no sé la verdad.
El tema del culto, te puede gustar más Vue, te puede gustar más Angular y tal,
pero no entiendo muy bien el hecho de...
Es que he visto muchos comentarios aquí de gente cabreada, de...
¿Por qué nos pasáis a Vue, no sé qué?
Pero sí es que hay un montón de mercado para todo.
No sé por qué...
¿Qué queréis?
¿Que no se actualice más React y desaparezca?
Pues está bien.
Pensad que hace dos años que no se actualizaba.
De hecho, hay otro comentario que me sorprende un montón,
que es bastante impresionante,
que lo vais a ver por aquí.
Lo que estoy escuchando es que este framework cambia tan rápidamente
que sería una pérdida de esfuerzo aprenderlo
y usarlo en proyectos de producción
introduciría una duda técnica inmediata.
Hostia, la verdad, esto me ha sorprendido mucho este comentario
porque, coño, React hace dos años que nos saca una Major.
Me ha sorprendido.
De hecho, tenemos aquí.
La última salió en 2022, en marzo del 2022.
O sea que la próxima Major van a ser dos años.
Es un poco curioso.
Me imagino que es un comentario un poco de hate.
Pero bueno, aquí le he comentado bastante a Andrew que le dice,
bueno, sinceramente no ha cambiado mucho.
Y al fin...
Creo que se refiere a NextGS.
Ya, pero se está hablando de React.
O sea, esto es de React.
No tiene nada que ver con NextGS.
La gente es verdad que muchas veces confunde React con NextGS
y a lo mejor ya lo están mezclando.
A lo mejor lo que decíamos a veces, ¿no?
Puede tener sentido esta confusión
y puede ser culpa de que no ha estado bien el marketing.
Puede ser.
Pero me parece un poco raro.
Una cosa es que os digo, ¿eh?
Que aquí hablan también de los signals.
¿Qué tal sobre los signals en React?
Y ojo, Andrew Clark dice,
quizás un día vi al compilador.
Hostia, me ha sorprendido la respuesta.
Yo pensaba que iba a decir directamente,
no vamos a añadir signals.
Pero ojo, porque Andrew dice que quizás un día
a través del compilador.
Bueno, sorprendente, ¿eh?
Las cosas como son.
Y luego, ojo con esto que me ha sorprendido mucho
relacionado con React.
Es MillionLint.
Million, que ya hemos hablado de esto alguna vez,
es una biblioteca que lo que hace es cambiar
el Virtual DOM de React por otro propio
para hacer tu aplicación de React un 70% más rápida.
Hasta un 70% más rápida, ¿vale?
¿Qué pasa?
Que lo malo de Million es que tenéis que hacer
este cambio manualmente.
Aunque están trabajando en cosas para automatizar esto,
que te haga la pull request manualmente y tal, ¿no?
Bueno, pues resulta que entre las diferentes cosas
que están trabajando,
han anunciado que el 29 de febrero
van a sacar una extensión de Visual Studio Code
que se llama MillionLint,
que lo que va a hacer directamente es detectar,
¿ves cuántos renders se están haciendo?
¿Por qué se están haciendo estos renders?
Y me imagino que también mejorar el rendimiento.
O sea, te va como a chivar,
oye, este componente se ha renderizado tantas veces,
¿por qué se está renderizando?
Y el hecho de que además, oye,
puedes mejorar el rendimiento haciendo esto.
Me parece muy interesante
y muy buena idea el hecho de hacer una extensión
directamente en el editor para que te chive este tipo de cosas.
Así que una novedad muy chula.
Mataron a Million con React 19.
Hombre, todavía, hasta que no saquen el compilador,
yo creo que todavía faltará, ¿eh?
Con el compiler, ya veremos,
pero yo creo que ni siquiera con el compiler, ¿eh?
Porque, o sea, el compilador,
la idea es que haga optimizaciones
con los hooks que ya existen,
pero el hecho de cambiar el código no lo va a hacer.
O sea, que ya veremos, ¿eh?
Yo creo que por ahora todavía tiene mercado por delante.
Mido el rendimiento de React
no solo la cantidad de renders de un componente,
o sí, no es solo eso, pero es importante.
Cuantas más veces se renderiza
de forma innecesaria un componente,
más tiempo gastado tienes.
Entonces, siempre lo que vas a querer
es intentar renderizar el componente
el mínimo de veces necesario.
Porque, claro, cuanto más lo renderizas,
pues estás perdiendo el tiempo
y, por lo tanto, estás perdiendo evaluación de JavaScript
que podrías estar haciendo otra cosa.
Solo que haces que se bloquee el JavaScript
y cosas y cosas así.
Entonces, ¿el compilador es interesante?
Hombre, es muy interesante el compilador de React.
Habrá que ver hasta qué punto.
¿Tu opinión del compilador?
¿Cuál es tu hot take?
Mi hot take es que el compilador...
Es que llega tarde.
O sea, ese es mi hot take.
Es que llega tardísimo.
Yo creo que es muy buena idea
el hecho de...
En lugar de que la gente tenga que utilizar
los hooks de Use Callback, Use Memo,
que hacen que el código sea demasiado complejo
de entender,
que React tenga un compilador
como ya lo tiene Svelte,
que automáticamente te haga las optimizaciones.
A mí me parece un acierto
y que creo que hubiera ayudado mucho
a evitar mucha complejidad accidental
que ha tenido React.
Yo creo que hubiera sido bastante interesante.
Eso es bastante gegebenaby.
Y...
Y...
Y...
Y...
Y...
Y...
Y...
Y...
Y...
Y...
Y...
Y...
Y...