React 19, hacía dos años que no teníamos una versión nueva de React, específicamente la última versión fue en 29 de marzo del 2022 y esto la verdad es que viene también a debatir, mucha gente se queja de que hay muchos cambios en el mundo del frontend y todo esto,
pero la realidad es que si tú quieres y utilizas una tecnología bastante estable como lo es React, fijaos que han pasado dos años hasta que hemos tenido una nueva versión mayor con realmente muchos cambios y viene con cambios bastante interesantes,
así que vamos a echarle un vistazo porque tenemos nuevos hooks, nuevas APIs, nuevos añadidos, optimizaciones, performance y algún breaking change que tienes que saber,
así que React 19, esta nueva versión que ahora no está en beta, está en release candidate y muy pronto va a estar ya estable, o sea, si no es esta semana va a ser muy pronto,
vamos a revisar todas las novedades y vamos a probarlas, por encima vamos a hacer un repaso rápido del what is the new, pero no te preocupes, no te preocupes porque obviamente lo que vamos a hacer es revisarlas todo con ejemplo y todo esto,
tenemos por un lado los actions, los actions que esto lo que sería es que cada vez que quieres hacer una mutación de datos, mutación de datos o que mutación de datos quiere decir insertar datos,
modificar datos, eliminar datos, que esto normalmente se hace a través de un formulario, pues vamos a ver que ahora tenemos nuevas herramientas para poder hacerlo mucho más fácil sin necesidad de tener un montón de estados,
un montón de métodos y que nos lo va a simplificar mucho, así que esas serían las acciones, importante, las acciones, las acciones en React, dentro del mundo de React,
las acciones serían simplemente cualquier función que es asíncrona y dentro utiliza lo que se le llaman transiciones, luego te explicaré que son las transiciones,
pero es cualquier función que sea asíncrona que te puedas hacer a la idea, que actualiza un estado y que llama a una API externa para hacer cualquier cosa
y que eso te debería devolver algo para actualizar la UI, eso sería una acción, es importante que entiendas que estos son acciones porque te puedes liar,
de que es una acción, que esto, que a lo mejor en otro framework le llaman actions a otra cosa o las GitHub actions o lo que sea, dentro de RIA cuando hablemos de acciones es eso,
funciones que utilizan transiciones asíncronas, transiciones es que actualizan estados, que llaman a APIs externas y que deberíamos volver a renderizar con estos nuevos datos la UI,
eso sería un poco la idea, no tiene nada que ver con el término de Redux, que también se utilizaba un montón, pero ya no tiene nada que ver,
tenemos nuevos hooks, como por ejemplo Use Optimistic para hacer actualizaciones optimistas, que también lo vamos a ver,
tenemos el Use Action State para simplificar la creación de estas acciones y esto nos viene con una nueva prop que podemos utilizar en los formularios
que se llama Action, en lugar de hacer un OnSubmit vamos a poder hacer un Action y llamar a estas acciones, otro error muy típico,
tened en cuenta una cosa, hoy vamos a hablar de React, de React, no de Next.js, no de Remix, no de ningún framework que utilice React, utilizamos React,
React es una biblioteca que al final lo que tiene es un montón de APIs, de hooks y también tiene alguna jerga que puede entrar en colisión
con otras que utilizan algunos frameworks, entonces las acciones que vamos a ver hoy no son Server Site, quiere decir que estas acciones las podéis utilizar
en vuestros componentes de cliente, de hecho hoy lo vamos a ver, lo vamos a poder utilizar sin necesidad de hacer absolutamente nada de si es cliente, si es servidor y tal,
en Next.js resulta que también utilizan acciones y se pueden ejecutar en el servidor, tiene otras ventajas, pero hoy no las vamos a ver
porque vamos a utilizar React a pelo y es para que entiendas que también en el cliente las puedes utilizar sin ningún problema.
Más cositas, tenemos el Use Action State, este nuevo hook que es el que te estábamos comentando, que las forms, ahora podéis utilizar estas acciones
con esta nueva prop, Action, otro hook llamado Use Form Status, este nuevo hook lo que hace, es muy interesante, puedes recuperar cuál es el estado
que tiene el formulario padre, ¿vale? O sea, tú tienes un componente y puedes decir, vale, está el formulario, está enviando la información,
qué datos tiene el formulario y todo esto, sin necesidad de pasarle las props. O sea, lo vamos a ver en código después, si tienes alguna duda
no te preocupes porque con código lo vas a entender bien. Pero esto lo que quiere decir es que en lugar de tener que pasar props
hacia abajo a tus componentes, utilizando este hook que ya nos da React DOM, vamos a poder saber si el formulario padre
está en un estado pendientes, qué datos tiene todo el formulario y esto es muy útil como vamos a ver.
Así que no os preocupéis. Y el hook de Use Optimistic que está muy chulo, vamos a ver un ejemplo muy bueno
que está súper bien para que entiendas exactamente por qué es esto de que es optimista, ¿vale?
Cuando veáis el ejemplo lo entenderéis. Aparte de todo esto, tenemos una nueva API. No es un hook, no hay que confundirlo
con un hook. ¿Por qué? Porque esto, que parece un hook y es que, claro, empieza como Use y tal, fijaos que ellos mismos
dicen que es una nueva API. ¿Por qué no le llaman hook? También lo vamos a ver en código, pero no le llaman hook
porque lo que te permite es hacer más de una cosa diferente, que es leer un recurso, que puede ser una promesa,
puede ser un contexto. Vamos a ver los dos ejemplos. Pero no solo esto, sino es que además
no sigue las mismas reglas que los hooks. Lo puedes utilizar en condicionales, puedes utilizarlo,
cambiar el orden en el que se llaman, se puede cambiar un montón de cosas. Por eso no le llaman
un hook. Porque no está siguiendo las mismas reglas que los hooks. Y por eso le llaman una API,
una API, como queráis decirle, ¿vale? ¿Qué más teníamos? Bueno, los React Server Components,
que estos sí que necesitaríamos un framework o hacer otro tipo de cosas, que hoy no lo vamos a ver
porque ya os digo que como necesitamos Next.js o Remix o hacerlo muy desde cero, que no descarto
que un día hagamos nosotros nuestro propio framework para que veáis cómo se utilizarían, ¿vale?
Luego tenemos refasa prop. Esto sí que lo vamos a ver para que dejéis de utilizar el forward ref
y vais a ver para qué era útil el forward ref. Y algunas mejoras de errores y tal.
Esto también lo vamos a ver. El context como provider. Vamos a ver un ejemplo.
Cositas interesantes que vamos a empezar por este. El soporte para elementos del document metadata.
Por ejemplo, poder cambiar el título, el meta, el link, cargar CSS o scripts dentro de nuestros componentes.
Esto lo vamos a ver ahora, en un momentito. Y poder cargar estilos desde dentro de un componente.
Esto lo hace súper, súper interesante. Tiene un montón de cositas nuevas, como podéis ver.
También hacer el preloading de algunos recursos, de imágenes, de JavaScript, de lo que queráis dentro del componente
utilizando estos métodos preinit, preload, prefetch, preconnect. Porque muchas veces esto no lo podéis poner todos
dentro del HTML. Sino que lo que queréis es dentro del componente decir, vale, cuando este componente se cargue
entonces quiero que precargue esta imagen porque la vamos a utilizar. También vamos a ver un ejemplo
así que tampoco os preocupéis que va a estar esto clarísimo. Vale, pues esto sería un poco todas las novedades
un poco así por encima. Pero ya os digo yo que lo que vamos a hacer es crear nosotros un proyecto
y vamos a ir viendo algunos ejemplos, ¿vale? Así que vamos aquí. Nos vamos a crear el proyecto
de BitLatest. Lo vamos a hacer todo desde cero. React19 nuevo o... Bueno, nuevo React19, vamos a poner.
O clase React19. Clase React19, ¿vale? Empezamos por aquí. Ahora aquí nos pregunta, Bit al final es un empaquetador
de aplicaciones que nos permite crear aplicaciones web de diferentes sabores. Puede ser Vanilla, sin ningún framework,
Vue, React, React, Lit, Svelte, el que queráis. Nosotros vamos a decir React. Vamos a utilizar JavaScript con SWC.
No vamos a utilizar TypeScript para no mezclar cositas. Vamos a utilizar JavaScript. Y SWC sería para utilizar
el compilador de Rust, que es un poquito más rápido. Así que le damos. Entramos en la clase React19.
Vamos a instalar todas las dependencias. Y ya levantamos aquí nuestro proyecto. ¿Ok? Y nos vamos a 5.1.73.
Bueno, este es el proyecto típico que siempre tenemos y que siempre se ve exactamente igual.
Más o menos dentro de Source tendríamos todos los componentes. El que se está renderizando en este caso
es el de App. Vamos a limpiarlo. ¿Vale? Vamos a dejar solo la imagen este de React dando vueltecitas.
Todo esto lo quitamos. Vamos a dejar solo este componente. Por ahora vamos a quitar todo lo demás.
Y también, para que podamos ver rápidamente que todo funciona bien, vamos a instalarle el linter.
Bueno, veo que tiene un linter ya. Tiene un linter, pero bueno, es un linter que no está completo.
Porque veo que sí que le añade aquí como un montón de reglas. Vamos a instalar el linter que a mí me gusta,
que es sin punto y coma. Y que ya te formatea un montón de cosas. ¿Vale? Se llama estándar.
Lo ponemos menos de, como una dependencia de desarrollo.
Y cuando lo tengamos por aquí, yo voy a poner aquí, barra, no modules, estándar, estándar, estándar,
el link de rcjson. ¿Vale? Y con esto, vale. Ahora sí que ya me lo está formateando correctamente.
Fíjate que lo único que he hecho es instalarlo, añadir esta línea y ya lo tenemos.
Y ahora, del CSS, voy a quitar un montón de cosas que tiene por aquí, todas estas cosas que tenemos por aquí.
Y del CSS este, también vamos a quitar cosas. Veo que aquí el h1, todo esto lo vamos a quitar.
Tampoco lo vamos a necesitar. Así que todo esto, fuera. Vamos a ver cómo ha quedado.
Bueno, ha quedado aquí un logo y ya está, ya está. Súper fácil. Vale.
Como no quiero perder tiempo con estilos, te voy a explicar lo que vamos a hacer.
A mí hay un framework que se llama CSS Framework Classless, porque no utilizas clases.
Pico CSS es uno de mis favoritos, que lo que hace es ponerte unos estilos lo suficientemente bonitos
para que no dé vergüenza lo que estás haciendo. Y vamos a utilizar este.
Para esto, hay diferentes formas de hacerlo. Nosotros vamos a simplificar, vamos a utilizar el CDN.
Y para utilizar el CDN, nos vamos al index.html, que sería como el archivo index que carga,
que tenemos el título. Aquí podemos poner diferentes metadatos. Vamos a poner este.
Y también vamos a ponerle el color scheme este. Vamos a poner el color scheme para que sea todo siempre oscuro
y no nos haga cosas raras. Y con esto, ahora no vemos ninguna diferencia, pero si ponemos al menos aquí,
por ejemplo, H1, vamos a poner Hola React 19. Pues ya tendríamos aquí unos estilos.
Y si lo ponemos más pequeño, ¿vale? Se hace más pequeño el título. Ya no es completamente blanco,
sino que tiene un gris. O sea que ya tiene unos estilos un poco para dejarlos más bonitos.
Bueno, ya lo hemos dejado todo listo, pero ahora viene lo importante.
Y es que, amigos, hay que tener en cuenta una cosa. Si nosotros miramos aquí la versión,
que esto igual no lo sabías, que esto está interesante, porque de React podéis importar la versión.
Y entonces podéis mostrarla aquí. Podéis decir, venga, a ver qué versión es.
Podéis renderizar la versión de React que estáis importando. ¿Ves? Y ahora mismo la versión es la 18.3.1.
No es la versión que queremos. La versión que queremos es la 19.
Hay diferentes formas de intentar utilizar la versión 19, pero ya os digo yo cuál va a ser la correcta.
Podéis intentar hacer en pnpminstall, React 19 y también React DOM arroba 19.
Pero esto no funciona. No funciona porque fijaos que todavía no han publicado la versión 19.
Si no, tenían un montón de problemas al respecto.
Pero fíjate que sí que dice las versiones que, digamos, todavía no son estables y sí que están aquí desplegadas.
Fijaos que tanto la Next como la RC son la misma.
Tendríamos la Beta, que es como anterior, y la Experimental, que no te la recomiendo,
aunque se utiliza muchas veces para frameworks y tal.
Lo más normal es que la última que no es estable sea la Next.
La Next. Es como la próxima versión, que todavía no está.
La última estable sería la Latest.
Por ejemplo, si nosotros ponemos Latest, esto nos instalaría la 18.3.1.
La Latest es la que se instalaría por defecto si tú no le pones ninguna versión.
Pero nosotros vamos a querer la Next.
Así que vamos a poner Next.
¿Vale?
Pnpminstall Next.
Fijaos que me ha quitado tres paquetes, me ha instalado otros.
¿Ves? Me ha quitado la 18.3.
Y nos ha dejado la 19.00.
RC, bla, bla, bla.
RC de Release Candidate.
Y esto es como, bueno, un hash que le ponen para evitar que haya...
Para poder publicar encima una nueva versión y ya está.
Si ahora renderizamos otra vez esto...
Bueno, veo que, claro, se ha quedado ahí como en pajaritos.
Vamos a tener que reiniciar para ver si lo pilla ahora bien.
¿Vale?
Fíjate ahora.
Hola, RIA 19.00.
Ahora ya tenemos la versión buena.
Ahora sí que empieza a tener cosas interesantes.
Pero no vamos a enseñar esta versión tan rara aquí.
Lo vamos a poner, si os parece, un poquito más pequeño.
Vamos a poner aquí un small.
¿Vale?
Para poner la versión S.
Y así podremos ver en todo momento que estamos en la versión correcta.
Que no estamos haciendo ninguna cosita rara.
¿Vale?
Font size.
Vamos a poner 10 píxeles.
No voy a instalar ni Tailwind.
Nada, nada.
Quiero que los estilos sean lo mínimo posible.
¿Vale?
Hola, RIA 19.
¿Vale?
Ponemos esto por aquí.
Y ya está.
Aquí, espérate, porque este...
Si no, me va a quedar muy separado.
Pero le pongo que no me ponga ninguna cosita de estas y ya está.
¿Vale?
Hola, RIA 19.
Ya tenemos la versión 19.
Hasta aquí bien.
Vamos a empezar a ver algunas de las novedades que tiene RIA 19.
¿Vale?
¿Usarás el compiler?
No.
¿Por qué?
Y esto es muy importante porque mucha gente se confunde.
El compiler no es parte de RIA 19.
¿Vale?
Hay un error muy común que veo constantemente.
Que mucha gente habla como que el compilador de RIA, que va a ser muy interesante,
es parte de RIA 19.
No lo es.
No tiene nada que ver.
¿Vale?
A ver, no tiene nada que ver.
Tiene que ver con que es RIA.
Pero el compilador es una parte totalmente separada.
Que no tenéis por qué utilizar.
Que la idea será que la podáis utilizar también con RIA 18.
Digamos que sería una transformación que viene totalmente por separado.
¿Vale?
Entonces no tiene que ver con RIA 19.
Saldrá RIA 19 y a lo mejor el compilador no sale.
¿Ok?
Es algo totalmente aparte, para que lo tengáis en cuenta.
Así que no lo mezcléis porque yo he visto muchos sitios que la gente dice
es que viene con el compilador nuevo.
No.
No viene con el compilador nuevo.
No viene con eso.
El compilador es una herramienta aparte que servirá para optimizar
cualquier aplicación de RIA 19.
Pero también la idea es que sea compatible con RIA 18, por ejemplo.
¿Vale?
Así que importante con esto.
Entonces, vamos a ver las cositas nuevas.
Se venden por separado.
Efectivamente.
Esa sería la idea.
Es un accesorio.
Bueno, pues entre las cosas nuevas, una de las cosas más interesantes es que fijaos
que cuando estamos aquí tenemos este título.
Esto es uno de los errores más típicos que veo en muchos portafolios, en proyectos que
hace la gente con RIA, que deja el título original.
Normalmente, el título original lo podéis cambiar, obviamente, en index.html.
Y aquí podéis poner lo que queráis, ¿no?
Hola, RIA 19.
Lo podéis poner aquí y ya está.
¿Cuál es el problema de esto?
Claro, el problema de este título es que no es dinámico.
Y por lo tanto, pues no lo podríais cambiar aquí.
Si lo queréis hacer dinámico, una cosa que podríais hacer sería aquí, pues podríais poner un use effect, ¿no?
Normalmente, antiguamente, lo que se hacía sería document title o la RIA 19.
Y aquí podríais hacer lo que fuese dinámico.
Podríais ir cambiando el document title cada vez que cambia cualquier cosita de aquí, por ejemplo.
¿Veis?
Ahora este título ha cambiado.
Y podríamos hacerle un contador, esto como se haría antes, ¿no?
Set count, use state 0, ¿vale?
Imaginad que quiero decir, vale, quiero tener aquí un botón que cada vez que haga incrementar, pues vamos a poner, vamos a empezarlo en 19.
19.
Vamos a poner aquí la versión.
No, el count.
Vamos a poner el count.
Y cada vez que cambia la versión, entonces vamos a cambiarle el estado.
Un clic, ¿vale?
Set count.
¿Vale?
Ah, esto es el count.
Y ya está.
Lo bueno de esto es que ahora, cada vez que le damos a incrementar, yo le doy a este botón y va cambiando el título, ¿no?
Esto es como funcionaba hasta ahora para hacer esto de forma manual.
Si no, ¿qué es lo que había que hacer?
Utilizar React Helmet, diferentes bibliotecas para tener componentes para cambiar la cabecera, el título, la descripción de nuestra página.
Esto ya no tiene sentido, ¿vale?
Todo esto ya nos podemos olvidar, amigos.
Y es que desde React 19 vamos a poder utilizar directamente el title aquí.
Hola React 19, ¿vale?
Podemos utilizar tanto el title como la descripción, cualquier meta que os haga la idea, por ejemplo, un Fabicon, el Fabicon que queráis, todo esto lo vais a poder hacer.
¿Veis?
Ya tenemos aquí el título.
Pero es que si nos ponemos a inspeccionar, vais a ver que aquí en la cabecera también tenemos la descripción.
¿Veis?
El metaname description también lo tenemos aquí.
Y lo que es más interesante todavía, pero un poco problemático, porque, a ver, amigos, tengo una mala noticia.
Una cosa que he visto en un montón de ejemplos que está mal.
Y es que, fijaos, si aquí en Hola React le vamos a pasar la versión, esto no funciona.
Esto que veis aquí, esto no funciona.
¿Y por qué no funciona?
Vamos a verlo.
Fijaos que ahora el título no se está renderizando.
No nos ha dado ningún error, pero no funciona.
Y lo que está pasando es que el elemento title no acepta este tipo de evaluaciones.
Lo que tenéis que hacer es siempre pasarle una cadena de texto.
Así que vamos a pasarle una cadena de texto y dentro sí que hacemos una evaluación de la versión.
Solo con este cambio, ¿vale?
Ahora veréis que sí que funciona correctamente.
Ahora está poniendo la versión y tal y ya está.
O sea, sí que acepta aquí contenido dinámico que puede venir de las props, puede ser un estado, puede ser lo que queráis.
Lo podéis cambiar tantas veces como os dé la gana y se va a actualizar sin ningún problema.
Pero tened en cuenta que siempre tenéis que pasar una cadena de texto y dentro tenéis que evaluarlo.
No podéis utilizarlo como sería de la otra forma.
La verdad, sinceramente, me parece un error.
Me parece un error muy bestia porque no entiendo qué dificultad tenía en hacerlo de la otra forma.
Pero bueno, que sepáis que tenéis que pasarle siempre una cadena de texto.
¿Qué utilidad tiene esto en Client Components?
Bueno, Scanner Dev.
Esto es normalmente, este tipo de pregunta es porque es una...
Es como no se tiene nunca una visión completa de cómo se utiliza React.
No todo el 100% de la gente utiliza serverless rendering ni utiliza Next.js.
Por ejemplo, hay un montón de dashboards o back offices que no tienen ningún tipo de necesidad de utilizar serverless rendering.
Pero eso no significa que no quieran tener el título, la descripción o todo esto.
Entonces, en lugar de necesitar utilizar un framework, pues a lo mejor ya que React tenga este tipo de soporte, es una muy buena noticia.
Pero además de esto, además de esto, también se puede utilizar para serverless rendering, que es lo que lo hace todavía más interesante.
Y es que aquí, aunque no...
Aquí no lo...
Claro, si utilizo el server, no sé si esto funcionará.
Server.node.
A ver si lo puedo...
A ver si podemos hacer import...
A ver...
React.dom.server.node.
Es que claro, es que no es .node.
Entonces no sé si nos va a permitir hacer...
Tttt.
App y el servidor.
A ver si vamos a poder render to string.
Render to string.
No es compatible con transmisión de streaming.
Bueno, vamos a ver si me deja hacerlo, ¿vale?
Vamos a ver si igualmente nos deja hacer render to string para que lo veáis.
Vale.
Render to string.
render to string, vamos a pasarle la app
y vamos a hacer un console log de esto
al menos para que lo veáis
vale, a ver si no peta
ah pues no, mira, funciona
vale, pues lo interesante de esto es que estos elementos
que estáis viendo, title, meta, link
y tal, esto también
funciona en la parte del servidor
o sea, con Next.js ya
lo teníamos solucionado, pero esto es una cosa
muy interesante porque ahora los nuevos frameworks
que salgan, van a poder aprovecharse
de estos nuevos elementos
y si os fijáis por aquí
vais a ver, ¿veis este title?
o sea, que también se va a renderizar en el servidor
lo va a detectar perfectamente, o sea, que no solo
es para los clientes, que lo es
sino que también va a ser útil para el server
rendering que pueda hacer cualquier framework o
incluso vosotros de forma manual
así que es un añadido para React
para todo el mundo, para
la parte del cliente, para que lo sepáis también, vale
y claro, Next ya lo tiene solucionado
pero quién sabe si el día de mañana otro framework
pues lo solucionará así, de forma
nativa, lo cual hará que tenga menos código
muy buena noticia, vale
pues aparte de esto, ya tendríamos el title
ya hemos visto el meta, pero os tengo que avisar
de una cosita más del title, ¿vale?
el title es un poco, no peligroso
¿vale? pero sí que tiene
una cosa que tenéis que tener en cuenta
por ejemplo, en el index.html
por supuesto aquí podéis seguir
motiendo todos los datos que queráis
por ejemplo, podéis poner aquí React19
el título del index.html
este title que veis aquí
no desaparece
¿vale? no desaparece
si entramos aquí, fijaos que el title
parece que lo está mostrando bien
pero si inspeccionamos
no lo sobreescribe
lo que está haciendo es ponerlo dos veces
fijaos, ¿veis? title y title
lo pone dos veces
así que tened cuidado con esto
porque cada vez que utilicéis el title
no lo sobreescribe
sino que lo añade otra vez
y esto va a peor
por ejemplo, si aquí en el app
que tenéis este title
vamos a crear aquí dentro
components
y vamos a poner por ejemplo
un componente que sea SEO
¿vale? le damos a SEO
function
SEO
y le pasamos title
title
y description
¿vale?
esto lo pones así
return
vamos a copiar
estas dos líneas que tenemos por aquí
esto es para que lo tengáis
muy en cuenta
porque esto ya tiene pinta
que va a ser un error
muy común
no se sobreescriben
¿vale?
entonces aquí tenemos el title
y con esto además os voy a enseñar
otra novedad
muy importante
que tenemos
en React 19
¿vale?
porque fijaos
¿veis este error del linter
que pone
title
is missing
in props validation
bueno
pues ojo cuidado
porque en React 19
este tipo
de check
no funciona
más
este tipo de check
de utilizar
las prop types
que se podía hacer
prop types
punto string
y todo esto
¿vale?
esto había que importar
prop types
de un paquete externo
que es prop types
esto ya no funciona
esto si lo tenéis
en vuestros componentes
lo va a ignorar
totalmente
o sea ya lo podéis eliminar
porque en React 19
no sirve para nada
no vais a tener
ninguna advertencia
ni nada
lo ignora
y punto
así que para que lo tengáis
en cuenta
si en el linter
os dice esto
y lo estáis haciendo
para arreglarlo
pues ya no tiene sentido
¿por qué?
porque la forma
recomendada
de React
para que
estéis validando
las props
es
typescript
o flow
¿vale?
pero sobre todo
typescript
lo que quieren es
que ya no utilicemos
las prop types
sino que utilicéis
typescript
si queréis validar
los tipos de las props
pues typescript
pero ojo
porque hay otra cosa
que hay que tener en cuenta
también
que ahora te enseñaré
pero antes
para que no nos
esté preocupando
esto todo el rato
vamos a decirle
que de las rules
el prop types
vamos a ponerlo
menuda castaña
¿menuda castaña el qué?
¿lo de las prop types?
pues a mí me parece
que tiene sentido
la verdad
tiene sentido
porque al final
eso tenía
no sé
además lo hacía
bastante más feo
eran runtime
solo funcionaba
en desarrollo
sinceramente
o sea no sé
pues entonces
vamos a ver
otra cosa
que han quitado
que también
es bastante importante
y es que
aquí
imaginad que
teníamos
esto
vamos a utilizar
el componente
SEO
¿vale?
vamos a poner
con el title
a 19
¿vale?
vale
imaginad
que aparte de esto
tenemos aquí
another
bueno vamos a poner aquí
el componente
¿vale?
vamos a poner aquí
function
another component
y aquí
también vamos a renderizar
con el SEO
vamos a poner
otro
vamos a poner
hola react
hola
hola
hola
y otra descripción
¿vale?
otra descripción
pues si utilizáis
este otro componente
y lo renderizáis aquí
¿vale?
tened cuidado
tened cuidado
porque fijaos
lo que va a pasar
¿vale?
tenemos el hola hola
y tenemos aquí
ahora
tres títulos
esto es una cosa
que puede ocurrir
que se os puede ir
un poco de las manos
si ponéis en un componente
que se renderiza
en una lista
y por lo que sea dentro
tiene un title
tened cuidado
porque os va a pasar esto
vais a tener una de títulos
que os va a volar la cabeza
lo mismo con cualquier
description
y todo esto
entonces
tened cuidado
porque
si vais a ver
el correcto
pero el html
que se está creando
no es el correcto
se va a estar replicando
constantemente
o sea que
lo que yo recomiendo
es que tendríais que tener
un contexto
para trabajar con el SEO
tener en un solo punto
que cambiándole
el estado global
o lo que sea
detecte
y solo en un sitio
utilicéis el SEO
no empecéis a cambiar
el título
a un montón de sitios
porque si no
la vais a liar
el otro cambio
que os quería decir
imaginad que tengo
el componente SEO
y quiero que tenga
valores por defecto
antiguamente
una cosa que se podía hacer
era utilizar
las default props
y poder decirle
vale
title es
o la react19
y la descripción
o la react19
esto es una cosa
que se podía hacer
hasta ahora
pero fijaos
que
si pongo lo del SEO
aquí
no le paso
ningún título
y nada
fijaos lo que pasa
con el título
que desaparece
y aquí podéis ver
que la descripción
está vacía
y aquí el title
ha quedado vacío
y eso es por culpa
de que este componente
que hemos utilizado aquí
no le estamos pasando el title
pero alguien dirá
pero si aquí tienes
las default props
igual no te suena
porque es una cosa
que es bastante nueva
hay bastante nueva
que es bastante vieja
pero antiguamente
tú podías utilizar
las default props
para indicarle
los valores por defecto
que podían tener las props
esto lo han quitado también
esto
ya no funciona
en react19
y se ignora
entonces
si estáis utilizando
por lo que sea
default props
en vuestros componentes
lo vais a tener que quitar
y vais a tener que pasar
a los valores por defecto
de aquí
o la react19
¿vale?
lo vais a tener que poner aquí
como si fuesen valores por defecto
como sería en javascript
¿esto por qué lo han hecho?
esto lo han hecho
por diferentes motivos
lo primero
porque tiene un coste asociado
que hace que tu componente
vaya más lento
parece mentira
pero la función
lo que estás haciendo
es mutar la función
y estás añadiendole ahí
un objeto
y además ese objeto
lo tiene que leer
cada vez que se renderiza
para ver si las props
tienen un valor inicial
lee ese objeto
recupera los valores
y tal ¿no?
y entonces ahí veis
que tiene un coste asociado
por eso lo quitan
y así además
me parece mucho más sencillo
de entender
tener los valores por defecto
que sería exactamente lo mismo
como en javascript
¿no?
lo del título
¿por qué lo han hecho tan mal?
yo no creo que lo hayan hecho mal
¿sabes?
sino que creo que lo han hecho
aposta por algún motivo
no sé cuál es el motivo
la verdad
el hecho de que se repitan
creo que está hecho adrede
para no sé por qué
porque si no se podría
se podría romper
o a lo mejor para forzarte
a que lo hagas desde un solo sitio
vale
pues ya tenemos
todo lo que es
los de metadatos
ya tenemos también
default props
prop types
temas importantes
vamos a ver otra cosa
y es que hasta ahora
una cosa
como hemos cargado
el html
hay el html
el css aquí
lo había hecho aquí
pues esto también
lo vais a poder cargar ahora
directamente en los componentes
y es que mirad
si nos vamos por aquí
a nuestra aplicación
y voy a poner aquí
un formulario
con un input
un type text
vale
con un botón
vamos a poner
que sea un submit
ok
nos vamos por aquí
y ahora
ahora
si vamos
si miramos aquí
pues veis que tiene aquí
como unos estilos muy bonitos
pero si quito el index.html
quito este stylesheet
vale
vamos a ver
que desaparece
y los estilos ahora
no son tan bonitos
pues lo que podemos hacer
es poner este link
estos estilos
ponerlos aquí
vale
y fíjate
que los carga
los carga
pero
ojo cuidado
porque ves que hay un parpadeo
veis que hay un parpadeo
verdad
porque hay un parpadeo
claro
si esto lo ponemos
en el html
directamente
vais a ver
que no hay parpadeo
pero
si lo quitamos
del html
si que hay un parpadeo
hay un parpadeo
casi no se nota
si le subo aquí
la velocidad
pues si que lo vais a notar
mucho más
y vais a ver mejor
el parpadeo
esto es importante
que lo tengáis en cuenta
y os voy a explicar
para que es interesante
hacerlo dentro del componente
habéis visto
que se ha cargado
más adelante
vale
porque
lo que está pasando
es que
en el index.html
si tu pones estilos ahí
como lo hemos puesto
en esa línea
lo que va a hacer
es bloquear
la carga
de los recursos
posteriores
hasta que no se cargue
el css
porque el css
dentro de las páginas web
y los motores de los navegadores
consideran que es un recurso crítico
porque puede haber parpadeos
entonces por eso
va a bloquear la carga
va a cargar el css
y luego por fin
vas a poder ver
lo que tenías que ver
ahora bien
cuando lo vas a poner
dentro de los componentes
como hemos hecho
en este caso
lo que está pasando
es que se va a cargar
de forma asíncrona
vale
se va a cargar
de forma asíncrona
y de hecho
lo podéis ver
no lo vais a poder ver
mucho aquí
porque va tan rápido esto
va tan rápido
pero a ver si os puedo enseñar
ves todavía no ha cargado el css
y ahora aquí abajo
en un ratito
cuando por fin
cargue todo
el javascript y tal
entonces carga el css
vale
carga el css
debajo de todo el javascript
por lo tanto
primero ha renderizado todo
y luego lo ha hecho
entonces
tened en cuenta esto
y entonces me dirás
bueno entonces
para qué voy a querer utilizar esto
no tiene sentido
pues sí que tiene sentido
por ejemplo
imaginad
que yo tengo
un componente
como puede ser este formulario
vale
este formulario
y tenemos aquí un componente
form.jsx
y queremos
que los estilos
de ese formulario
sean asíncronos
no queremos cargarlos
desde el principio
sino que queremos
que cuando realmente
se cargue
ese formulario
entonces
es que cargue
esos estilos
y como lo hace
de forma asíncrona
esto nos está facilitando
un montón
el trabajo
esto lo que nos va a permitir
es decir
mira
imagínate
vamos a poner aquí el form
vale
vamos a poner el formulario
y vamos a poner
un pequeño estado
muy tonto
pero show
set show
use state
false
vale
vamos a poner ahí
un botoncito
en el que vamos a enseñar
el formulario
show
un clic
vamos a cambiar esto
que en el caso
de que le demos al toggle
entonces
se muestra este formulario
y vais a ver
la diferencia
vale
vais a ver la diferencia
y lo importante
que es lo que os estoy enseñando
quitamos este CSS
de aquí
lo ponemos aquí
vale
entonces
entramos a la página
y en la página
ahora
si miramos
vais a ver
que no está cargando
por ningún sitio
o no debería estar cargando
en ningún sitio
veis
no está cargando CSS
pero cuando le damos al toggle
va a cargar ese CSS
¿qué significa esto?
que
esto antes
lo teníamos que hacer a mano
teníamos que hacer
un control
como a mano
de cuando tenemos que cargar
este CSS y tal
pero ahora
lo que podemos hacer
es que con nuestro componente
le podemos decir
bueno
este componente
tiene este CSS
y solo cuando
se renderiza el componente
quiero que cargue este CSS
y eso está muy bien
porque esto
lo que nos permite
es hacer un lazy load
de forma muy declarativa
en lugar de tener
que cargar el CSS
desde el principio
fijaos la diferencia
si yo lo pongo aquí
en el index.html
vale
nada más entrar a la página
ya me carga el pico este
que son 13k
pero si le digo
no
esto lo quiero quitar aquí
y quiero que el componente
cuando se cargue
cargue sus estilos
vale
pues lo que va a pasar
es que nada más entrar
no tengo el CSS
pero cuando le doy al toggle
si que me va a cargar el CSS
y me va a aparecer
el componente correctamente
vale
esto es una cosa
muy interesante
que nos va a permitir
mejorar un poco el rendimiento
que es lo que va a hacer también
que un montón de bibliotecas
que a día de hoy
no tiene una forma nativa
que te dicen
tienes que importar
este CSS en tu proyecto
pues muchas veces
lo que vamos a ver
es que los componentes ahora
tendrán esto
de forma nativa a ellos
y ya no te dirán
como tienes que cargar el CSS
sino que lo cargarán ellos
pero lo cargarán
solo cuando lo necesiten
ahora
¿cuál es el problema
que podemos tener con esto?
ya te habrá dado cuenta
que cuando le das
todavía se ve
has visto que todavía se ve
un momento
de hecho lo podemos hacer más lento
para que lo veas
vale
le damos
vale
ves que se ve
el CSS y tal
y alguien me dirá
bueno pero esto es un rollo
tenemos arreglo
tenemos arreglo
y es que
además
tercer añadido
ya hemos visto dos
document metadata
title y todo esto
luego
el lazy load de CSS
también lo podríamos hacer
con JavaScript
y tenemos otra cosa
muy interesante
que es poder utilizar
los preloads
preinits
y todo esto
y es que ahora
React
nos está ofreciendo
un montón de métodos
que nos permiten
indicarle
que recursos
tiene que precargar
en diferentes momentos
por ejemplo
podemos utilizar el preload
y esto que normalmente
lo pondríamos en el HTML
lo podemos poner
dentro de nuestros componentes
y ahora le podemos llamar
aquí al preload
y le podemos decir
oye
no voy a utilizar
el CSS este
que tenemos aquí
todavía
no lo voy a usar
pero quiero que lo precargues
entonces en el preload
que tenemos aquí
le podemos pasar
que precargue este CSS
y además le podemos decir
que lo precargue
como si fuese un estilo
incluso le podemos decir
cuál es la prioridad
si no me equivoco
creo que se le puede decir aquí
priority
entonces ya le podemos indicar
que aunque no cargue ese CSS
que lo precargue
vamos a ver cómo funciona esto
añadiendo esto
lo que vamos a ver aquí
ahora
es que
nada más entrar
a la página
fijaos
que tenemos aquí
este CSS
pero es diferente
porque este CSS
que estamos teniendo aquí
fijaos
que lo está cargando
aquí abajo
o sea
primero
carga todo el JavaScript
que es lo más importante
y lo que está diciéndole es
vale
quiero que lo precargues
porque quizás
lo vas a necesitar después
y entonces le damos al toggle
y ya lo tiene cargado
es diferente
a cargarlo desde el principio
porque la prioridad
que le ha dado esto
fijaos que está bastante abajo
que no es lo mismo
que ponerlo en el HTML
que si lo ponemos aquí
pues lo vamos a tener
bien arriba
entonces lo que estamos haciendo
con esto es decirle
oye
precárgalo
pero quiero que me cargues
todo el JavaScript
y me lo precargas
porque seguramente
lo voy a necesitar
y así
ya te evitarías
por ejemplo
ese parpadeo
fíjate
esto es con preload
y si le quitamos el preload
vale
quitamos el preload
vamos a poner aquí
Fast3G
bueno
espérate
vamos a reiniciar esto
vale
pongo Fast3G
y fijaos ahora
si lo pongo
vale
aparece ahí
y luego lo pone
porque lo está cargando aquí
con el preload
le podemos decir
oye
precárgalo
porque esto lo vamos a necesitar
en algún momento
¿cómo funcionaría esto?
pues nada
recargamos
lo precarga
y ahora
aunque sea muy lenta
la conexión
cuando mostramos el componente
ya lo tiene cargado
vale
así que ya lo teníamos ahí
ahora
por eso no es mejor
poner preload en el index
no es que sea algo
mejor o peor
y de hecho
esto es lo que te da
es un control
más granular
tú Jairleo
no lo puedes poner todo
en el índice
¿y por qué no lo puedes poner
todo en el índice?
porque tú en el índice
que es un archivo estático
no sabes
no sabes
antes de nada
en qué ruta va a terminar
¿qué vas a hacer?
¿cargar mil recursos?
¿vas a cargar mil recursos
porque puede ser
que lo necesite todos?
no tiene sentido
no tiene sentido
porque no sabes
cuáles de esos mil recursos
va a ser el que va a poder necesitar
pero en cambio
poder tener un control
más granular
a nivel de componente
y decir
si estoy mostrando
este componente
entonces quiero que me precargue
esto
esto y esto
si estoy en esta ruta
quiero que precargue
esto y esto
me está dando un control
mucho más granular
dentro del árbol de elementos
claro
tú lo que estás diciendo
es ¿por qué no lo pongo todo
en la raíz?
pues porque no tiene sentido
es porque es mucho más complicado
el hecho de en la raíz
poner todo lo que vas a precargar
porque si tú lo pones todo
en la raíz
lo que pasa es que
se van a pelear
por los recursos
si tú precargas mil cosas
pues va a ocupar un montón
se van a pelear entre ellos
no sabes cuál es el que
realmente vas a necesitar
y no lo vas a controlar bien
por lo tanto
siempre vas a querer
tener un control granular
para mejorar el rendimiento
¿vale?
entonces
ya tenemos el tercero
en el atributo
en el link
fetch priority
en el link
¿cómo que en el link?
sería lo mismo
pero es que no tenemos
un link en este caso
o sea no necesitamos el link
no sé si te refieres
a que esto es
fetch priority
pero lo de fetch priority
sería para otra cosa
claro
mejor un control granular
a nivel de componente
claro
es que sería mucho mejor
a nivel de componente
gracias no había entendido
que se podía configurar
en el componente anterior
sí claro
aquí lo he puesto en este preload
pero esto lo podéis hacer
en cualquier sitio
lo podéis hacer con diferentes cosas
por ejemplo
veis que aquí
hemos puesto este asset
fijaos
components
lo mismo podríamos hacer
por ejemplo
con un logo
.jsx
igual que aquí
teníamos el logo este
de Lugu
que esto puede ser
que ocupe bastante
a ver
vamos a pillar esta imagen
vamos a poner la imagen
en tocha
para que lo veamos
image
puede ser esto
vale
esta imagen puede cargar bastante
pues esto lo podéis hacer
en diferentes sitios
o sea
podéis precargar más de una
por ejemplo aquí esto
le podemos poner que sea
como una imagen
y
lo podéis hacer con fuente
lo podéis hacer con un montón de cosas
y aquí ya
vamos a poner el logo
y lo podéis hacer también
pues con el logo
export function
logo
y aquí
que devuelva
al image source
con esta imagen
claro
aquí sabemos
que ese logo
lo vamos a necesitar
casi que seguro
pero lo que tiene sentido
es que lo hagamos con esos recursos
que sabemos
con bastante seguridad
que el usuario va a ver
vale
si no va a tener posibilidad
de verlo
no lo vamos a querer cargar
obviamente
pero bueno
aquí esta sería un poco
la misma idea
hostia
espérate
que me he cargado algo
ah espera
que como está con el slow 3G
a veces
mira
ahí tenemos el logo
vamos a ponerle aquí
un
que sea un poquito más pequeño
y max width
200px
vale
ahí está
vale
pues un poquito esta sería la idea
la misma idea
haciendo el preload
para que veáis que no solo son css
sino que también puede ser
cualquier tipo de imagen
vale
ahí tenemos con el logo
pero igual que tenemos el preload
no os voy a enseñar todos
pero que sepáis
que tenemos preload
tenemos pre init
vale
que es para ejecutar
cosas lo más pronto posible
teníamos el prefetch dns
que sería
para hacer
no para hacer la petición
sino para hacer la negociación
con un dominio externo
que esto puede ser interesante
por ejemplo
para google maps
pues a lo mejor quieres hacer
el prefetch
de la url
de api
punto google maps
punto com
vale
porque la vas a utilizar
más adelante
pues esto te puede ahorrar
un poco de tiempo
para que luego
cuando hagas el fetch
no tarde tanto
y lo mismo
podríamos hacer un poco
con el preconnect
el preconnect
sería como un preload
pero con menos
prioridad
vale
que sería para algo
que no sabes exactamente
si lo va a necesitar
si es algo que va a necesitar
seguro
el preload
si es algo que quizás
necesitas
el preconnect
vale
así que ya tendríamos
la tercera novedad
que serían
estos métodos
para mejorar el rendimiento
y poder precargar
más cositas
vale
y el preload
se ejecuta
en una sola vez
o cada vez que se renderiza
el componente
el preload
y todos estos
se ejecutan
solo una vez
vale
¿por qué?
porque una vez
que ya has precargado
un recurso
ya no necesitas recargarlo
se queda en la caché
y ya por más veces
que tú lo intentes poner
no lo pones
y no pone
en el html
no pone otra vez
la etiqueta
ni nada
solo lo hace una vez
vale
ya lo tendríamos
solo una vez
y ya no hay que preocuparse
tened en cuenta una cosa
todo lo que estamos viendo
que aunque lo estamos utilizando
ahora mismo
en el cliente
todo lo que estamos viendo
también funcionaría
en server-side rendering
vale
lo digo porque
aunque no utilicemos
el server-side rendering
mirad que aquí
si fijáis
veis este preload
cuando renderizaríamos
para el servidor
que esto es lo que hace
esto es lo que haría
Next.js
Remix
y otros frameworks
vale
ya estas cosas
que estamos viendo
fijaos
que pone preload
y este preload
es el que he hecho yo
y este es el de CSS también
y el title
todo lo que estáis viendo
va a ser genial
porque un montón de frameworks
se va a poder aprovechar
vamos a ver otra novedad
y es la del forward ref
una nueva prop
que viene para simplificarnos
la vida
y te voy a explicar
por qué
y cómo
voy a quitar todo esto
de preload
porque no
no vamos a estar
bueno
lo voy a dejar
vamos a dejar el
vamos a dejarlo por ahí
vamos a dejar esto
solo que
voy a enseñar el formulario
de primeras
porque ahora me interesa
vamos a quitar esto
y ya está
vale
enseñamos ahí el formulario
muy bien
nos vamos al componente formulario
voy a ir cerrando
en el componente formulario
voy a poner aquí un playholder
ejemplo
new dev
vale
tenemos ahí el formulario
vale
esto a lo mejor
no es una cosa
que te afecte en tu día a día
pero sí que es interesante
saberlo
y es que una de las novedades
más importantes
en React 19
es que tenemos una nueva prop
que se llama ref
y para qué sirve esto
bueno
te voy a explicar
te voy a poner un ejemplo
para que lo entiendas
vale
imagínate
que tenemos aquí
un ejemplo
en el que yo quiero
vale
vamos a traernos el hook
use ref
que nos va a permitir
guardar una referencia
y la referencia
que quiero guardar
es la del input
así que utilizamos
use ref aquí
y le decimos
que este input
que se guarde
en la referencia
input ref
y lo que vamos a tener
es un botón
vale
vamos a poner aquí
un botón
esto sea
para
bueno
vamos a quitar este botón
de submit
quitamos este botón
del formulario
vamos a poner aquí
otro botón
que sea
para hacer focus
en el input
ok
lo que queremos
es que cuando le demos
al botón
vale
se enfoque
el input
normalmente
haríamos
tu tu tu tu
tendríamos que hacer algo así
que cuando hacemos clic
hacemos input
ref punto current
punto focus
vale
esto es lo que tendríamos que hacer
a ver
voy a ponerle aquí
focus input
porque así
vamos a poder mirar
que si tenemos input ref
vale
y así quedará un poquito más
más fácil
quitamos esto
focus input
imaginar que tenemos esto
esto es algo muy típico
lo que quiere decir esto
es que estamos
yendo al DOM
para interactuar con él
directamente
guardamos
este elemento input
en esta referencia
y esta referencia
aquí lo que decimos es
vale
cuando se haga clic
en este botón
quiero que se haga focus
¿cómo funciona esto?
pues nada
vamos aquí
no sé por qué pone lock
ah
focus input
vale
y cuando le doy clic aquí
vale
ves que se ha hecho focus
le doy clic aquí
y se hace focus
y esto es porque
no hay forma fácil
de hacer react
en react esto
no hay una forma fácil
de
cómo puedo interaccionar
directamente
como si fuese
con el usuario
para hacer un clic
un focus
o lo que sea
si no tengo
la referencia del elemento
pues la única forma
que lo podríamos hacer
podríamos hacerlo
podríamos poner un autofocus
y ya está
pero esto se haría el foco
automáticamente
me refiero con un clic
en otro sitio
y esto puede ser
pues en una imagen
que queremos que pase
alguna cosa
en un input
o lo que sea
lo tenemos que hacer así
guardando la referencia
hasta aquí bien
esto será una forma
bastante sencilla
pero
¿qué pasa?
que hay muchos
design systems
o hay muchos
catálogos de componentes
que teníamos el input
lo teníamos totalmente aparte
teníamos el input
y aquí lo que hacíamos
es pues
tenemos que renderizar
el input
vale
tenemos aquí el input
y aquí claro
¿cómo
conseguíamos
la referencia aquí?
¿cómo teníamos aquí
la referencia?
¿se la teníamos que pasar?
¿qué es lo que hacíamos aquí?
¿cómo podíamos?
imagínate que este input
pues tenía sus estilos
es de un design system
que tú no tienes control
y ¿cómo hacías
para pasarle la referencia?
no era tan fácil
como parecía
porque claro
a este input
¿cómo le pasas la referencia?
¿cómo se la inyectas?
bueno
pues se podía hacer
pero era un poquito complicado
porque lo que tenía que hacer
el del design system
era utilizar el forward ref
que era
aquí
una forma
de
separar
el componente
¿vale?
por un lado tendría
las props
y por otro lado
tendría la referencia
lo tenía que envolver
y esta ref
le llegaba por aquí
¿vale?
y entonces ahora
sí que podíamos utilizar
pues que esta referencia
esta fuese
el input ref
y ahora sí que todo
debería funcionar
correctamente
pero fijaos
que es un poco complicado
y además fíjate
component definition
is missing
display name
¿por qué?
porque el nombre
del componente
se pierde
y encima
tenías que hacer
el display name
ponerle un nombre
o sea
era un rollo
esto ahora
¿ves?
funcionar funciona
pero teníamos que utilizar
un montón de cosas
bueno
pues esto
también te puedes olvidar
¿vale?
te lo explico
porque así es como
funcionan
por ejemplo
tú cuando utilizas
chatcn
y aunque no te des cuenta
por dentro
está utilizando
está utilizando
estas cosas
que al final
necesita
utilizar el forward ref
porque si no
no podrías tener
la referencia
del componente
interno
¿ves?
forward ref
forward ref
forward ref
todos estos componentes
todos tienen forward ref
por todos los sitios
y esto complica
un montón
un montón
el cómo tiene que funcionar
hasta ahora
y es que
tenemos una novedad
importante
y muy interesante
y es que
ya no necesitamos
hacer nada de esto
te puedes olvidar
del forward ref
y lo que va a pasar aquí
es que ahora
igual que tenemos
el children
¿vale?
vamos a tener
las props
y vamos a tener
una nueva
prop llamada ref
que es simplemente
la referencia
que se la vas a poder
pasar por aquí
ajá
vale
esto tampoco necesitamos
¿vale?
esta referencia
ahora podemos hacer
exactamente esto
ya podemos quitar esto
que no lo necesitamos
de hecho podemos utilizarlo
como si fuese una función
function input
¿vale?
y ya está
ya no necesitamos hacer
nada de lo que has visto antes
y en esta nueva versión
de React
ahora
funciona
por arte de magia
ya le pasas directamente
la referencia
como si fuese una prop
y ya la recibe
sin ningún problema
o sea
automáticamente
por dentro
está haciendo la magia
que hasta ahora
era necesaria
entonces
¿por qué te he explicado
también lo antiguo y tal?
bueno
porque así ahora
cuando veas
un forward ref
en el código
de lo que sea
ahora sabrás
que lo puedes quitar
que es complejidad
innecesaria
porque ahora
React 19
lo tiene totalmente
integrado
y puede recibir
como una prop
esta referencia
¿vale?
como siempre debió haber sido
totalmente
totalmente
totalmente
totalmente cierto
pero lo importante
es que ha llegado
aunque sea tarde
pero ha llegado
así que ya
no lo necesitamos
vamos a hacer otro
otro ejemplo
y es que
para ver
la nueva API
use
esto está
muy interesante
es un poco
es un poco raro
pero ya verás
vamos a llamarle
use example.jsx
mirad
tenemos la nueva API
que se llama
use
y se importa
desde React
no es un hook
aunque se le parece mucho
le llaman API
y es porque
es un poquito
especial
en cuanto a su uso
¿ok?
vamos a hacer
una llamada
a la PokeAPI
en un momento
utilizando
esta nueva API
vamos a tener aquí
una función
que le vamos a llamar
use
fetch
example
¿vale?
vamos a tener
un estado
que va a ser
name
set name
para guardar
el nombre
del Pokémon
para poder
buscar al Pokémon
y vamos a tener aquí
vamos a renderizar
ya lo que
queremos renderizar
vamos a poner aquí
un div
con un formulario
con un input
playholder
vamos a poner
ejemplo
Pikachu
y le ponemos
el valor
va a ser
el nombre
y que cada vez
que cambie
el valor
pues hacemos
el set name
con todo esto
¿vale?
vamos a hacer esto así
para que se vea
un poquito mejor
ya tendríamos aquí
un input
como para ir guardando
el estado
¿vale?
y ahora lo que quiero
normalmente
lo que deberíamos hacer
es un on submit
para que cada vez
que haga submit
y tal
imaginad
que queremos
que
queremos
que cada vez
que escriba
el usuario
cada vez que escriba
pues que haga
una búsqueda
en la API
de la Poké API
para que
a ver si está
este Pokémon
bueno
pues lo bueno
es que ahora
lo vamos a poder hacer
como de forma
mucho más declarativa
por ejemplo
vamos a poder trabajar
directamente
con promesas
vamos a poder tener
aquí un
fetch Pokémon
y lo que vamos a hacer
aquí
que bueno
podemos hacerlo
asíncrono o no
vamos a decirle
oye
si no tengo el nombre
si no le hemos pasado
nombre
que sería la primera vez
vamos a pasar
una promesa vacía
no hay absolutamente nada
pero si tenemos un nombre
vamos a hacer un fetch
de la Poké API
la versión 2
Pokémon
con el nombre
transformamos esto
en un JSON
si está ok
entonces devolvemos
el JSON
si no está ok
entonces vamos a devolver
pues un error true
y el message
vamos a poner Pokémon
no encontrado
voy a simplificar
vale
no se puede encontrar Pokémon
aquí habría que hacer
un poquito mejor
los errores
pero lo vamos a dejar así
con esto ya tendríamos
aquí una llamada
fetch Pokémon
ojo que esto es en el cliente
esto no es en servidor
ni nada
ahora
¿qué podemos hacer con esto?
con este fetch Pokémon
vamos a tener otro componente
aquí abajo
vamos a llamarle
function
y vamos a llamarle
show Pokémon
que va a recibir
el Pokémon Promise
vale
Pokémon Promise
la promesa del Pokémon
vamos a recuperarla
vamos a decir
vale
tengo aquí el Pokémon
voy a utilizar
esta promesa
del Pokémon
y vamos a ver
si el Pokémon
trae un error
vale
vamos a resolver la promesa
si tiene un error
vamos a mostrar
el error
con el mensaje
fíjate que lo que está
haciendo aquí
es recuperar la promesa
y cuando se resuelva
la promesa
va a mirar
si tiene un error
porque fíjate que aquí
he puesto error true
y aquí el message
y si no tiene un error
se supone que ha podido
llegar a la Pokéapi
que sería
la
esta sería la respuesta
vale
esta sería la respuesta
pues vamos a ver
creo que había
una forma de pillar
creo que había imagen
vale
está el name
que es el Pikachu
que bueno
eso tiene sentido
sprites
vale
sprites
front
default
vale
vale
pues vamos a enseñar el Pokémon
en el caso que tengamos el Pokémon
vamos a hacer el return
aquí
return
y pues mostramos nuestro Pokémon
el resultado
el Pokémon name
vamos a poner
vale
sprites
front
default
perfecto
y ya está
no
bueno no está
vamos a poner aquí el article
para que ponga bien los estilos
un article
y vamos a poner también
yo que sé
la descripción del Pokémon
no sé si tiene descripción el Pokémon
pero bueno si lo tiene
pues lo dejaremos así
y este componente
lo vamos a utilizar
justo aquí debajo
aquí debajo
le vamos a pasar
este fetch Pokémon
como un Pokémon Promise
Pokémon Promise
y llamamos aquí el
fetch Pokémon
o sea le vamos a pasar directamente
la promesa al componente
ahora bien
si esto lo intentamos utilizar
vamos a renderizar
este useFetchExample
en nuestro app.js
x
vamos a importar este componente
clase
useExample
vamos a renderizar esto
en lugar del formulario
vale
lo ponemos por aquí
nos vamos por acá
vamos a ver que tendríamos
seguramente problemas
vamos a tener problemas
vale
dice
un componente suspendido
mientras respondía
un input
síncrono
esto causará
que la UI
sea reemplazada
que bla bla bla
¿qué es lo que pasa?
lo que está pasando es que
cuando tú utilizas
en un componente
estás utilizando este
use
para leer
una promesa
que es el caso
lo que tenemos que hacer
es envolver
este show Pokémon
en un suspense
y este suspense
lo que va a hacer
es decir
mientras la promesa
esta
que estamos teniendo aquí
se resuelve
vamos a cargar
vamos a mostrar
alguna cosa
¿ves?
entonces vamos a mostrar
este cargando
vale
vamos aquí
vale
no puede leer
undefined
espérate
algún sitio he puesto
vale
porque esto
esto solo
tendríamos que renderizarlo
esto si
si no tenemos Pokémon
entonces
return null
vale
y ya está
vale
ahora sí
vale
entonces
hostia
espérate
que
me he cargado los estilos
con la tontería esta
de los estilos
al final
no los he puesto
en el
en el HTML
y no los estamos viendo
vamos a ponerlos por aquí
para tenerlos aquí siempre
vale
y ya está
vale
pues ahí tenemos Pikachu
¿no?
vale
vamos a poner Pikachu
vamos a poner aquí Pikachu
vale
¿has visto lo que ha pasado?
que ha salido el cargando
y cuando ha resuelto la promesa
ha mostrado el resultado
no me está mostrando
toda la información que esperaba
también puede ser
porque no he visto bien
cómo es el resultado
él sí que me estaba mostrando
la imagen
el Pokémon
lo de Pikachu
es que no tiene descripción
me parece
no sé si pensaba
que tenía una descripción
del Pokémon Pikachu
es el más bueno
y el más bueno
vamos a poner aquí el peso
peso
vamos a poner Pikachu
que pesa
no sé cuántos kilos
es un poco raro
que pese 60 kilos
pero bueno
vamos a ponerlo
vale
pues aquí podemos tener
el Pikachu
voy a renderizar otra vez
vale
tenemos Pikachu
si yo pongo A
cargando
error
no se puede encontrar
el Pokémon
fíjate que aquí
en la API
está buscando la A
si le ponemos otra vez
y ponemos aquí
P
I
K
A
C
H
U
vale
pues se va
se va a ir cargando
constantemente
y aquí tendríamos
lo de Pikachu
fíjate que tenemos el Pikachu
hasta que lo ha encontrado
y ya está
lo que estamos haciendo aquí es
tenemos un componente
que se suspende
quiere decir
que mientras está resolviendo
la promesa
muestra lo que pongamos aquí
aquí le hemos puesto cargando
pero le podemos haber puesto
cualquier cosa
fíjate
Bulbasaur
vale
y lo tenemos ahí
le podríamos poner
otro componente
aquí que sea mucho más bonito
podríamos poner un loader
podríamos poner un playholder
podríamos poner lo que tú quieras
y aquí dentro
tendríamos una forma
de traernos
cualquier recurso
que sea asíncrono
aquí le estamos pasando
una promesa
pero podría ser cualquier cosa
que sea asíncrona
la podríamos hacer aquí
y estamos tratando
los errores
dentro del componente
y aquí la pregunta del millón
es
¿no sería mejor
utilizar React Query?
Gracias Midu
no puedo regalar
suscripciones
ya que no me da el dinero
cara triste
pero quiero que sepas
que gracias a ti
acabo de terminar
un pequeño proyecto
para mi trabajo
con el que hemos
automatizado todo el proceso
de alta y onboarding
de un servicio nuevo
he puesto en práctica
joder
he puesto en práctica
mucho de lo que nos enseñas
para montarlo con ASIO
WS
manda los datos al Telegram
funciona pero me molesta
que he necesitado mucha ayuda
de GPT
bueno pero lo importante
es que lo has hecho
bueno el tema es que
hace falta el debounce
¿no?
bueno hace falta debounce
hace falta no sé qué
no es el punto
el punto es para ver
este ejemplo
faltaría también
la UI
faltaría un montón de cosas
pero el tema es
eso si queréis
lo podéis hacer aquí
con un debounce
se podría cambiar
pero no es lo importante
de este ejemplo
lo importante de este ejemplo
es
también lo podrías cachear
podrías mirar los errores
podrías hacer
miles de cosas
el tema es que
lo que estamos haciendo
es que podemos crear
la promesa
dentro del cuerpo
de una función
¿vale?
y nos permite
leer la promesa
dentro de otro componente
hasta hoy en día
no se podía hacer esto
de poder crear
una promesa
dentro de un componente
y crear como
código asíncrono
y esto lo hace además
de una forma declarativa
porque si os fijáis
estamos pasando la prop
y como lo resuelve
es totalmente transparente
para nosotros
sin tener que preocuparnos
¿vale?
está súper bien
por esto
pero esto no significa
que ahora estéis obligados
a utilizar esto
constantemente
quiero decir
esto es algo
que seguramente además
aunque este ejemplo
está bien
pero hay que tener en cuenta
que quizás
muchas bibliotecas
lo van a utilizar
de forma interna
para crearos
un custom hook
que os va a simplificar
la vida
para cuando tenéis
que mostrar el loading
cuando tenéis que mostrar
lo otro y tal
como React Query
pero nos permite
que React Query
y todas estas bibliotecas
se simplifiquen
mucho más
y que de forma
nativa a React
puedan solucionarlo
sin tener que escribir
tanto código
si vosotros intentáis
hacer esto
con código
de por ejemplo
para el loading
necesitaríais un estado
para saber
cuando este suspense
está haciendo el loading
tendríais que tener
const
loading
set loading
use state false
no sé qué
también tendrías que tener
uno para el error
¿entendéis?
set error
use state false
porque cuando hay un error
pues tenéis que mirarlo
lo que estamos consiguiendo
con esto
es quitar estados
simplificar
ya no necesitamos
ni el data
tampoco tenemos estado
de data
estamos simplificando
mucho como se gestiona
la promesa
y es dentro del componente
que de forma totalmente
declarativa
sin tener que
preocuparnos
ya le llega
la información
y con simples
if
condicionales
vamos mostrando
las diferentes cosas
y con muy poquito
lo hemos hecho
fíjate
un solo estado
y este estado
en realidad
lo hemos hecho
para gestionar el input
para que un poco
os hagáis un poco
la idea
de cómo de potente
es la nueva API
de use
que no es tanto
como un custom hook
sino que sería
una API
pero no es su único uso
y ahora vamos a ver otro
para hacer un estado global
que es bastante interesante
Hola Midu
encontré esto
en la docu oficial
se prefiere la creación
de promesas
en los componentes
del servidor
y pasarlos
a los componentes
del clientes
por encima
de crear promesas
en los componentes
del clientes
las promesas
creadas
en los componentes
del clientes
son recreadas
en cada
si tengo un proyecto
en Next14
ya están disponibles
estas funciones
si
porque NextGS14
utiliza
utiliza
React
bueno
React experimental
solo lo que comentaba
Hernán
que me ha puesto
todo el testamento
ahí
con un mensaje
super largo
básicamente es que
el hook de use
este que hemos visto
aunque lo estamos
utilizando ahora
puramente
en el cliente
resulta
que lo interesante
es que podéis
crear promesas
en un componente
del servidor
y pasárselo
a un cliente
o sea
esto
este sería
el componente
componente
del cliente
vale
y podríamos tener
un componente
este
que sea el componente
del servidor
vale
esto es una cosa
que se puede llegar a hacer
pero
en este caso
no lo estamos haciendo
pero es la forma
más recomendada
porque
así harías el fetch
en el servidor
y sería mucho más interesante
porque sería mucho más rápido
que hacerlo en el cliente
siempre mejor idea
hacer el fetching de datos
en el servidor
y enviar ya
los datos para renderizar
en el cliente
lo hacen mucho
mucho más rápido
por eso es lo que dice
la documentación
que lo recomienda
hay otro caso de uso
de use
que vamos a ver ahora
porque esto sería
para
pues para promesas
pero otro caso
que está bastante chulo
y que además
así os puedo explicar
otra novedad
que tiene el context
es
para los estados globales
más que estados globales
para los contextos
vale
mirad
vamos a crear aquí
un contexto
vale
y vamos a llamarle
user.jsx
vamos a importar
el create context
el use state
vamos a necesitar
el use callback
también
porque todavía
no tenemos
el compilador de React
y vamos a crear aquí
un user context
con un create context
que tenga
el name a null
y es islog a false
vamos a crear
un estado global
en un momento
o sea en un momento
vale
lo hacemos con create context
y aquí
tendremos que crear
un user context provider
que esto tendría un children
porque tiene que envolver
nuestra aplicación
vamos a tener
el estado interno
bueno
más o menos
no es exactamente
pero casi
vale
vamos a tener
el nombre del usuario
y si ha iniciado sesión
o no
para simplificar
yo voy a tener
solo un método
que sea
update user
que se le pueda pasar
tanto el nombre
como el islog
y que actualice
el nombre del usuario
y si está logueado
o no está logueado
vale
no le vamos a pasar
ninguna dependencia
y por lo tanto
este use callback
y ahora te explicaré
porque utilizo el use callback
aunque si no sabes
el use callback
tengo un curso de React
que te lo explica
para
para que es el use callback
para que solo cree
esta función una vez
y para que por más
que se vuelva a renderizar
este componente
no vuelva a crear
la misma función
porque no tiene sentido
y ahora
lo único que tenemos que hacer
es devolver
el user context
punto provider
y tendríamos
el valor
de nuestro contexto
con el nombre
el islog
el update user
el children
que sea lo que envuelve
y aquí tendríamos
el user context
punto provider
vale
ok
pues ya teníamos esto
que dice
user context
que dice
no tiene la etiqueta
de cierre correspondiente
que he hecho yo aquí
ah
vale
lo he hecho al revés
vale
ahora sí
bueno
habríamos creado un contexto
vale
con el create context
le decimos
el objeto que queremos
que tenga en el contexto
tenemos que crear
un componente
que va a proveer
de este contexto
a nuestra aplicación
en el children
sería lo que vamos a envolver
con este contexto
tendríamos un estado interno
porque va a servir
como un estado global
global
a todo lo que vamos a envolver
con el nombre del usuario
y para saber
si está logueado
o no está logueado
tenemos un método
update user
con el use callback
y esto lo que tenemos
aquí dentro
es una forma
de actualizar
el usuario
porque puede cerrar sesión
puede iniciar sesión
o lo que sea
y finalmente
con este provider
tenemos el valor
que es lo que vamos a inyectarle
a este contexto
y donde estamos envolviendo
este user context provider
tenemos que utilizarlo
aquí por ejemplo
vale
para envolver nuestra aplicación
así que user context provider
vamos aquí
import
bueno no es el provider
sí
es el provider
aquí
y lo importamos
de context user jsx
bueno esto no hace falta
ya lo teníamos
pero esto es importante
que envolvamos
nuestra aplicación
con el provider
para que podamos tener acceso
a todo este contexto
todo este rollo
para tener un estado global
bueno
pero ahora veremos
unas cuantas cosas
que están interesantes
que podemos
que podemos simplificar
vamos a crear un componente
que va a ser
use
bueno en clase
use context example.jsx
vamos a importar
la API de use
vale
y vamos a importar
el contexto
que acabamos de crear
este user context
vale
from
punto punto
context
barra user
y ahora aquí
esto sería
un componente
normal y corriente
donde vamos a poder utilizar
toda esta información
del usuario
podremos tener
el nombre
si está logueado
una forma
una forma
de actualizarlo
ah mira
aquí cambiar nombre
bueno esto no sería exactamente
vamos a hacer otra cosa
vamos a poner aquí un div
y vamos a decir
que si el usuario
está logado
pues vamos a enseñar
aquí el nombre
del usuario
hola
hola
nombre
vale
y una forma
de cerrar la sesión
y si no está logueado
vale
vamos a poner bienvenido
que igual esto
también lo podríamos hacer
con una ternaria
para evitar problemas
así que vamos a poner esto
por aquí
esto lo vamos a mover aquí
y ya lo tendríamos
vale
vale
vamos a ponerlo dentro
de un paréntesis
y ya está
o sea
esto es un componente
que lee
el estado global
el contexto
si está logueado
renderiza esto
si no está logueado
pues te renderiza esto
para que puedas iniciar sesión
vamos a utilizar
este componente
aquí
estamos utilizando
este use fetch
pues use context
example
y si nos vamos
a nuestra aplicación
vamos a quitar aquí
algunos componentes
que ya no utilizamos
vale
nos vamos a nuestra aplicación
ves
lo pone bienvenido
iniciar sesión
le doy click
y ahora me pone
hola Juan
cerra sesión
vale
o sea
parece que no es muy interesante
muy importante
pero sí que tenemos ya
una forma de leer
desde un estado global
este contexto
y ya está
cosa interesante
que hemos utilizado
el use
no hemos utilizado
el use context
hemos utilizado
el use
y esto nos permite
si te fijas
ya nos permite
utilizar el contexto
y además
que sea un contexto
condicional
porque el use context
sí que tiene las reglas
de los hooks
pero el use no
por lo tanto
podríamos tener aquí
una prop
que sea
yo que sé
enable
voy a ponerle false
y vamos a poner
y si no está enable
hago un return null
y esto
pues no lo renderiza
pero no peta
que es diferente
a cuando si pones
el use context
que seguramente
no sé si se va a quejar
porque a lo mejor
no lo ve y ya está
vale
no se va a quejar
porque no lo ve
pero dependiendo
de que este use context
tenga
bueno
fíjate que el linter
sí que se queja
dice
reahook use context
se llama de forma condicional
y tiene que ser llamado
siempre en el mismo orden
en cada componente
claro
aquí ya nos está dando
un problema
que no ocurre
con el use
porque el use
sí que lo puedes hacer
de forma condicional
y además que es un poquito
más corto
eso sería
una cosa
que nos estaría dando
y luego
otra cosa
que nos estaría
que podríamos hacer
también sería
cambiarle el orden
esto puede ser interesante
también pues para
un modo oscuro
para el tema del usuario
para este tipo de cosas
así que no solo nos permite
leer promesas
sino que también podemos leer
el contexto
y simplificar un poco
para las reglas
y todo esto
a eso sí
yo recomiendo
que utilicéis un custom hook
para el contexto
o sea que no hagáis esto
de tener el use
user context
sino que realmente
lo hagáis en otro sitio
para que veáis
que es un estado global
que no me lo estoy inventando
aquí en la app
veis ahora podemos utilizar
esto exactamente
este use
y este use context
user context
también lo podríamos utilizar aquí
para ver si está logueado
y poner
en otro componente
totalmente diferente
y vais a ver
que se sincroniza
totalmente
si ponemos aquí
un style
y le ponemos
position fix
bottom
bottom 0
vamos a ponerlo
abajo del todo
vale
vamos a poner
que si está logueado
vamos a poner
islog
y si está logueado
pues vamos a decir
bienvenido
y si no
bueno
está logueado
no está logueado
vale
para que veáis
que realmente
se sincroniza
en dos sitios diferentes
ves
aquí tenemos
no está logueado
si quitamos
el enable
lo pongo a true
para que realmente aparezca
vale
le doy inicio a sesión
veis
que se sincroniza
directamente
el contexto
en dos sitios diferentes
cada vez
son dos componentes
que están totalmente separados
que no le estoy pasando
la prop de un sitio al otro
y que realmente
se están sincronizando
y lo estoy haciendo
utilizando el use
otra novedad
importante
que simplifica
el tema del contexto
es que
si vamos al context
ahora
no necesitamos
utilizar esto del provider
veis que pone aquí
provider y tal
sino que este provider
lo podéis quitar
y ya está
entonces ya os podéis olvidar
del user context
punto provider
y el user context
punto consumer
porque fijaos
que aquí
ya no necesitáis poner
provider
esto funciona bien
y además aquí
le pasáis directamente
el user context
no le tenéis que pasar
el punto consumer
esto no lo necesitáis
vale
o sea que ya directamente
lo simplifica un montón
y esto funciona exactamente igual
sin ningún tipo de problema
en react 19
los contextos
ya no necesitarás utilizar
provider y consumer
y con el hook
del use
lo puedes pasar
y con el hook
no
con la API
de use
se lo puedes pasar
y además llamarlos
de forma condicional
vale
así que
hay un montón
de el use
ha sido rápido
pero espero que
os haya gustado
y esto no se implica
simplifica
zustan
no porque
a ver
simplifica el uso
de contexto
y a lo mejor
internamente
lo puedes simplificar
un poco
pero no creo que
lo simplifique
mucho
mucho
mucho más
se siguen utilizando
los componentes de clases
se siguen utilizando
pero para crear nuevos
desde luego que no
¿en qué afecta quitar el provider?
no afecta en nada
pero es una cosa
que antes no se podía hacer
por ejemplo
en react 18
esto era necesario
esto lo tenías que hacer así
en react 19
no es necesario
¿en qué afecta?
no afecta en nada
que es menos código
y que por lo tanto
te lo puedes quitar
y olvidarte
olvidarte totalmente de esto
use context
no va más
ya no será necesario
utilizar use context
y se simplifica
directamente utilizar el use
¿vale?
va a ser mucho más simple
vamos a tener un hook menos
y además una API
mucho más sencilla
¿tienes algún recurso
de cómo usar el use reducer?
tengo un curso
donde hablamos del use reducer
que antes lo hemos estado comentando
se ve más bonito
yo creo que se ve mucho más limpio
en lugar de tener que poner
el provider
bueno vamos a hablar
de las actions
que este también es
bastante interesante
como no quiero aburriros
de crear
desde cero un ejemplo
y todo esto
vamos a hacer una cosa
para ir un poco más rápido
y ligeros
¿vale?
y es
en clase
aquí voy a poner
actions.jsx
y me voy a copiar
este ejemplo
¿vale?
os explico el ejemplo
no os preocupéis
que os lo voy a explicar
pero no tiene mucho misterio
no tiene mucho misterio
porque vais a ver
que es pues
un formulario
con muchas cosas
ahí a saco
y utilizando
un montón de estados
y ya está
¿vale?
a ver
vamos a ver si se renderiza
¿vale?
utils
ah porque tenía
una carpeta utils
aquí
a ver
voy a traerme
la carpeta utils
también
y así
carpeta utils
que básicamente
la carpeta utils
esta
que el otro día
hice un chiste
de la carpeta utils
que seguro que todos
estamos en la misma hoja
esto lo único que hace
es simular
que tenemos
una API
que tarda 3 segundos
¿vale?
y que además
hace una validación
que si el nombre
que se le pasa
es menor a 3
pues peta
y así pues al menos
tenemos una forma
de verlo
eso es la única magia
que hay aquí
tenemos un componente
que le he llamado
actions
voy a poner
actions example
¿vale?
para que quede mejor
que es un ejemplo
y tal
y tenemos un montón
de estados
tenemos un estado
para el nombre
para el error
para saber si está
haciendo loading
para el resultado
tenemos un método
handle submit
que lo que hace es
que cuando hacemos
un on submit
del formulario
pues viene aquí
previene por defecto
el evento
que utilizaría el formulario
que refresca
el navegador
y todo
tenemos que actualizar
el estado de pending
tenemos que actualizar
el nombre
esto sería
llamar a la API
que es asíncrono
esto nos devolvería
un error
entonces ya sabríamos aquí
que ya no estamos
haciendo el loading
si tenemos un error
tenemos que setear el error
setear el resultado
¿no?
tenemos que hacer
un montón de cosas
un montón
un montón de cosas
claro y aquí además
esto debería ser así
¿vale?
pues si o sea
ah no
esto estaba bien
esto en el resultado
se supone que debería ser
bueno
vamos a poner vacío
o tendría que ser anterior
es que es bastante más complicado
de lo que parece
pero o sea
si quisiera poner el valor anterior
sería mucho más complicado
para eso luego veremos
el use optimistic
tendríamos el formulario
con un input
que se va a desactivar
cuando está pending
con el playholder
cada vez que cambia el input
pues cambiamos el estado
el botón también se desactiva
mientras se está cargando
y al final mostramos
el error
o si se ha guardado el nombre
¿vale?
aquí en funcionamiento
lo teníamos aquí
por ejemplo
si pongo midu
le doy a actualizar
cuando tardan 3 segundos
si lo ha podido guardar
pondría el nombre guardado
en midu
si le pongo
aa
¿vale?
pues aquí pondremos
¿vale?
y el nombre debe tener
al menos 3 caracteres
además
pues otra cosa
que me gustaría
para que
para que realmente sea
como funcionan
los
los formularios
¿vale?
vamos a poner
bueno
que pueden funcionar
de las dos formas
pero bueno
para
para que veamos
el ejemplo este
vamos a poner
que
se reinicie
el formulario
vamos a poner
este formulario
aquí
vamos a poner
formref
y aquí
cuando haya terminado
vamos a poner
formref
punto current
reset
¿vale?
para resetear
entonces si ponemos
midu
a ver
debería resetearse todo
vale
no se ha reseteado
ha pasado totalmente
de mi
ah
porque tiene un value
o sea
tenemos que cambiar
el value
no lo voy a hacer
da igual
es que eso no es importante
eso es porque
os quería enseñar algo después
pero bueno
ya veis que es
lo típico
que tiene muchos estados
para controlar
cada una de las cosas
que hay aquí
cosas que son asíncronas
que nos están complicando
especialmente
ya empieza
va a ser un poco
molesto
el tema del loading
¿no?
de que tengas que mirar
si está cargando
si por qué está cargando
y todo esto
lo primero que podríamos hacer
es utilizar el nuevo hook
use transition
el use transition
lo que nos permite
es controlar
y que nos genere
como un valor
de si hay una transición
una llamada asíncrona
que está funcionando
o ha dejado de funcionar
entonces
en lugar de tener
el use pending
set is pending
y todo esto
lo que podríamos hacer
es directamente
tener aquí
un use pending
y un start transition
y crear una transición
¿vale?
las transiciones
como decía antes
son en funciones asíncronas
que lo que nos permite
es no bloquear
el renderizado
de nuestra UI
y decir
vale
pues mientras está ocurriendo
vamos a iniciar aquí
la transición
porque quiero
aquí
hacer todo esto
de aquí dentro
y ya no me voy a tener
que preocupar
de hacer el
use pending
o no pending
eso ya lo va a hacer
automáticamente
porque va a detectar
aquí vamos a poder
poner que es una función
asíncrona
y esto va a detectar
quitamos el set is pending
lo va a detectar
automáticamente
ya movemos esto aquí
¿vale?
y esto que al final
no lo uso
vamos a quitar
por aquí
¿vale?
ya no necesitamos
nosotros saber
cuando lo tenemos
que cambiar
el valor
de está cargando
o no está cargando
porque automáticamente
este start transition
en cuanto inicie
vamos a tener
el dispending
en true
y cuando termine
lo vamos a tener
a false
y ya no tenemos
que tener ahí
un control
de justo cuando estamos
haciendo la API
o no
automáticamente
cuando inicie
pasará a ser true
cuando termine
todo esto
pasará a ser false
y además
tiene otra ventaja
y la ventaja
la tenemos aquí
con esta llamada síncrona
que como digo
lo que va a hacer
es que no va a bloquear
la UI
así que si por lo que sea
aquí tenemos
pues actualizaciones
de estados
como esto
¿no?
del set result
y todo esto
lo que va a hacer
es que va a liberarlo
para no bloquearlo
y así
si por ejemplo
estuviese escribiendo
en el input
podríamos ver
que se podría ir
actualizando el input
sin ningún tipo de problema
mientras
esto se está
se está resolviendo
¿vale?
así que esto sería
una transición
sería el primer paso
esto es un nuevo hook
useTransition
para hacer transiciones
de la UI
que sean asíncronas
y ya nos estaría quitando
el tener que preocuparnos
del loading
¿vale?
y no tenemos que poner
setLoading
True y False
o sortispending
como lo queráis llamar
¿vale?
y esto si lo hemos hecho bien
¿vale?
debería funcionar
exactamente igual
sería lo mismo
lo tenemos aquí
¿vale?
pasan 3 segundos
el nombre guardado
midu
y ya está actualizando
automáticamente
el ispending
le está cambiando
el valor
a True o False
de cuando
estaría aquí
cuando empieza
el ispending
sería True
y finalmente
cuando aquí
cuando termina
el ispending
pasaría a ser False
así que ya no tendríamos
nosotros que llamarlo
esto cada vez que hagas una app
llames a una app
y que seguro que las tengo que hacer
mil millones de veces
de llamar el setLoading
y todo esto
pues sería bastante molesto
pero todavía
se puede mejorar bastante
porque aquí podemos ver
que tenemos que trabajar
con un formulario
que tenemos
el error
el resultado
que si tenemos que hacer
una transición
que tenemos que hacer el submit
que son cosas que son muy típicas
que hacemos constantemente
y el equipo de React
en React19
ha añadido un hook más
que se llama
useActionState
solo que el useActionState
ah no, sí, está aquí
no, es que hay uno
sí que es aquí
es que hay uno
que está en ReactDome
que hay un nuevo hook
que está en ReactDome
pero el useActionState
yo creo que está aquí
y vais a ver
como esto simplifica
un montón de cosas
mira
vamos a dejar el result
lo vamos a dejar ahí arriba
¿vale?
pero todo esto
que tenemos por aquí
todo esto
lo vamos a simplificar
un montón
lo voy a comentar
por ahora
y voy a poner por aquí
vamos a tener
por un lado el error
por otro lado
la acción
y por otro lado
el isPending
y aquí vamos a tener
un useActionState
y aquí
pues podríamos tener
optionNameAction
o sea
theNameAction
¿vale?
vamos a crear
podríamos crear
el updateNameAction
que es una función
asíncrona
y que le podemos pasar aquí
tendríamos el estado
el previousState
previousState
y tendríamos
el formData
todos los datos
del formulario
aquí
lo que nos va a recibir
este input
podemos ponerle un nombre
y aquí tendríamos
por ejemplo
voy a poner
username
¿vale?
ahora todo este
handleSummit
todo esto
ya no lo necesitamos
tampoco vamos a necesitar
este estado del nombre
ni este value
porque lo vamos a manejar
directamente
con este
useActionState
que aquí vamos a tener
toda la información
que necesitamos
y este
submitAction
se lo vamos a pasar aquí
como una acción
¿vale?
una acción
que es asíncrona
y donde vamos a preocuparnos
de todo lo que tenemos que hacer
aquí este
updateNameAction
vamos a poder recuperar
por un lado
un nombre
que lo tenemos en
formData
y lo recuperamos
como username
esta cadena de texto
que es mágica
viene de aquí
¿vale?
si yo aquí pusiera
Pepito
pues si quiero recuperar
este input
tenemos que poner aquí
Pepito
¿vale?
no es que
es username
porque es username
es username
porque yo le he puesto aquí
que se llame username
y si quisiera recuperar
otro input
que se llamase diferente
tendrías que ponerlo aquí
¿vale?
en este caso
solo tenemos el name
bastante sencillo
y ya está
luego tendríamos aquí
yo tengo que
el updateName
este
que teníamos en los útiles
update
aquí en los útiles
¿vale?
yo aquí lo que he hecho
es que
cuando resuelve
que devuelva directamente
el error
pero no tiene por qué
ser el error
aquí
esta primera parte
esto digamos
que es el state
o el resultado
o lo que tú quieras
que va a pasar
yo le he llamado error
porque estoy devolviendo
directamente
el error
de aquí
¿vale?
o sea
que si paso algo
hay un error
y si no
no
para simplificarlo un poco
¿por qué?
porque si no
pues podríamos haber puesto
que esto sea un error
y el error sea true
y el message
sea no sé qué
¿vale?
o sea
podríamos hacerlo
de diferentes formas
para básicamente
cambiar esto
y entonces tener que hacer
un poquito más
de condicionales
de if
de mirar
yo lo he simplificado
al máximo
para que
nos podamos fijar
en lo que es más importante
hostia
¿qué es deshacer?
no, no
que la lío
y lo que estoy haciendo
es que si tiene algo
que no es undefined
es que tenemos el error ahí
y ya está
por eso le llamo directamente error
pero piensa que esto sería
el state
que se puede llamar
como tú quieras
¿vale?
entonces
aquí el update name
que es asíncrono
si me devuelve algo
es un error
esto es exactamente lo mismo
de cómo estaba funcionando aquí
que cuando llamamos a la API
lo que devolvía era el error
y ahora
si tenemos un error
pues lo que hacemos aquí
es devolver el error
¿vale?
si en este método
de una acción
tú devuelves algo
lo que vamos a tener aquí
es lo que se va a meter
en este estado
por lo tanto
si quiero guardar el error aquí
pues le tengo que devolver
el error
si quisiera guardar un objeto
que fuese
isError
error
true
message
bla bla bla
pues aquí tendríamos el state
y tendríamos
state.isError
pero bueno
en este caso
como queremos directamente
tratar con error
lo devolvemos aquí
y si no tenemos un error
pues podemos devolver null
pero antes
yo sí que voy a guardar
en el resultado
el name
y como este
setResult
lo tengo aquí dentro
este método
vamos a pasarlo
aquí
¿vale?
lo ponemos aquí
y ya lo tendríamos
en este caso
yo no estoy utilizando
el estado previo
¿por qué?
porque no lo necesito
pero puede ser que
en muchos formularios
sí que realmente necesites
acceder al estado previo
y ver
que lo que tenías antes
para hacer una comparación
una validación
para enviar esa información
también
lo que sea
¿vale?
la tienes aquí disponible
yo no la estoy utilizando
y ya estaría
pero fijaos
que
todo lo que estábamos haciendo aquí
todo esto
que estábamos haciendo aquí
ahora
lo estamos haciendo
con esto
o sea
estábamos haciendo
todo esto
todo esto
con todos estos estados
ahora lo estamos haciendo así
con simplemente esto
con mucho menos
porque además también
no estábamos gestionando
este estado
no lo necesitamos
y ya está
estamos utilizando
una acción
asíncrona
que ya nos está dando
cuando está haciendo
el loading
cuando tiene el error
la acción que tenemos que llamar
el on submit
nos está haciendo
el prevent default
lo está haciendo todo
todo por nosotros
no nos tenemos que preocupar
absolutamente de nada
nos está simplificando
un montón la vida
porque de otra forma
ya habéis visto
que necesitamos
hasta cuatro estados
vamos a ver si funciona
porque puede ser
que alguna cosa
se me haya
se me haya escapado
pero vamos a probarlo
vale
vamos a ver
si yo pongo aquí
midu
vale
cargando
y tu tu tu
el nombre de guardados
midu
si pongo aa
pues fíjate
debería
el nombre
debe tener al menos
tres caracteres
o sea
funciona exactamente igual
solo que la diferencia
es que lo hemos simplificado
mucho más
fíjate la diferencia
todo esto
necesitamos
tres estados
tenemos que poner
un handle submit
con un evento
tenemos que hacer
el prevent default
tenemos que hacer
el start transition
porque
no queríamos
nosotros manejar
cuando hacía loading
y tal
pero fíjate
que aquí
ni siquiera
en ningún sitio
le estás indicando
nada de eso
simplemente
lo estás llamando
esto es asíncrono
detecta que es asíncrono
y ya tendrías aquí
en el list pending
estaría detectando
cuando está actualizando
esto
y cuando está actualizando
lo otro
y no nos tenemos que preocupar
absolutamente de nada más
cuando hay un error
también lo tenemos aquí
porque tendríamos
de la acción
tenemos un estado
aquí yo le he puesto error
que podría ser otras cosas
y cuando tenemos un error
renderizamos el error
y cuando tenemos el resultado
y no el error
mostramos el resultado
y ya está
o sea
hemos simplificado muchísimo
la gestión del formulario
esto que quiere decir
pues bueno
a ver
la idea sería un poquito
que ahora
siempre que necesitemos
un formulario
revisar esto
para evitar
tener que utilizar
demasiados estados
y nos va a simplificar mucho
porque normalmente
una cosa que nos va a permitir
es el hecho de sacar
este tipo de acciones
sacarla de nuestros componentes
¿vale?
y ya está
muestra el html
pues ¿qué le pasa al html?
pues no tiene ninguna historia
el html
el html es normal y corriente
aquí
form action
ah lo dices por este
lo dices por este
porque te muestra este error
bueno
pero este error
no sé si en producción aparece
¿vale?
pero básicamente
esto lo que te dice
es que
si intentas llamar
el submit
de forma manual
pues te va a dar un error
y tal
pero yo creo que esto
no te va a aparecer
en producción
seguramente
esto serán cosas
que las ponen
para que
en desarrollo
te aparezca
pero si sacas la función
le puedes pasar el set
lo que podríamos hacer
para sacar el set
este set result
lo que podríamos crear
aquí
un create action
create action
que se le pase aquí
el set
el update
state
y luego aquí
ya tendríamos
el previous state
form data
y ya está
podríamos hacer algo así
y entonces
lo que conseguiríamos
con esto
sería sacarlo
este update state
lo pondríamos aquí
y este create action
lo haríamos así
con el set result
y ya está
y si no he hecho
nada raro
pues esto
funcionaría
igual
¿vale?
exactamente igual
lo que hemos hecho aquí
es una
una factoría
una función
que crea otra función
que le estamos inyectando
el update state
para no tener que estar
dentro del componente
y ya está
estas son las cosas
que haces un poquito
cuando ya has subido
un poquito de nivel
o sea
porque a lo mejor
un junior aquí se lía
pero esto es muy típico
de crear una función
desde una función
¿no?
vale
entonces
aparte de esto
solo para que
lo
para
ponemos otro ejemplo
voy a poner el código anterior
que este igual
a la gente le lía
y se asusta
y se va corriendo
y todo esto
lo dejamos así
aparte de esto
otra cosa que podéis hacer
que es bastante interesante
es el tema
de el hook
use form status
es muy típico
como por ejemplo aquí
imagínate que este botón
que tenemos aquí
lo teniéramos
en un componente separado
tenemos aquí el button
que esto es muy normal
porque
los formularios
no siempre los puedes tener
en el mismo sitio
claro
lo más fácil
sería pensar
que le pasas el e-spending
¿no?
pero claro
a veces puedes tener aquí
puedes tener un montón de cosas
¿vale?
puedes hacer esto
y esto funcionar
pues funcionaría
cuando utilizamos esto
¿ves?
cargando
y el botón
funciona correctamente
pero
hay veces
que no te interesa
tener que estar pasando
constantemente
toda la información
para abajo
pues hay un hook
especial
que se llama
use form status
¿vale?
de React DOM
que lo que te permite
es llamarlo aquí
directamente
y puedes
recuperar
diferente información
por ejemplo
si está en pending
vale
le quitamos de la prop
pues ya no tiene sentido
¿ves?
ya no estamos utilizando
ninguna prop
y le pasamos el e-spending
y esto debería funcionar
igual
pero no funciona igual
porque la he liado
con alguna cosa
que no tengo ni idea
que la he liado
a ver
use form status
e-spending
debería detectar esto
a ver si es que lo he importado
de donde no es
a ver
use form status
use form status
no, si que lo he hecho bien
del React DOM
a ver si lo he visto
te falta el type submit
no, pero el type submit
yo creo que debería
pillarlo automáticamente
o sea, al final
lo que queremos aquí
es el e-spending
ah, espérate
si
es pending
no es e-spending
es pending
esto es lo que pasa
por no utilizar
typescript
vale
es pending
ya está
vale
entonces
cómo funciona esto
qué magia
hace
aquí
fijaos
ahora escribo
ves
ahora ha detectado esto
este hook
lo que hace
es detectar
dentro
de qué formulario está
y si este formulario
está
utilizando una action
tienes diferente
información aquí
a la que puedes acceder
no solo al pending
también puedes acceder
a toda esta información
que ahora no me acuerdo
toda de memoria
a los datos
todo esto
a la propia acción
o sea
toda esta información
la tienes aquí
por ejemplo
tendríamos los datos
para hacer un form data
tendrías el method
la acción
si está cargando
toda esta información
la tendríamos ahí disponible
por ejemplo
en data
creo que podríamos hacer
data username
podrías acceder
a cualquier dato
del formulario
vale
así que
si tuvieses otros campos
por ejemplo
igual aquí
pues no
el data
no es el data
que esperaba
data
puede ser
porque al principio
es null
claro
data.getusername
claro
que al principio es null
puede ser
si ahora pongo midu
¿veis?
data
lo tengo en midu
¿por qué?
porque puedes acceder
a cualquier campo
del formulario
desde aquí
esto es bastante potente
porque imaginad
que tuvieses aquí
otro input
con el name
yo que sé
vamos a ponerle
secret
¿ok?
vamos a poner
type password
y ya está
vamos a poner
value
o initial value
initial value
1,2,3,4,5,6
claro
lo interesante
es que esto
lo podrías
podrías acceder
a este secret
initial value
hostia
¿cómo era?
el default value
hace tiempo
que no utilizo
el 1,2,3
¿vale?
pues esto
tú podrías acceder
a este secret
y poder acceder
desde el custom hook
este
lo cual lo hace
pues bastante interesante
¿ves?
1,2,3
has podido acceder
desde el custom hook
sin necesidad
de pasárselo
por props
o sea
accedes a toda
la información
que tienes
en el formulario
esto está
bastante chulo
¿ya no usará
React Hook Form?
sí que se utilizaría
React Hook Form
lo que pasa
es que sí que puede ser
que simplifique
un montón
algunas cosas
de React Hook Form
eso es lo que creo
que puede ocurrir
pero yo creo
que se seguirá
utilizando
y lo que pasa
es que
algunas cosas
te vendrá bien
hacerlos con React Hook Form
y otras cosas
a lo mejor con esto
te lo simplifica bastante
pero no creo
que esto haga
desaparecer React Hook Form
creo que al final
lo que va a hacer
es
que viva
el uno con el otro
y ahora
vamos con el último
el último
y bastante interesante
que os voy a enseñar
es un ejemplo
bastante
bastante simple
este sería
el último hook
que han añadido
en React 19
¿vale?
vamos a poner
use optimistic
example
punto JSX
ya también lo tengo
preparado
por aquí
¿vale?
y ahora os enseño
un poquito
cómo funcionaría
vamos a renderizarlo
vamos a poner
use optimistic
example
y ahora os explico
cómo funciona
¿vale?
tengo aquí un hola mundo
que cada vez
vamos
cada vez que escribes
¿vale?
tú cada vez que escribes
le das a enviar
va a la API
y cuando va a la API
y lo guarda
lo guarda en el estado
¿cómo lo hace?
pues aquí lo tenemos
este sería
el deliver message
esto sería
simular
que llamamos
a una API
que lo que hace
es tardar un segundo
por eso ves
ese retardo
¿no?
entre cuando enviamos
el mensaje
que cuando tú escribes
cuando escribimos
fíjate que tarda
un segundo
en que aparezca
¿por qué?
porque este
deliver message
que ya estamos utilizando
fíjate
estamos utilizando
una action
como muy parecida
a la que hemos hecho antes
lo que está pasando
es que envía el mensaje
esperamos
a la
estamos esperando
a la API
y cuando resuelve
lo guardamos en estado
esto lo has tenido
que hacer
seguro
10.000 millones de veces
¿de qué?
llamas a una API
cuando trae
los cambios
cuando ya
ha funcionado correctamente
entonces lo guardas
en un estado
pero claro
tienes este
esta experiencia
de usuario
mala
mala
porque le das
se queda así
que parece que no pasa nada
y luego aparece
bueno
pues esto tiene
un arreglo
obviamente
podrías utilizar
React Query
podrías utilizar
SWR
hay diferentes
bibliotecas
que puedes
arreglar esto
pero de forma nativa
en React
necesitarías
un montón de estados
y de historias
¿vale?
¿cómo lo podemos hacer?
sin necesidad
de nada
de forma nativa
en React
que además
nos va a facilitar
y nos va a mejorar
un montón
la experiencia de usuario
pues lo que podemos hacer
es utilizar
este custom hook
que se llama
Use Optimistic
el Use Optimistic
lo que vamos a crear
sería como una especie
de estado
¿vale?
vamos a hacer
Use Optimistic
que lo que tiene aquí
es decirle
el valor
que va a tener
Use Optimistic
es el del estado
Messages
¿vale?
tenemos aquí el estado
Messages
pues este es el que vamos
a utilizar
y cada vez
que queramos
actualizarlo
vamos a tener
el estado actual
y el nuevo mensaje
y le tenemos que indicar
cómo tenemos que actualizar
el estado
en este caso
cuando queramos actualizar
de forma optimista
lo que queremos es
que siga el mismo estado
y añadirle
un nuevo mensaje
donde tenemos
el texto del mensaje
y le vamos a poner
qué se está enviando
porque fíjate que
los mensajes
tenemos el texto
si se está enviando
y por otro lado
la key
¿vale?
entonces en el sending
lo tenemos a false
porque no queremos mostrar
que lo estamos enviando todavía
pero los que son optimistas
vamos a poner el sending
a true
porque fijaos aquí
que vamos a poder indicar
que si está en sending
le vamos a indicar
ahí en pequeño
que está haciendo un enviando
y vas a ver visualmente
que queda muy
pero que muy bonito
entonces
vamos a poner aquí
vamos a poner
que el Use Optimistic
devuelve dos cosas
los mensajes
Optimistic
Messages
y una forma de añadir
mensajes
de forma optimista
¿y dónde hay que llamar esto?
pues hay que llamarlo
justo antes
de cuando llamas
a la API
justo antes
de llamar a la API
lo que vamos a hacer
es actualizar
de forma optimista
el estado
¿y por qué se le llama optimista?
¿por qué es una persona
que vive feliz y contenta?
sí
no
bueno aparte de eso
porque lo que quiere decir
es que
no va a esperar
al resultado del servidor
va a actualizar
un estado optimista
y va a decir
oye
si ha ido bien
pues perfecto
yo voy a actualizar esto
y se lo voy a mostrar
al usuario
para que vea
que ha ido bien
pero si por lo que sea
noto que algo va mal
voy a darle la vuelta
voy a ir a hacer un rollback
voy a volver al estado anterior
para eliminar eso
porque si no
el usuario
se va a quedar
en la UI
algo que no tiene sentido
entonces
voy a pretender
que todo va a ir bien
pero si algo va mal
lo que voy a hacer es
volver al estado anterior
por eso es súper importante
por eso es importante
que en el Use Optimistic
aquí le estamos pasando
esta referencia
del Messages
para que sepa
que si algo ha ido mal
tiene que volver
a este estado
de aquí
del Messages
pero si ha ido bien
pues utilizará este
y ya está
¿y cómo esto queda?
eso es engañar al usuario
le das el ok
sin tener el ok
no es engañar al usuario
de hecho esto lo hace Twitter
lo hace Facebook
lo hace Instagram
lo haces en todos
en Twitter
si lo habréis visto
un montón de veces
que envías un tweet
y luego nos envía
y te dice
no lo he podido enviar
y tú
pero si me habías enseñado
la UI que estaba ahí
¿no?
bueno
pues
¿cuándo tenemos que utilizar esto?
aquí en Messages
que esto sería el estado
en lugar de utilizar Messages
vamos a mostrar
los mensajes optimistas
¿vale?
ahí lo tendríamos
y con estos cambios
si ahora nos vamos aquí
al navegador
y no he hecho nada raro
fíjate vamos a poner
vamos
y le doy al enter
vamos enviando
fíjate que le hemos dado
la visibilidad
de que lo estamos enviando
pero lo hemos podido mostrar
¿vale?
lo hemos mostrado
lo mostramos
al usuario
¿vale?
lo mostramos al usuario
ves que hay con un enviando
y luego
lo dejamos como está
¿por qué?
porque se actualiza este estado
y dice
vale
como ya he actualizado este estado
pues ya no puedo dejar
los eventos que sabes
que casi nunca van a fallar
claro
como enviar un mensaje
o un like
exacto
pero
podría fallar
o sea
podríamos poner aquí un reject
¿vale?
podríamos poner aquí un reject
y claro
en este caso
si falla
creo que no va a hacer el
¿ves?
no va a funcionar correctamente
porque lo que tendríamos que hacer
es hacer un try-catch
cambiar el set messages
para volver a poner el anterior
y todo esto
o sea
nos faltaría un poquito de código
para arreglarlo
¿vale?
para que no se quedase así
y que realmente nos lo arregle
porque si no
pues no se va a quedar
no se va a quedar bien
teníamos que ver en el messages
tendríamos que volver a hacer
un set messages
del anterior
no sé si podríamos hacer un try-catch
aquí
vamos a probarlo
a ver si con esto ya nos lo arreglaría
y
no
esto no sería así
esto sería aquí así
y aquí en set messages
creo que tendríamos que poner
en messages así
tendríamos que volver al anterior
a ver
¿veis?
ahora sí
esto es lo que tendríamos que hacer
para manejarlo
lo que vamos a hacer aquí
es decir
oye
voy a hacer un set messages
voy a hacer el delivery
de la API
yo ya de forma optimista
ya lo he actualizado
aquí actualizaría el estado
si ya ha ido bien
para que
se quede con el nuevo
que además
tendría el sending
lo tendría false
y luego
si ha habido un error
voy a actualizar el estado
pero con los mensajes anteriores
y entonces ahora sí
vamos
claro
ahora entonces
lo quitaría
porque ha habido un error
aquí lo bueno es que vosotros aquí
podríais llamar
a un Toastify
y mostrar
que ha fallado
¿vale?
o sea no hace falta
que desaparezca y ya está
sino que realmente aquí
podríais llamar
a una notificación
que aparezca en la UI
oye
ha habido un error
por eso no
por eso ha desaparecido
vuelvo a probarlo más tarde
pero voy a actualizar
el estado correctamente
y si ha funcionado bien
pues nada
aquí lo que vamos a hacer
es que
bueno
si funciona bien
le pongo el enviando
cuando se cambie el estado
lo dejo ahí
y ya está
la verdad
es que está súper bien
mejora un montón
la experiencia
me parece una cosa
bastante bonita
así que
ahí está
Toastify
te la creíste
ahí está
pues esas son
todas las novedades
sí sí
le hemos dado caña
y hemos hecho
todas y cada una
de las novedades
que no estaba mal
no han hecho nada
de rutas
porque todavía
eso es una cosa
que está totalmente
extendada la biblioteca
y para eso
pues hay que utilizar
Real Router
Nex
o lo que sea
así que nada
espero que os haya gustado
mucho
justo en dos horitas
clavado
le he dado cañita
espero que os haya gustado
mucho
todo el repaso
a React 19
que os guste
un montón
esto es un resumen
de las 16 horas
de forma práctica
con código
y desde cero
para que lo podáis
lo podáis saber
os recuerdo
que el 28 de mayo
tenemos
el evento de programación
le podéis dar aquí
a guardar fecha del evento
y esto
os va a decir
a qué hora lo tenéis
en vuestra zona horaria
entonces
aceptad la invitación
y ahí pues no lo perdéis
y así sabréis
exactamente
cuándo es
el evento
el evento
que vamos a tener
a Rita
Coach
que nos va a estar hablando
de cómo podéis hackear
vuestra cabeza
para mejorar
y aprender más
en programación
vamos a tener a Rómulo
para que nos hable
del futuro de JavaScript
él es parte
del TC39
de este grupo de gente
que decide
qué es lo que entra
en JavaScript
bueno pues Rómulo
es parte
y nos va a explicar
todo lo que se viene de nuevo
David East
todas las charlas
son en español
Irene Morgado
vamos a tener a Carmen
vamos a tener a Héctor de León
Gonzi
y Daniel de la Cruz
así que están todos
más que invitados
para pasarse
que vamos a tener sorteos
sorpresas
y un montón de cosas más
espero y deseo
que hayas aprendido algo nuevo
espero que te haya gustado mucho
cuidaos mucho
nos vemos mañana
espero que hayáis aprendido
y os haya gustado
el repaso a React19
gracias por estar aquí
gracias a todos los que han suscrito
que no he podido estar por ustedes
pero mañana estamos hablando más tranquilamente
chicos