En la clase de hoy vamos a ver cómo podemos evitar renders innecesarios.
Vamos a mejorar un poco el rendimiento de nuestra página,
de nuestra aplicación con React.
Vamos a ver diferentes técnicas, diferentes problemas.
Vamos a ver la React Developer Tools para aprender
cómo podemos extraer esta información
utilizando esta herramienta que es totalmente de código abierto
y que podemos utilizar en nuestros desarrollos.
Me estaba riendo porque Sergio me ha dado otros 2 dólares.
Es lo que te mereces, crack.
Muchas gracias, Sergio.
Te lo agradezco también.
Pues el caso, que React Developer Tools es una extensión
que es oficial de React y es la primera que vamos a ver
y vamos a aprender un poquito cómo utilizarla
y cómo extraer información para saber dónde están los problemas
de nuestra aplicación en cuanto al rendimiento.
Y lo vamos a solucionar.
Nuestra aplicación es un poquito sencilla, ¿vale?
Pero aún así, estos ejemplos nos pueden servir en aplicaciones más grandes.
Eso es la primera parte.
Segunda parte, vamos a ver cómo podemos hacer el deploy, ¿vale?
Vamos a llevar nuestra aplicación a la web.
Y para ello vamos a utilizar el servicio de Vercel.
Así que vamos a ir empezando y vamos a ir compartiendo la pantalla.
Lo que estabais escuchando, ¿vale?
Lo que estabais escuchando esta musiquita de fondo
es porque he creado un vídeo que os recomiendo un montón,
que lo colgué ayer, de música para programar.
Música que yo utilizo para programar.
Y he hecho este vídeo que, bueno, os recomiendo que lo utilicéis
pues si alguna vez queréis programar lo ponéis de fondo, ¿vale?
Y así os acompaño.
Y esta música a mí me gusta bastante para programar.
Me relaja y me hace focalizarme bastante.
Así que ahí lo tenemos.
Luego, el código, como siempre...
¡Ay! He quitado la musiquita.
Andar, que yo también quería dejarla de fondo porque me gustaba.
Vamos a dejarla por aquí en medio.
Vale. Vamos a ponerla por aquí.
Más o menos.
Ok.
Luego, como siempre, el repositorio donde tenemos el código
de nuestra aplicación, ¿vale?
Donde está toda nuestra aplicación con todo el código.
Tenemos diferentes ramas en las que hemos ido subiendo
cada una de las clases.
Y aquí tenéis todas las clases, ¿vale?
Están todas ordenadas por su orden.
Si no, en mi blog también tenéis el curso.
Y también tiene una pequeña explicación y podéis ver un poco el orden que hemos seguido.
Cada una de ellas.
La última, la de la semana pasada, fue que añadimos grid, hicimos infinity scroll
y añadimos algunos test, pues ahí lo tendríais.
Y este, pues también lo añadiré aquí.
Y, bueno, por supuesto, pues nada, recordaros que tengo un Instagram maravilloso.
Que, bueno, pongo chistes malísimos como este.
De si no es un bug, pues es que es una feature.
Es malísimo, lo sé.
Pero, bueno, yo me divierto con estas cosas.
Así que os invito también que me sigáis por ahí.
Así que vamos a darle a nuestra aplicación.
Para el que no la haya visto, esta es nuestra aplicación, el buscador de GIF,
donde podemos buscar diferentes GIFs.
Pues podemos buscar Avengers, Avengers.
Y, pues, nos encuentran los Avengers.
Y habíamos hecho un infinity scroll, ¿no?
Que íbamos haciendo este scroll, íbamos cargando más, y habíamos hecho grid.
Bueno, no sé, una maravilla.
Esta aplicación ya es una maravilla.
Bueno, todavía hay cosas que podríamos seguir arreglando, por lo que veo.
Pero ahí está.
Está funcionando, que es lo importante.
Bueno, Matrix.
Aquí está.
Vale.
Entonces, lo que vamos a ver, lo voy a poner aquí en esta group, aquí.
Y lo voy a abrir aquí.
Lo que me gustaría enseñaros es una extensión que se llama React Developers Tools,
que os va a dar estas dos pestañas de aquí.
La de Components y la de Profiler.
Entonces, para conseguir estas, pues, tenéis que ir a React Developers Tools Extension.
Lo voy a buscar así a saco.
A React Developers Tools.
Y aquí, pues, os lo instaláis.
¿Vale?
Yo ya lo tengo instalado, así que me sale aquí desinstalar.
Y no lo voy a desinstalar, que si no me voy a quedar sin.
Así que, si no la tenéis, os la instaláis.
Lo que digo, es oficial de Facebook.
Y vamos a ver cómo utilizarla, porque tiene cosas súper interesantes.
Entonces, cuando os la instaléis, aquí arriba a la derecha, aquí, aquí os aparecerá un iconito.
Yo es que me lo he quitado, porque si no, se me acumulan los iconos.
Pero es este, este iconito de aquí.
Entonces, cuando entréis a una aplicación como Fotocasa, por ejemplo, que sabemos que tiene React,
¿vale?
Pues, os aparecerá el iconito con color.
Y al darle, pues, os dirá, ah, mira, pues, esta página utiliza React y está en modo producción y tal.
O sea, que en esta página, en cualquier página, podríamos abrir las herramientas de desarrollo
y tendríamos estas pestañas y podríamos inspeccionar, pues, todo el árbol de elementos y tal.
Así podemos ver cada uno de los componentes que hay en esta página.
Y en Profiler, que lo vamos a ver ahora, pues, nos daría información sobre cuándo se ha hecho un renderizado,
por qué y un poco ver cuánto ha tardado en cada uno.
Pero, obviamente, este modo no lo tenemos en modo producción.
Así que, como puedes ver, pues, tenemos este Profiling Not Supported.
Es lo que hay, es una pena, hubiera sido una maravilla.
Pero, obviamente, cuando subimos a producción, pues, lo que hacemos es intentar subir el mínimo código posible
y, por lo tanto, pues, están quitando todo el código del Profiling, ¿vale?
Así que, ya sabemos un poco, React Developers Tools, aquí tenemos nuestra herramienta que nos va a servir hoy
para encontrarle algunos fallitos a nuestra aplicación.
Son fallitos leves, pero aún así, creo que está bien si los vamos aprendiendo, ¿vale?
Veo que se va conectando gente, que van diciendo hola, hola.
Tenemos por aquí Carles Núñez, que también se acaba de conectar.
Tenemos a más gente, hay alguien que se va.
O sea, acaba de venir, pero ya se tiene que ir porque dice que se lo va a perder.
Es John Doe, pero, bueno, que le ha salido un meeting.
No pasa nada, John Doe, no pasa nada.
De nuevo, gracias, Sergio Serrano Garces, por esos dos dólares.
Te lo agradezco un montón.
Así que, nada, continuamos.
Vamos a ver nuestra aplicación.
Primero vamos a ver los componentes, ¿no?
Aquí tendríamos un poco el árbol de componentes de nuestra aplicación
y podéis ver, pues, la ruta.
Y dentro de la ruta, ¿qué tenemos?
Pues, la Home, que es lo que estamos renderizando.
Y lo que es maravilloso es que, además, podemos ver el valor que tienen las props
y los diferentes estados o hooks que tenemos en nuestro componente.
Aquí estamos utilizando el de GIF y el de Location.
Y podemos ver dentro, pues, toda la información que tienen estos hooks.
Es súper avanzado y me parece brutal.
Y, de hecho, incluso puedes llegar a cambiar el valor de estos hooks al vuelo.
Aquí podríamos poner, pues, que esto va a ser true y cosas así.
De hecho, lo vamos a ver más fácilmente con el formulario.
Aquí podemos ver este formulario y aquí, pues, tenemos el children, el onSummit,
que es lo que le pasamos y todo esto.
Pues, luego veremos cómo le podríamos pasar aquí y poner, pues, que esto es Matrix.
Ahora, he cambiado aquí este state, que se llama state, y vete a saber qué es,
y he puesto Matrix.
Pues, fíjate lo que ha pasado aquí.
¿Ve?
Y es que este state que tenemos aquí, aquí cuando ponemos lo que sea, ¿no?
Avengers y ponemos un string y lo cambio, pues, podemos ver que ese state que tenemos aquí
se refiere al del formulario.
Entonces, ya ves que es bastante potente, ¿no?
Que puedes cambiar ahí al vuelo y es una maravilla.
Entonces, ¿por qué se llama state?
Porque el nombre, si miramos el código, ¿dónde?
Ay, aquí.
Si vamos al código de nuestro componente, aquí en la home, podemos ver que, claro,
como hicimos un use state, ¿no?
Y tenemos esto, las React Developer Tools no son capaces de saber el nombre de este estado.
No es que puede decir, ah, no, esta es la keyword.
Y por eso, pues, nos lo indica así, ¿no?
Dice, vale, sé que hay un state, pero no sé exactamente.
O sea, que a veces tienes que sacarlo un poco por el contexto.
Pero lo más interesante, aparte de todo esto, que esto era una mini introducción,
lo más interesante lo vamos a encontrar en esta ruedecita, ¿vale?
Y es que si le damos a la ruedecita, aquí podemos ver que tenemos diferentes opciones
que, vale, alguien, Emanuel Villanueva me ha dado 100 app, app, ARS,
no sé lo que son ARS.
Gracias a vos aprendemos y disfrutamos de nuestra profesión.
Mucho más.
Muchas gracias, Emanuel.
Te mando un abrazo enorme.
Tampoco sé cuántos son 100 ARS, pero suena un montón.
Así que te lo agradezco.
Así que tenemos tres pestañitas, ¿vale?
Estas tres pestañitas son general, componentes y profiler.
Es posible que cuando lo hayas instalado, el valor de estas opciones sea diferente.
Así que vamos a ir una a una, más o menos, para que lo tengas igual y para que te sirva.
Entonces, en el tema tendríamos, pues, nada, esto es una chorrada,
pero lo puedes poner en negro si quieres, ¿vale?
En tema oscuro.
Display Density, pues, un poco que esté un poquito más apretado o confortable.
Yo, como estoy medio cego, pues, lo dejo así, confortable, ¿vale?
Este es la clave.
Este es uno que nos va a chivar un montón de cosas, ¿vale?
Esto es como Highlight Updates When Components Render.
Esto es que nos va a pintar un cuadradito cada vez que nuestros componentes,
de nuestro árbol de elementos, alguno se ve afectado por un renderizado.
Y esto es genial.
Y ahora lo vamos a ver un poquito cómo funciona.
Seguramente lo tienes desactivado, porque si no es un coñazo, ¿no?
Cuando no estás desarrollando en serio y tal, pues, ver todo el rato ahí los flashes.
Pero lo tienes que activar.
Porque ahora veremos, si yo ahora escribo, pues, fíjate, ¿no?
Que ahora aparece como un recuadro en cada uno de los elementos que hay en la página.
Espero que se vea lo suficiente, ¿vale?
En la página, bueno, en el vídeo.
Pero si no, imagínate que todos los elementos se hace un flasheo rápido, ¿no?
Que se vea un recuadro ahí azul y tal.
Eso lo que nos está indicando es, vale, no sé lo que estás haciendo,
pero ha ocurrido alguna actualización en los componentes,
en la renderización de los componentes.
Y aquí ya tenemos la primera pista, ¿no?
Porque podemos ver que, o sea, yo escribo en el formulario
y estoy renderizando los GIF.
Esto no tiene mucho sentido, ¿verdad?
Aquí ya estamos notando que tenemos un problema de rendimiento
en nuestra aplicación.
Porque está haciendo cosas innecesarias.
Está renderizando cosas que no están cambiando.
¿Por qué debería volver...
¡Ay, qué bonito este GIF, ¿no?
Aquí, con el código.
¿Por qué debería volver a renderizar los GIF
si no están cambiando para nada?
No deberían verse afectados, ¿no?
Pues esto es lo primero que vamos a arreglar.
Luego, aquí en Components tiene una...
Bueno, el expand este es para que cuando entres en la pestaña Components
lo tengas todo ya expandido y está bastante bien.
Y luego que puedes ocultar componentes dependiendo de su tipo.
Y esto está bien porque puedes ocultar, por ejemplo,
los que sean elementos HTML,
porque a lo mejor no te dan información suficientemente interesante.
Y dices, bueno, pues no quiero los que son de HTML
o no quiero ver los que son clases o los que son contextos.
Porque podemos ver que aquí tenemos, por ejemplo,
estos que son de contexto.
Y, claro, esto crea como una...
Genera una estructura del árbol demasiado grande.
En este caso es muy chiquitita, ¿eh?
Pero si a lo mejor vamos a...
¡Ay, he puesto Fotocasa y quería ir a Facebook!
No sé si Facebook...
No sé si Facebook...
Seguramente...
Sí, vale.
Facebook también tiene sus componentes y tal.
Bueno, pues podéis ver que aquí esto es una locura.
Es una locura de todos los componentes
y todas las cosas que tiene.
Es muy difícil de leer.
Así que lo que puedes hacer no solo es buscar, ¿no?
Si dices, pues a lo mejor, bueno, por like,
esto como está minificado, pues ha perdido muchos nombres, ¿no?
Pero puedes ir buscando alguno en concreto.
Y si no, pues puedes filtrarlo con lo que hemos visto, ¿no?
En el Components dice, vale, pues fíltrame al menos estos
que son del tipo tal, ¿vale?
Pues eso.
Eso os puede ayudar un poco a entender mejor la estructura.
¿Vale?
Y entonces tenemos finalmente el Profiler.
Por ahora, yo creo que esto ya está bien.
Creo que este viene desactivado también por defecto.
El grabar por qué cada componente se renderiza
mientras estamos haciendo el Profiling, ¿vale?
Que básicamente el Profiling es como generar trazas
de cada una de las cosas que ocurren en nuestra aplicación
para ver en detalle más información.
Y esto es bastante importante.
Esto os recomiendo que lo tengáis activado
porque nos va a chivar por qué cada elemento se ha renderizado.
Nos va a decir, ah, es que ha cambiado el estado.
Ah, es que ha llegado a una nueva prop.
Ah, es que ha pasado esto.
¿Vale?
Así que lo activáis.
Muy bien.
Ay, veo que al final con la tontería he ocultado los HTML.
Vamos a dejarlos activados, ¿vale?
Para que tengamos un poquito más esto.
Bueno, por ahora ya podemos ver, ¿no?
Con lo de Matrix hemos visto que ya tenemos aquí este error
que es bastante evidente, ¿no?
Hay un error bastante evidente de que tenemos un problema
de optimización de nuestra aplicación.
Bueno, vamos al Profiler, que el Profiler es otro mundo aparte
y también nos va a chivar bastantes cosas,
sobre todo más información sobre este problema que tenemos con la búsqueda.
Entonces, le vamos a dar a este botón que está aquí,
que es para empezar el Profiling.
Esto lo que va a hacer es grabar todo lo que está haciendo nuestra aplicación
en términos de renderizado y ver por qué cada renderizado ocurre.
Así que le hemos dado y ahora si le damos aquí, pararíamos.
Vale, pues no ha pasado nada, ¿no?
Dice, no, Profiling Data.
Vale, no ha ocurrido nada, no tenemos ninguna información.
No ocurre ninguna información, pues porque no hemos hecho nada,
no hemos generado ningún renderizado nuevo.
Si ahora le volvemos a dar y aquí vamos a buscar algo,
vamos a poner, por ejemplo, Chile, ¿vale?
Ha ocurrido cosas porque hemos visto los flasheos, los recuadros,
le vamos a dar aquí, paramos, ¡pum!
Y aquí ya tenemos bastante información,
información muy interesante.
Podemos ver un poco el árbol de toda nuestra aplicación.
La app incluye un Context Provider, que incluye un Deep,
que incluye un Component Suspend, que incluye bla, bla, bla.
Esto sería un poquito nuestro árbol.
Y al final lo que está coloreado es lo que ha cambiado,
lo que se ha vuelto a renderizar.
Podemos ver que lo que se ha vuelto a renderizar
cuando he estado tecleando, pues ha sido la Home.
Y aquí, que pone 01010, son las veces que hemos tenido,
en este caso le llaman un Commit.
Un Commit básicamente es como que ha ocurrido algo
dentro del árbol de elementos y se ha generado una acción
por parte de React, que normalmente es que se ha renderizado
otra vez, ¿no?
Entonces, ¿qué es lo que se ha renderizado?
Todo lo que está coloreado.
En este caso, pues vemos que es Home.
Si le damos un clic, pues nos lo expande
y aquí conseguimos un poquito más de información.
Vale, pues se ha renderizado la Home
y nos dice que ha tomado un 0.1 milisegundos de 1.2.
O sea, no tenemos un problema muy grande.
Pero la verdad es que puede ser algo que podemos evitar, ¿no?
Vamos a ver qué es lo que ha estado ocurriendo aquí.
Vale, pues vemos que lo único que he hecho
ha sido cambiar las letras de aquí
y podemos ver todo lo que se ha visto afectado.
La Home, el formulario, el formulario que tenemos aquí, ¿vale?
Y además, cuando nos ponemos encima,
puedes ver a la izquierda que nos está indicando qué elemento es, ¿no?
Pues el Form lo tenemos a la izquierda,
luego el botón y luego el Input.
Vale, pues esto ha cambiado.
Esto es normal que cambie, tiene sentido,
porque el estado que cambiamos es el del formulario.
Vamos a volver a la Home.
¿Qué más está cambiando?
Este DIP.
Este DIP incluye todos los GIF.
¿Y por qué está cambiando?
Pues podemos ver que nos dice,
bueno, no le voy a poder dar,
pero aquí lo tenemos.
¿Por qué esto se ha renderizado, el list of GIF?
Dice, bueno, es que el padre se ha renderizado.
Claro, si vamos tirando para arriba el DIP porque se ha renderizado,
el DIP porque se ha renderizado y la Home,
pues lo que ha generado que todo se renderice
es que la Home, los hooks, han cambiado.
Vale.
¿Por qué han cambiado los hooks?
Pues vamos a ver por qué han cambiado los hooks.
Vamos a recuperar un poquito esta información.
Si miramos nuestro componente,
vamos a ir aquí a la izquierda,
vamos por aquí.
Vale.
Este es el componente Home.
Vamos a poner esto un poquito más grande
que se vea bien el código.
Vale.
Este es nuestro componente Home, ¿verdad?
Entonces, en esta línea puedes ver claramente
que teníamos el estado.
Claro, como la Home tiene el estado del formulario,
lo que está ocurriendo es que cuando este formulario cambia,
llama al handle submit y este,
ay, el handle submit no, al handle change, ¿no?
Cuando le cambiamos el valor al input,
llama al handle change,
llamamos al set keyword y esto actualiza el estado.
Al actualizar el estado, lo que está ocurriendo
es que todo el componente de Home,
todo el componente de Home se está volviendo a renderizar.
Y esto no mola, ¿vale?
Esto está mal.
Este es seguramente el típico problema
de renderizados y performance en React.
Tener componentes de React demasiado grandes
y que tenga demasiados estados
que podrían estar divididos,
que hace que cada vez que cambie uno de estos estados,
pues se vean todos los componentes
que están al mismo nivel afectados, ¿no?
Y ya vemos que de forma totalmente innecesaria.
Si volvemos aquí, ya ves,
aquí solo hemos visto el primer paso,
pero podemos ir dándole a esta flechita
para ir viendo qué es lo que ha ido ocurriendo.
Vale.
Pues podemos ver, vale.
Pues el primer paso ha sido este,
luego aquí no ha hecho nada,
segundo paso, ha vuelto a renderizar esto,
ha vuelto a renderizar esto, vale.
Pues todo esto que estáis viendo,
cada una de estas pedazos de barras
que nos indican, además, la duración
y lo que ha estado haciendo,
esas barras es cada una de las teclas que he hecho, ¿vale?
Lo podemos ver de una forma todavía más clara.
Si ahora le doy aquí a Record
y voy a poner una sola letra
y paro, ¿vale?
Solo han pasado dos cosas.
Y el primero ha sido al actualizar la letra
y podemos ver que se ha renderizado todo.
Pues esto es justamente lo que vamos a querer arreglar.
Y lo vamos a arreglar de una forma tan fácil
que vas a ver que lo vas a hacer, vamos,
obligado, obligado.
Vale, voy a ver qué me comentáis por el chat
antes de empezar a darle al código.
Vale, tienes que usar, vale, vale, vale.
Uf, es que hay tantos por aquí.
La dirección del blog de MiduDev, pues es midu.dev.
Gracias, Daniela, por compartirlo.
La gente que...
El orden de las clases lo tenéis en el blog de...
En mi blog.
Iba a decir en el blog de MiduDev, en mi blog.
¿Vale?
Y ahí tenéis un artículo donde sale una a una las clases.
Y además empezamos desde cero hasta el vídeo de hoy.
Vale, vamos al código para arreglar esto.
¿Cómo lo podemos hacer?
Pues es súper sencillo.
Lo que vamos a hacer es básicamente...
Es que va a pensar alguien, bueno, menuda chorrada.
Pero os puedo asegurar que este es el típico error
y que algo tan sencillo puede cambiar la performance
de muchas aplicaciones en React.
En este caso, si miramos bien este componente Home,
podemos ver que este keyword y set keyword,
este estado, solo está afectando a este formulario.
Por lo tanto, lo que podemos hacer es crear un nuevo componente
que solo tenga eso.
Vamos a llamarle search form.
Y ahí vamos a extraer todo lo que estábamos haciendo
en ese search form.
¿Vale?
Así que...
Uy, a ver por aquí.
Search form.
Vamos a importar React desde React.
Y aquí vamos a importar...
¿Qué más?
El useState que vamos a necesitar.
Vale.
Lo vamos a poner aquí en la primera línea.
UseState.
Perfecto.
Ahora, este keyword, este es el keyword, este estado,
lo vamos a pasar aquí.
Vamos a hacer un export default function.
Creamos nuestro componente.
Lo pasamos aquí.
¿Y qué es lo que tiene que devolver este componente?
Lo que va a devolver este componente es simplemente esto de aquí.
Así está.
Perfecto.
Entonces, ya vemos que nos faltan dos cositas.
Aquí el handleSubmit nos dice que no está definido
y el handleChange también nos dice que no está definido.
¿Vale?
Pues, ¿de dónde sacamos esto?
El handleSubmit se lo vamos a pasar por props.
Le vamos a pasar aquí un handleSubmit.
¿Vale?
Y vamos a ver cómo lo hacemos.
Este handleSubmit lo teníamos aquí.
Pues, lo vamos a copiar también.
Porque vamos a ver que aquí lo que tenemos que hacer,
este, no sé si llamarle handleSubmit.
Bueno, lo vamos a dejar por aquí.
Vamos a decir handleSubmitCallback.
O frontparent.
¿Vale?
Luego le vamos a cambiar los nombres porque no necesitaremos que sea tan raro.
Así lo estamos renombrando.
Lo que estamos haciendo es renombrar este nombre.
Le decimos cuando te llegue handleSubmit en realidad le vamos a llamar handleSubmit from parent.
Y aquí lo que hacemos, porque este pushLocation lo necesitamos y lo tenemos en el padre,
es que lo vamos a hacer en realidad en el padre.
Así que cuando tengamos el handleSubmit from parent,
le vamos a pasar la keyword que sí que tenemos aquí.
O sea que vas a ver que lo que tiene que hacer este componente le va a llegar por las props.
¿Vale?
Perfecto.
Así que este handleSubmit es el que haremos el submit y ahora nos falta el handleChange.
Vamos a ver qué hacíamos aquí con el handleChange.
Pues simplemente lo que hacíamos era cambiar el estado.
Así que esto lo podemos copiar tal cual.
Copiamos esto tal cual.
Este estado de la home ya no lo necesitamos.
Y pasamos aquí.
Copiamos el handleChange.
Perfecto.
Guardamos los cambios de esto.
Y ahora vamos a ver qué necesitamos hacer.
Pues utilizar este componente searchForm y pasarle este handleSubmit.
Vamos por aquí.
Vamos a ver qué hacemos aquí.
Este form ya no lo necesitamos.
Vamos a utilizar este nuevo componente searchForm.
Y lo que tenemos que pasarle es esta prop handleSubmit.
Y aquí tenemos que ver qué hacemos.
¿Cómo le pasamos?
¿Qué le tenemos que pasar?
Pues aquí tenemos también un handleSubmit.
Pero esto event, eventPreventDefault, ya no lo hacemos aquí.
Porque ya lo hacemos aquí.
Ya no necesitamos hacerlo aquí.
Simplemente lo que tenemos que hacer es hacer algo con esta keyword que le estamos pasando.
Así que este va a ser el parámetro que reciba este método.
Y ahora simplemente lo que tenemos que hacer es hacer esto.
El pushLocation.
Así que un poco ahora, parafraseando, vamos a utilizarlo aquí, handleSubmit.
Y de hecho, ahora que veo esto, el guard de handleSubmit podríamos llamarle onSubmit.
Que queda mejor.
Cuando el searchForm hace submit, entonces hacemos un handleSubmit.
Así que todo esto ya no lo necesitamos.
Podemos hacerlo, se llama onSubmit.
Y aquí el handleSubmit from parent, onSubmit.
Guardamos aquí los cambios.
Bueno, me dice que searchForm no está definido.
Y esto es porque lo tenemos que importar.
SearchForm from components, searchForm.
Guardamos los cambios.
Y parece que todo funciona hasta aquí.
Vale, parece que todo funciona.
Vamos a repasarlo un poquito antes de continuar.
Aquí ahora tenemos en la home que estamos utilizando un componente
que se llama searchForm, y es este, que recibe una prop que se llama onSubmit
y va a ejecutar el handleSubmit.
Este handleSubmit lo que hace es recibir un objeto que tiene una propiedad keyword
y con esta keyword lo que vamos a hacer es navegar.
Esto es una cosa que ya estábamos haciendo, así que es exactamente lo mismo.
Pero ahora la magia de actualizar el estado de este formulario
lo estamos haciendo en el componente de fuera.
Y además, también lo de hacer el preventDefault del evento.
Así que en este componente ya no sabemos exactamente esos internals,
esas cosas internas que hacía el componente.
Así que hemos conseguido dos cosas.
La primera es simplificar bastante la página home,
porque ahora esto se ve más limpio.
Y lo segundo es que podríamos reutilizar este searchForm.
El searchForm lo tenemos aquí, le llega por parámetro onSubmit,
que va a ser la función que se ejecutará cuando el formulario que tenía haga submit,
ya sea con el botón o ya sea haciendo enter.
Entonces, al final, lo que hacemos es ejecutar el handleSubmit de aquí,
que recibe el evento.
Hacemos el preventDefault y llamamos a la función que le llega por props,
pasándole la keyword que tenemos en ese momento.
Esa keyword es la que hemos actualizado aquí, en el handleChange.
Aquí, en el handleChange.
Esto es exactamente lo mismo que ya teníamos antes.
No lo hemos cambiado, lo hemos copiado y ya está.
Entonces, guardo los cambios de aquí, guardo los cambios de acá.
Vamos a ver si esto funciona como debería.
Pongo matrix y le doy al enter y funciona correctamente.
Entonces, hasta aquí alguien diría, ¿qué pasa aquí?
O sea, esto es algo que está ocurriendo de forma, o sea, está haciendo exactamente lo mismo.
O sea, ¿qué me acabas de contar?
Has estado aquí picándote un componente para nada.
Vamos a ver, vamos a ver.
Igual tiene alguna ventaja todo lo que hemos hecho más allá de las dos que he contado.
Vamos a volver aquí al profiler, ¿vale?
Y vamos a actualizar esto.
Vale, el profiler tiene aquí un botón que es que puedes actualizar la página y te inicia el profiler a la vez.
Lo veremos después.
Ahora no está interesante porque ahora solo lo hacemos cuando estamos haciendo algún evento en el formulario.
Vamos a grabar, vamos a hacer el profiling y ahora vamos a escribir aquí matrix.
¡Eh!
¿Habéis visto una diferencia?
¿Has visto ahí algo?
¿O has dejado de ver algo, mejor dicho?
Espero que hayas dejado de ver los cuadritos, ¿no?
Ahora cuando escribo, sí que se puede ver un cuadrito.
Sí que se ve un cuadrito, pero solo se ve el del formulario.
Puedes ver como ahora los GIF, cuando yo escribo, pues no está ocurriendo absolutamente nada.
Este ejemplo que parece tontísimo, este ejemplo que parece algo tan trivial,
este es el típico error de muchas aplicaciones de React.
Al no separar el formulario de los resultados, por ejemplo, lo que ocurre muchas veces es que empiezas a teclear y le cuesta.
Empiezas a teclear y entonces se ve como que, oye, ¿por qué esto está petardeando?
¿Por qué esto no va muy fino?
Y el problema es ese, porque tiene que hacer renderizados de una lista mejor de muchísimos elementos y de un árbol muy complejo.
Pero bueno, lo importante, vamos a refrescar esto, voy a darle Start Profiling aquí y voy a escribir Matrix y voy a pararlo.
Vamos a ver qué es lo que ha pasado.
Pues esto tiene bastante mejor pinta, porque es verdad que aquí podemos ver que todavía ocurren renderizados,
porque he estado escribiendo y he estado escribiendo unas cuantas cosas y borrando y tal,
pero cuando renderiza, fíjate bien, lo único que se vuelve a renderizar es este componente de aquí,
que es el Search Form, es lo único que se vuelve a renderizar.
Y en cambio esto dice, no, esto no lo hemos vuelto a renderizar, ¿vale?
En gris puedes ver todo lo que no ha vuelto a renderizar.
Así que aquí dices, no, esta parte del árbol la he ignorado, es que no ha pasado absolutamente nada.
Así que aquí puedes ver claramente un poco dónde estaba nuestro problema.
Con las interacciones, vamos a hacer Start Profiling y vamos a poner aquí Matrix.
Aquí con las, ah no, esto de las interacciones es otro tema, pero no lo vamos a ver,
porque esto está todavía unstable y no nos va a dar tampoco tanta información, ¿vale?
Lo que sí que puede ser interesante es el ranking para ver cuál es el componente que ha tardado más, ¿vale?
En este caso es una tontería porque el componente es demasiado pequeño, ¿no?
Y cualquier cosa que pongamos aquí, pues va a ser bastante chiquitita.
Pero hay veces que es bastante interesante porque hay diferentes componentes, ¿no?
Que están al mismo nivel y a lo mejor se renderizan los dos y uno es realmente el que tiene el peso
y a lo mejor el otro es bastante más chiquitito.
Entonces este ranking lo que te dice no es el orden tanto del árbol de elementos,
sino te dice el orden del coste de esos elementos, ¿vale?
Así que en este caso no tenemos esta utilidad, no nos da mucha utilidad,
pero ya hemos solucionado esto, que es lo que queríamos.
Vale, perfecto.
Pues ahora lo que nos gustaría hacer es ver si este formulario todavía tiene algún problema, ¿vale?
Y para eso vamos a utilizar el botón este de Reload and Start Profiling,
porque vamos a tener una sorpresita con esto.
Pero antes voy a leeros un poquito a ver qué me estáis contando por el chat,
que veo que tenéis bastante movimiento.
A ver, a ver.
A ver, a ver.
Había gente que tenía dudas un poquito sobre el tema de Style Components,
si lo recomendabas.
Sí, yo lo recomendaba.
Y la verdad que sí.
Y seguramente haremos un live, no sé si la semana que viene,
para hablar de Style Components.
Seguramente lo haremos no con Style Components,
sino que lo haremos con Emotion, porque me gusta bastante.
Pero es muy similar la app ya a Style Components,
o sea que uno u otro os puede servir.
Y creo que así, viéndolo un poquito,
os puede sacar la duda de a ver si es interesante, ¿vale?
Hola, muy buen análisis e información.
Gracias.
Y dice Jonathan de B.
Muchas gracias, hombre.
Vale, me acabas de dar la vida, decía Adri Navarro.
Pues mira que parece una tontería, ¿vale?
La gente que me pregunta sobre el plugin y la extensión,
que mucha gente siempre lo pregunta,
es ErrorLens, que utilizo en Visual Studio Code,
que me da la información de los errores en línea, ¿vale?
¿Qué más?
Hay gente que entra y no sabe ni en qué estoy programando,
ni qué lenguaje es este.
Pues estoy programando en JavaScript,
el lenguaje de JavaScript.
Y lo que pasa es que estamos utilizando React.js,
que es para construir interfaz de tu usuario.
Pero te recomiendo que empieces las clases de la primera,
y así, pues yo creo que,
si sabes un poquito de JavaScript,
podrás ir aprendiendo, ¿eh?
Vale, vale.
Eso ayuda aún más,
que ErrorLens muestre que mensajes hasta por cualquier cosa.
Se pueden arreglar, ¿eh?
Un poquito el ErrorLens.
A mí me gusta mucho,
pero se puede configurar el nivel que quieres que te muestre,
para que no te muestre todos los warnings.
A mí es que me gusta ponerlo todo.
Tengo una duda.
¿Componentes confuncionales o nombrados?
¿Lo dije bien?
Pues creo que no lo dijiste bien.
O sea, puedes.
Están mezclando dos cosas.
Tienes componentes funcionales o con clases,
eso sería una cosa, ¿vale?
Aunque ahora lo que recomiendo,
todo con funciones,
y luego tendrías componentes nombrados o export por default,
o sea, que estén exportados por defecto.
Eso sería.
Que a mí, la verdad,
es que me es bastante indiferente,
y ya explicamos a una clase
que es interesante hacerlo por default,
porque React Lazy no se lleva muy bien
con los que son nombrados, ¿vale?
Lo importante es que en la función,
al menos sí que tenga un nombre.
Eso sí que es bastante importante.
¿Qué más?
Alguien dice, Javier González,
llegué tarde, pero llegué.
Pero llegaste.
Aquí estás.
Muy bien.
¿Qué más?
¿Qué más?
Hay gente que pregunta si,
que tiene muchos datos en una API,
y entonces lo recibe,
y los va cambiando en el formulario con el setState,
que sí es una buena práctica.
Bueno, hay que llamar el setState lo mínimo posible, ¿vale?
Ya hemos visto que,
además de llamarle lo mínimo posible,
hay que intentar aislarlo
a donde esté ocurriendo realmente los cambios.
Por ejemplo, esto que comentas muchas veces,
en el mismo componente se hace el fetching de datos,
y también se está gestionando el formulario,
y eso genera bastantes problemas, ¿vale?
Muy buenas, dice Alex Barba.
Hola de parte de Mariam de OnePunch Team.
Hola, hola.
¿Qué más?
¿Qué más?
Miguel pregunta,
imagínate que es un cliente y quieres hacer deploy converser.
Pues, luego lo veremos.
Tendrías que tener el deploy en tu cuenta,
ya que el repo está en tu GitHub.
Bueno, pues, que se haga GitHub tu empresa,
que debería, ¿no?
¿Se puede tener en cuenta la cuenta del cliente?
Claro, se puede.
Veremos cómo hacer login y ya está.
¿Qué más?
Esa sería la forma correcta de sacarle jugo a la reactividad,
dice Enrique Moreno.
Muy interesante.
¿Me he perdido mucho?
Creo que sí.
¿Cuándo vemos un live de TypeScript con React?
Pues, veremos que pronto,
aunque tengo que decir que no soy muy fan de utilizar TypeScript
en los componentes de React.
Lo siento.
¿Es una buena práctica hacer un custom hub sin retorno?
Sí.
Si puede, si tiene sentido, sí.
Por ejemplo, se me ocurre tracking.
A ver, normalmente vas a querer devolver alguna cosa, ¿no?
Digo yo.
Por ejemplo, si ha ido bien o ha ido mal,
pero puedes tener un custom hub que sea de tracking,
que haga la llamada y, pues, no devuelva nada.
Pero, bueno, yo intentaría devolver alguna cosa.
He llegado súper tarde, queda mucho, me he perdido mucho.
Carlos, ¿te has perdido cómo hemos optimizado el search form
para que se renderice mejor?
Ay, se ha perdido la...
Me he quedado ahí congelado.
Me he quedado congelado porque me he quedado sin batería.
Bueno, pues, vamos a ver.
Vamos a ver mientras...
Mientras, ¿cómo puedo hacer para arreglar la batería?
Siempre me pasa esto, me quedo sin batería.
Bueno, no pasa nada.
Luego lo arreglo.
Bueno, pues, vamos a ver.
Vamos a continuar con esto.
Lo que quería hacer ahora es simplemente...
Ver si está ocurriendo algo cuando actualizo mi página.
Aquí tenemos el Reload and Start Profiling.
Esto lo que va a hacer es un profiling de nuestra aplicación
nada más resetearla, o sea, actualizarla.
Le voy a dar, ¿vale?
Y vamos a ver qué ocurre.
Ahora le tengo que dar al Stop.
Entonces, lo que vamos a ver aquí son los cinco pasos
que ha hecho React para renderizar nuestra aplicación.
Y aquí ha habido diferentes cambios en los que ha habido, pues,
temas de cambios de estado, a lo mejor hemos tomado los datos de la API,
hemos actualizado el componente, cosas así.
Entonces, ¿qué está pasando?
¿Qué podemos arreglar aquí y qué no debería estar ocurriendo?
Si miramos estos cinco pasos que tenemos aquí,
vamos a encontrar que hay un pequeño problema.
No se nota casi, espero que, voy a ver si lo veis,
pero es imperceptible, pero tiene sentido.
En los cinco pasos hay algo que se está actualizando siempre
que no debería.
Y lo tenemos aquí.
Este bloque de aquí, vamos a hacer esto grande,
si le damos un clic, nos expande justamente este componente
y podemos ver los hijos.
Este es el Search Form.
Pues podemos ver que cuando renderizamos nuestra aplicación,
el Search Form siempre vuelve a renderizarse.
Cinco veces, ¿vale?
Se está renderizando todas las veces.
Y es raro, ¿no?
Porque dices, bueno, pero ¿por qué se tiene que actualizar
el Search Form si no cambia?
No está pasando nada con Search Form.
Los GIF cambian, pues, a lo mejor hay más cosas que cambian por ahí,
pero el formulario no debería volver a actualizarse, ¿no?
Entonces, la primera vez aquí no existe, ¿vale?
Entonces, la segunda vez aquí podemos ver que se ha renderizado
porque es la primera vez que este componente se ha renderizado.
Ya nos lo chiva, ¿vale?
Dice, oye, ¿por qué se ha renderizado este componente?
Perfecto.
Entonces, la tercera vez, ¿por qué se ha renderizado?
Vale.
Pues también nos lo chiva.
Nos dice, es que ha cambiado una prop,
que es la de onSummit, ¿vale?
Y la cuarta vez, ¿por qué?
Vamos a buscarlo aquí.
Vale.
Pues se ha vuelto a renderizar porque ha cambiado la prop onSummit.
¿Y la quinta vez?
Pues se ha vuelto a renderizar porque ha cambiado la prop onSummit.
¡Oh, oh!
¿Qué está pasando aquí?
¿Qué ha pachado?
¿No?
Qué raro.
O sea, estamos cambiando realmente cinco veces esa prop,
esta nueva prop que hemos creado.
O sea, cuando estamos aquí, ¿no?
Y se está quejando de esta prop de aquí, ¿no?
Que parece ser que está cambiando.
Que cada vez que se vuelva a renderizar la app, ¿no?
Cada vez que se está renderizando home,
este handleSummit está cambiando su valor.
O sea, que le estamos pasando diferentes handleSummit.
¿Qué está ocurriendo aquí?
¿Qué está pasando?
Vale.
Pues lo que está pasando aquí es que,
y quédate bien con esto porque es súper importante,
esto lo pasamos un poco por encima en la anterior clase.
Pero esto es súper importante.
Y muchas veces hay mucha gente que esto no lo tiene claro
y también suele ser una fuente no tanto de problemas,
pero sí de falta de optimización de tus componentes.
Y es que esta constante que vemos aquí,
que se llama handleSummit,
bueno, Submit o como lo queráis decir, ¿vale?
Esta constante que tenemos aquí,
lo que ocurre es que cada vez que este componente home
se renderiza, se está volviendo a crear.
¿Vale?
Entonces, para evitar eso, ¿qué tenemos que hacer?
Pues tenemos que utilizar el hook useCallback.
Vale.
Pues tenemos que hacer el useCallback,
hacemos esto así, perfecto.
Bueno, aquí esto, me he dejado esto,
y esto aquí.
Vale.
Entonces, lo que hacemos al envolver la función con el useCallback
es decirle, quiero que me guardes esta función
a no ser que cambien unas dependencias.
¿Qué dependencias?
Las que le vamos a pasar en este arreglo,
en este array de aquí.
¿Vale?
Entonces, al principio se lo pasamos vacío,
pero si se lo pasamos vacío,
ya nos está avisando y dice,
oye, es que el useCallback está faltándole alguna dependencia.
En este caso ya no es la chiva,
porque el inter es demasiado listo.
Pero nos dice que le falta una dependencia
porque si nos fijamos dentro,
¿qué pasa?
Que tenemos el pushLocation.
Si guardase en React esta función de aquí,
siempre en el handleSubmit,
entre renderizados,
lo guardase y la memorizase ahí,
el problema es que si cambiase el pushLocation
tendría una referencia incorrecta.
Entonces, lo que le tenemos que decir es,
vale, esta función de aquí,
cada vez que cambie el pushLocation,
me la creas.
Entonces, estabas preguntándote,
bueno, pero entonces,
¿y si cambia el pushLocation?
Pues la crea.
Y si no cambia,
lo bueno es que no la crea.
Vale.
Entonces, así deberíamos evitar el problema ese
de que cambia la prop.
Porque ahora no estamos creando
cada vez que se renderiza este componente,
este handleSubmit,
sino lo que está ocurriendo
es que se está guardando.
Y solo cuando cambie el pushLocation
se va a volver a crear esa función.
Vale, perfecto.
Pues vamos a ver si esto lo arregla.
Vamos a darle aquí,
vamos a resetear esto.
Pam.
Paramos.
Vale.
Y ahora aquí vamos a poner...
Ah, no, ya está.
No tengo que poner nada.
Vale, tenemos los cinco pasos
los mismos que antes.
Vamos a ir uno a uno.
Vale.
Aquí la vemos otra vez,
el search form,
y dice que se renderiza
porque es la primera vez
que se renderizaba.
Otro.
Y aquí vemos que dice
que se ha renderizado
porque dice que el padre
se ha renderizado.
El caso es que ha cambiado el error.
Ha cambiado, ¿no?
El error ha cambiado,
pero en cambio
se vuelve a renderizar.
Y aquí, pues también.
Bueno, no es un error.
O sea, la razón por la que se renderiza
ha cambiado,
pero se vuelve a renderizar.
Y es porque el padre
se está renderizando.
Pero claro,
no podemos evitar
que el padre se renderice.
¿Vale?
Eso no lo podemos hacer.
Entonces,
¿qué podemos hacer
para solucionar esto?
Porque el home
se tiene que renderizar.
Pero claro,
si cada vez que se renderiza
search form
se va a renderizar sí o sí,
pues esto va a ser un problema.
Así que,
¿qué podemos hacer
para que esto se solucione?
Antes de dar la solución,
os voy a dejar cinco segundos
porque voy a ir cambiando la batería
y os dejo que lo vayáis pensando
o que vayáis a por un vasito de agua.
Vuelvo.
Cinco segundos.
¿Alguien se sabe la solución ya?
Hombre,
si os sabéis la solución
no la digáis,
que si no os es spoiler,
¿eh?
Os tenéis que quedar
con la solución
pero sin chivarla.
estoy operando la cámara
mientras.
Mientras Víctor Cortés
dice me despido,
es hora laboral en Colombia
y se me ha difícil
seguir viendo
pero gracias a mi web
dejo los vídeos en su canal
para verlos después.
Después lo tenéis
el vídeo en el canal
así que no os preocupéis.
Voy a ver.
La última vez
fui capaz de hacerlo así
desde lejos
pero veo que esta vez
me está costando bastante más,
¿eh?
Memo.
Use Memo.
Vale.
Use Memo no
porque Use Memo
serviría para memorizar
un valor
aunque se podría utilizar
para hacer esto
pero no lo vamos a hacer
porque es una mala práctica.
¿Vale?
En cambio Memo
que dice Adri Navarro
exactamente
React Memo.
¿No podrías llevarme
esa función
al componente?
Vale.
Pero el problema
no es tanto
llevarse la función
al componente
lo que al final
claro
podríamos llevarnos
este Handle Submit
y lo que haríamos
en este caso
simplemente
sería
pasarle el Push Location
que al final
podría funcionar
pero no sé
si es lo que queremos hacer.
En este caso
yo creo que es mejor
si hacemos esto
porque de esta forma
estamos dejando
que este componente
este componente
Search Form
tenga alguna utilidad
que le puede venir
desde fuera
no necesariamente
siempre va a querer
hacer una navegación
a lo mejor
quiere hacer
cosas distintas.
Así que
voy a ver
si soy capaz
acercándome.
parece que lo he conseguido
vamos a ver
vamos a colocar
la cámara
donde estaba
vale
no sé si lo he conseguido
si no
lo veremos ahora
bueno
gracias a todos
por esperar
vamos a ver
si salgo por ahí
mira
ya me muevo
no sé por qué
me pasan estas cosas
porque yo miro
digo voy a empezar
y voy a ver
si tiene batería
y luego
me deja todo tirado
porque yo veo
que está a tope
o sea que no sé
me voy a tener que buscar algo
vale
alguien lo ha acertado
vale
que dice
ha dicho react
ha dicho react memo
vale
pues sí
react memo
pero use memo
react memo
no son lo mismo
el use memo
es un hook
que tendríamos aquí
os lo voy a enseñar
use memo
está aquí
y este hook
lo que podría hacer
es memorizar
un
una variable
¿no?
un valor
digamos
y lo podríamos hacer
y lo podríamos hacer
aquí mismo
o sea
podríamos decirle
vale
hace aquí
teníamos el element
y hacer un use memo
y el use memo
pues nos devuelva esto
de aquí
entonces este use memo
nos va a devolver esto
a ver que no le gusta
claro
porque
cuando las devs
tenemos que pasarle
las dependencias
que las pasamos aquí
¿no?
y la única dependencia
sería el handle submit
vale
esto
podría funcionar
esto sería una forma
utilizar el hook use memo
es un hook
que viene con react
y lo que haría
básicamente
es muy parecido
al use callback
pero lo que hace
este use memo
es
es guardar
no una función
sino un valor
¿qué pasa?
que podríamos guardar
este elemento aquí
¿no?
guardamos el elemento aquí
y decimos
vale
haz un memo
de este valor
y solo cuando cambie
este handle submit
me lo vuelves
a renderizar
pero esto
en realidad
aparte de que
no tengo muy claro
que funcionase
en este ejemplo
lo podemos probar
rápidamente
a ver
funcionar funcionará
lo que tengo dudas
es si realmente
nos va a solucionar
del todo nuestro problema
vamos a ver
sí
nos lo soluciona
¿vale?
podemos ver que nos soluciona
el problema
porque en el paso 2
en el siguiente
aquí lo tenemos
¿no?
que no se ha renderizado
¿vale?
¿por qué
yo no haría esto?
sobre todo en este caso
¿no?
hay diferentes casos
en los que sí que lo puedes utilizar
pero a mí
normalmente me parece
una mala práctica
y he visto
millones de problemas
por esto
porque claro
esto de
hacer un memo
de tus componentes
dentro de donde
lo estás utilizando
puede complicar
un poquito
el tema
¿vale?
además
en este caso
sí es con el handle submit
pero a lo mejor
este componente
debería cambiar
por otras cosas
lo podéis utilizar
como opción
pero la forma
más correcta
considero yo
en este ejemplo
y además
os puede funcionar
para cualquier sitio
donde utilicéis
este componente
es que utilicéis
react memo
¿vale?
vamos a guardar los cambios
y vamos a ir al search form
ahora
este componente
search form
aquí
vamos a guardar
vamos a quitar
el export default
y vamos a hacer
un export default
pero de react
punto
memo
y aquí
le pasamos
el componente
que queremos
memorizar
cada vez
que nos lo pidan
o sea
cada vez que se renderice
pero
¿en base a qué
se va a memorizar?
¿en base a qué
va a evitar
que se renderice?
pues en base
a sus props
¿vale?
así que
le decimos
vale
este es el componente
lo envolvemos
en este componente
de orden superior
que es react memo
¿vale?
un componente
de orden superior
es una función
que le pasas un componente
y te devuelve
¡pum!
otro componente
en este caso
react memo
es un componente
de orden superior
porque lo que estamos haciendo
es pasarle
un componente
y lo que está haciendo
es devolver
el react memo
otro componente
ahora lo veremos
en el árbol
del react developer tools
porque queda bastante claro
ahora
este componente
search form
va a estar envuelto
en esta capacidad
de memorizar
¿no?
y evitar que se renderice
si sus props
anteriores
y las nuevas
no han cambiado
va a hacer una comparación
una comparación
que no es profunda
luego lo explico
y lo que va a hacer
es básicamente decir
vale
pues ahora no lo tengo
que renderizar
así que ya puedes ver
que es diferente
porque
el use memo
es para un valor
en concreto
por lo tanto
el use memo
lo tienes que utilizar
en la home
dentro de la home
y lo que estamos haciendo
es guardar
esa variable
ahí
dentro de la home
vale
pero no
en cualquier sitio
que utilicemos
el componente
search form
se va a tener
esta capacidad
de evitar ser renderizado
cuando sus props
no cambian
vale
solo lo tendremos
en la home
en cambio
con el
uy
aquí
con el react memo
lo que vamos a conseguir
es que independientemente
de donde utilicemos
el search form
va a tener esta capacidad
de que si sus props
no cambian
no se vuelva a renderizar
entonces
vamos a guardar los cambios
y vamos a ver
si esto
nos soluciona
el problemilla
vamos a ver
le damos aquí
al reload este
pam
y paramos
entonces
paso 1
paso 2
lo tenemos aquí
paso 3
pam
ya está
no se ha renderizado
no se ha renderizado
¿por qué?
porque las props
que le hemos pasado
no han cambiado
¿vale?
las props
que ha recibido
entre el renderizado anterior
y el nuevo
no ha cambiado
entonces
alguien puede estar
preguntándose
vale
pero entonces
¿para qué hemos hecho
todo esto
el use callback?
esto no ha servido
para nada
así que
¿por qué no lo quitamos?
¿no?
lo deberíamos poder quitar
y que todo funcionase bien
ahora que hemos hecho
esto del memo
¿verdad?
y vamos a ver
si esto ocurre
y es así
vale
he hecho el restart
vamos a hacer aquí
y ahora
pues voy al paso 2
nos dice
esta es la primera vez
que se ha renderizado
el componente
y al paso 3
y nos dice
capa chao
la prop ha cambiado
¿vale?
entonces
el use callback
lo habíamos hecho
en realidad
para evitar
que la prop cambie
que la prop
esta que le estamos pasando aquí
el on submit
cambie
de esta forma
lo que hacemos
justamente
es que
siempre estemos pasando
la misma función
esta función
se deje de crear
cada vez que se renderiza
porque si la volvemos a crear
claro
entonces
queramos
por más
reactmemo
que tengamos aquí
se va a volver a renderizar
porque cuando hace aquí
una comparación
para que veáis
cómo funciona esto
básicamente
que sería
preprops
y
newprops
¿vale?
aquí hace una comparación
dice
are equal
preprops
y nextprops
vamos a llamarle
nextprops
y devuelve esto
¿vale?
si este
are equal
¿vale?
que imagínate
que es una función
que tiene react
por dentro
si este are equal
devuelve true
lo que va a pasar
es que entonces
no se va a renderizar
¿vale?
porque si son iguales
si las props
que la pasaba antes
y las que les pasa ahora
son iguales
pues dice
vale
pues no lo tengo
que volver a renderizar
pero
si son diferentes
entonces sí
lo va a volver a renderizar
y por esto
como cuando cambiamos
cuando no teníamos
el callback
le vamos cambiando la prop
pues por eso
se estaba volviendo
a renderizar
¿vale?
y por eso necesitamos
el use callback
perfecto
vale, vale
pues ya tenemos esto
arreglado
vamos a guardar esto otra vez
vamos a ir a una búsqueda
alguien me pregunta por aquí
si el real memo
es como el pure component
por clases
es exactamente
lo mismo
con una pequeña diferencia
y es que
el
ahora que lo pienso
no
el pure component
sí
lo puedes considerar
como el pure component
es que estaba pensando
en el shoot component update
que hay un ciclo de vida
de los componentes
en las clases de react
que se llaman
shoot component update
que la diferencia
es que en el shoot component update
tienes que devolver
devolver
false
y aquí tienes que devolver true
como al revés
pero sí
el react memo
es como el pure component
el react.pure component
donde podías hacer
podías hacer esto
react.pure component
¿no?
y aquí le pasabas
básicamente
el componente
¿vale?
pues
es muy similar
¿vale?
ahora
otra cosita
¿qué más podemos ver aquí?
si buscamos
vamos a buscar aquí
el avengers
y guardamos aquí
hacemos un start profiling
¿vale?
este es el último
y ya dejamos el tema
del profiling
que creo que le hemos dado
bastante cañita
no sé si ya estáis
estáis todavía conmigo
si estáis todavía despiertos
si os está gustando
el profiling
pero si os está gustando
le dais like
vamos
como si no hubiera mañana
y reventáis el botón
si hace falta
¿vale?
bueno ahí me he dejado llevar
espero que
era para despertaros
no sé si es la hora
de comer en algunos países
¿vale?
entonces
Jonathan me dice
si eso mismo
no se soluciona
usando un useEffect
no
no se soluciona
¿vale?
no se soluciona
ni de cerca
se soluciona
no tiene nada que ver
y por lo tanto
no se soluciona
porque el useEffect
es para
un efecto
que se ejecute
cada vez que se renderice
y puedes evitar
que se renderice
el efecto
pero no puedes evitar
que se renderice
el componente
¿vale?
puedes evitar
que se ejecute
el efecto
pero no
el componente
así que
ojo con eso
que no es lo mismo
¿vale?
¿qué más?
eso
quería enseñaros aquí otro
este
vamos a ver
hasta qué punto
podemos arreglar esto
¿vale?
si yo voy bajando aquí
a Infinity Scroll
¿vale?
podéis ver
que me salen aquí
cuadritos
como si no hubiera un mañana
me salen cuadritos
por todos lados
que uno puede pensar
bueno
te salen los cuadritos
porque claro
estás añadiendo
los GIF nuevos
y es normal
pues no
ojalá
el problema de esto
es que cada vez
que añadimos GIFs
esto
se va haciendo
cada vez más grande
porque vamos añadiendo
GIF
y vas a poder ver
cómo se renderizan
todos
todos los GIFs
se van renderizando
cada vez que añadimos
nuevos GIFs
se van añadiendo
se van renderizando
todos
como si hubiera un mañana
y te puedes imaginar
que esto llegará
a un punto
que va a reventar
por algún sitio
a ver
no va a reventar
pero sí que va a pasar
que puedes encontrarte
que funcione bastante regular
que vaya
vaya petardeando
tu aplicación
porque claro
no tiene sentido
que tú añades
5 GIFs
y esto de repente
renderiza
todos los resultados
de búsqueda
¿vale?
no tiene sentido
entonces
para solucionar esto
podríamos hacerlo
de un montón de formas
pero
así a bote pronto
que se me ocurra a mí
si miramos al detalle
aquí
es normal
que el padre
el GIF este
se renderice
es normal
porque claro
tiene este GIF
es el padre
que tiene el estado
y el estado
será un array
de resultados
y queramos o no
pues se añadirán
y tendrá que renderizarse
pero claro
este GIF
que era el primero
o sea aquí hemos añadido
los últimos
este GIF
que era el primero
realmente se tenía que renderizar
seguro que no
seguro que no ha cambiado
su autent
de nada
que haga
que se tenga que volver
a renderizar
así que
a nivel de GIF
lo que podríamos hacer
es aquí
básicamente
pues esta función
que tenemos aquí
decirle
vale
pues venga
lo mismo
export default
react memo
GIF
venga
pum
y ahora volvemos aquí
vamos a grabar
vamos a ir viendo
vale
entonces ya puedes ver
que hay menos cuadritos
si que hay un cuadrito
muy grande
que es el del padre
pero no ves un montón
de cuadritos
por todos los lados
si paramos
vale
pues vamos a poder ver
que
solo se renderizan
los que se añaden
aquí lo tenemos
vale
estos que ya están renderizados
no se renderizan
y solo se renderizan
estos de aquí
vale
entonces
una cosa que se puede hacer
claro
en este caso
el ejemplo
es muy sencillo
pero hubiera estado bien
si le pasamos aquí
una cierta información
que fuese un objeto
por ejemplo
aquí en el list of GIF
cuando le pasamos el GIF
imaginemos que
aparte de esto
pues aquí tuviésemos
más información
no sé si la tenemos
vale
pero imaginemos
que le pasamos
extra info
y esto es lo que viene
el resto of GIF
y guardamos los cambios
vale
si volvemos aquí
ay
dejadme que voy a
voy a poner musiquita
vale
que me he quedado sin musiquita
y es que me gusta la musiquita
y así me acompaña
para programar
que también tengo la lista
en Spotify
que si os interesa
mira
la
la quería enseñar
pero no
ahí
vale
bueno
la quería enseñar
ah vale
vale
ya está
ya sé que ha pasado
aquí
bueno
que para quien le interese
que tengo la lista esta
de música para programar
que la tenéis también
en Spotify
y además voy añadiendo
voy añadiendo canciones
así que voy a poner
esta
vale
perfecto
pues vamos para ello
muy bien
pues habíamos dejado esto
que tengamos este extra info
y le estamos pasando
este resto of GIF
no tengo ni idea
lo que llega en ese
en ese resto of GIF
espero que tenga cosas
si no
bueno pues da igual
lo veremos
entonces
voy a guardar
voy a hacer este
infinite scroll
a ver qué pasa
vale
ahora podemos ver
que se vuelven a renderizar
todos los componentes
o sea esto
lo ha roto
lo ha roto muy fuerte
esto lo ha roto
lo ha roto
lo ha roto
aquí
o sea
se vuelven a renderizar
todos los componentes
no queremos esto
no queremos esto
el tema
si alguien me dice
bueno esto es que has quitado el memo
es que se te ha olvidado
no
aquí está el memo
capa chao
capa chao
vale
el problema
esto es muy importante
vale
en JavaScript
y es que
es el tema de que los objetos
y los arrays
y las funciones
son referencias
por lo tanto
que pasa
que tú cada vez que creas
que le estás pasando aquí
un objeto
o estás creando un nuevo objeto
él no va a ver
si las propiedades del objeto
son las mismas de antes
él ve la referencia del objeto
dice
esta caja
que tiene cosas
que es este objeto anterior
vete a saber lo que tenía dentro
y este objeto de aquí
voy a ver si son
la misma caja
vale
por fuera
voy a ver si son la misma caja
y voy a ver
si se deben
si se deben renderizar
el problema es que no mira por dentro
porque a lo mejor por dentro
las dos cajas tienen lo mismo
vale
entonces
React es muy inteligente
sí
y React está súper optimizado
y te evita muchos renderizados
y ya hemos visto
que React hace un muy buen trabajo
y que
bueno
aunque se volvía a renderizar todo
pues
bueno
no hemos visto ningún problema
de performance como tal
vale
pero
tiene estas cositas
que tenemos que saber
cómo funciona un poco por dentro
en este caso
cuando compara
aquí
en esta función
que habíamos dicho
que tenía
la prep props
y las next props
y compara
si son iguales
aquí lo que está haciendo
no está haciendo
una
igualidad profunda
no está entrando
dentro de los objetos
y mirando propiedad
por propiedad
no está haciendo
un deep equal
vale
que es como se le llama
sino que lo está mirando
son a nivel de referencia
está mirando
el objeto anterior
es el objeto de ahora
¿qué pasa?
que en este caso
no lo son
porque lo estamos creando aquí
cuando estamos haciendo
este punto punto
rest of give
ahí estamos creando
un objeto nuevo
entonces claro
es un objeto
totalmente nuevo
así que react
dice
ya está
las props
han cambiado
esto no me gusta
así que
ahora
mucha gente
como dice
vrime
dice
no se supone
que react
es inteligente
y renderiza
solo lo que cambia
está en su documentación
que buena pregunta
porque se me había olvidado
comentar esto
y me parece
tan bueno
que lo preguntéis
y que me dé ocasión
de explicaros
voy a hacer una cosa
por ahora voy a hacer
que esto siempre sea false
esto
que siempre sea false
esto sería como por defecto
¿vale?
esto
que hacemos aquí
es
como hacer esto
¿vale?
esto sería lo mismo
que un react memo
siempre devuelva false
es como funciona
por defecto
un componente de react
porque siempre es false
porque siempre se renderiza
aunque las props
que le llegan
son las mismas
entonces
la buena pregunta
esta ¿no?
que dice
¿no se supone que react
es inteligente
y renderiza
solo lo que cambia?
muy buena pregunta
eso es una cosa
que mucha gente cree
y está mal
no es exactamente
vamos a ver
es verdad
y es mentira
son dos
¿por qué?
porque cuando hablamos
de renderizar
hablamos de dos conceptos
diferentes
y lo vamos a ver ahora
aquí fácilmente
vamos aquí a los elementos
¿vale?
esto es el árbol
de elementos del DOM
entonces
vamos a ir al search
y voy a buscar el search
aquí
pum
entonces
si yo aquí
pongo
voy poniendo cosas
¿no?
vais viendo a la derecha
aquí
aquí va apareciendo
en lila
lo que cambia
en el DOM
¿no?
en el árbol de elementos
del DOM
¿no?
podemos ver
qué es lo que se está renderizando
qué es lo que se está renderizando
a nivel de DOM
entonces
lo que está pasando
es que React
aquí
está siendo inteligente
y evita el renderizado
en el DOM
evita la escritura
en el árbol de elementos
del navegador
pero
no ha evitado
el renderizado
el cálculo computacional
en la parte de React
¿vale?
hay como dos renderizados
digamos
uno
el que hace React
internamente
en el mal llamado
DOM virtual
¿vale?
pero que en realidad
es como tener
todas las referencias
en memoria
y ver
lo que tiene que volver
a renderizar
y eso luego
cuando lo tiene que llevar
y
y plasmarlo
en la página
porque ahí sí que es inteligente
y dice
vale
yo he renderizado
todo esto computacionalmente
pero el resultado de esto
se traduce en este HTML
y resulta que ya está
¿vale?
entonces
ahí es donde lo evita
para verlo más claramente
en este ejemplo
buscando Matrix
habíamos dicho
que si miramos en el profiler
se ve que todo
se está renderizando
vamos a ver
qué pasa aquí
en el árbol de elementos
aquí en esta parte
de la derecha
si vamos bajando
anda
podemos ver
que no se están renderizando
en el DOM
los elementos
que sí se están renderizando
internamente en React
pero que se estén renderizando
internamente en React
tiene un coste
¿vale?
y eso es importante
de hecho
si vamos
seguimos bajando
pues eso
podéis ver
que los de arriba
no se vuelven a renderizar
pero los que va añadiendo
sí que se renderizan
porque no están
y los tiene que escribir
en el DOM
entonces React
es inteligente
pero tampoco es Albert Einstein
o sea
tiene un límite
¿no?
en este caso
lo que no renderiza
es lo del DOM
pero en el profiler
sí que podemos ver
que si voy bajando
sí que los está renderizando
todos
¿vale?
esto es súper importante
lo tienes que tener
cristalino
no es lo mismo
lo que evita renderizar
en el DOM
que ahí React
es muy inteligente
y evitar renderizar
internamente React
¿vale?
porque lo que está haciendo aquí
es básicamente
decidir
si ese
es decir
¿vale?
voy a ejecutar
esta función
y esta función
me da un output
¿no?
que es este HTML
¿vale?
lo voy a llevar al navegador
¡ostras!
si ya está
¿vale?
pero se da cuenta tarde
se da cuenta demasiado tarde
nosotros somos los que sabemos
previamente
si ese cambio realmente
amerita
un renderizado React
si realmente queremos decirle
oye React
mírate esto
¿vale?
así que
muy buena pregunta
¿quién me lo había preguntado?
que me lo había gustado mucho
V Rhyme
muy buena pregunta
¿qué más?
¿qué más?
decía Uriol Omedes
dice
este es el mítico debate
de no sobre memoizar
para no perjudicar
la performance
en vez de mejorarla
¿podría ser threshold
en memoizar siempre
aquellos componentes
con pocas props?
¿change?
algún caso que no
también es muy buena pregunta
¿vale?
hay que
un gran poder
conlleva una gran responsabilidad
¿vale?
y es muy importante
por ejemplo
podemos tener
diferentes problemas
uno
que aquí
pongamos un true
y evitemos
que nuestro componente
se capte
los cambios
por ejemplo
lo podemos ver muy fácilmente
en el search form
en este caso
claro
es un ejemplo
muy tonto
¿no?
pero imaginad
que aquí hacéis un
hacéis un cálculo
de
con todas las props
y que esta sea diferente
a esta
pum
sale true
y de repente
resulta que tú te vas
a tu página
súper feliz
y dices
vale
voy a buscar matrix
¿no?
y cuando le das
bueno
en este caso
sí que funciona perfectamente
vale
porque es todo interno
¿no?
pero imaginad
que
tuviese que
claro
que he pensado
que esto venía de fuera
imaginad
que aquí hacéis
que vuelva true
y entonces evitáis
que realmente
se renderice
el componente
ni siquiera
la primera vez
o que reciba
bien los cambios
o sea que tenéis
que tener mucho cuidado
porque
hay veces
y esto es un error
que por ir
de intentar optimizar
lo que estás haciendo
es añadir
bugs
entonces
intentad solo
hacer esto
cuando tenga sentido
ahora
vamos a arreglar
lo del gif
porque lo del gif
estábamos comentando
que ahora
le está llegando
en el list of gif
este
le está llegando siempre
el objeto
rest of gif
como extra info
es importante
que tengáis esto
presente
aunque la prop
en gif
no la uséis
internamente
le está llegando
a react
y por lo tanto
react lo está detectando
aunque vosotros
no lo veáis aquí
si sin querer
esta prop
no se usa
pero le llega
se la come con patatas
y dice
ah no no
esta prop
yo la tengo en cuenta
de hecho
podéis ver aquí
prep props
next props
y aquí
podríamos hacer
un console log
para ver lo que tiene
cada una
y podemos ver
lo que le llega ahí
y lo que le llega ahí
las next props
este objeto
al final estaba vacío
pero aunque sea vacío
es un objeto nuevo
y las prep props
pues nada
también extra info
entonces
esta prop
no la tienes
en tu componente
pero le está llegando
por eso
también es mala práctica
hacer esto
por eso también
es mala práctica
normalmente hacer esto
porque estás creando
al vuelo
un nuevo objeto
queda super guay
no os digo
que no lo utilices
yo lo utilizo bastante
pero que tengáis presente
lo que está ocurriendo aquí
lo primero
que le estáis enviando
props de más
que puede hacer
que evite
que funcione el memo
y lo segundo
es que está
seguramente
aquí estás creando
si hay objetos nuevos
dentro
pues puedes estar creando
objetos nuevos
y entonces
por lo tanto
el memo
no puede funcionar
tal cual
de una forma u otra
para solucionar esto
una cosa que se puede hacer
vamos a dejar esto
como estaba
una cosa que se puede hacer
es tener presente
qué es lo que necesita
tu componente
en realidad
para que cambie
en este caso
el gif
si lo miramos
fijamente
si miramos claramente
tenemos title
id
y url
pero
va a cambiar el title
alguna vez
si la id
es la que es
su title
o sea
podemos tener dos gif
que su id
sea distinta
o sea
podemos tener
uno con
id 1
y el título
a
y otro con id 1
y el título b
no
si tiene una idea
es un identificador único
y por lo tanto
tiene pinta que tanto
el title
como la url
van a ser la misma
en este caso
y solo en este caso
un memo muy sencillo
que podríamos hacer
para evitarnos
este problema
es decir
vale
si
las props anteriores
tienen una idea
y las nuevas
tienen otra idea
vale
entonces
si esto es true
me lo memorizas
me lo guardas
y me evitas
renderizarlo
cuando la idea anterior
y la actual
sean las mismas
en este ejemplo
funcionaría perfectamente
bueno o no
no sé
vamos a verlo
y nos arreglaría ya
el problema del objeto
vamos a buscar aquí
avengers
vale
y aquí podemos ver
vamos a poner profiler
podemos ver
que ya no hay
tanto recuadro
por ahí
vale
quitamos esto
y de nuevo
ya lo tenemos arreglado
aquí podemos ver
que cuando hemos añadido
aquí hemos añadido
y entonces
todos estos
no se han renderizado
porque hemos hecho
pues esta comprobación
súper sencilla
que es ver
solo la idea
en este caso
funciona
pero tened en cuenta
que esto a veces
no puede
no ser tan sencillo
por ejemplo
si por lo que sea
podéis cambiarle
dinámicamente
el título
o si el componente
hay veces
que la url
le puede llegar
de una forma
y otra
y se tiene que adaptar
vale
tenerlo en cuenta
el problema es
que cuando enteráis
a la madriguera del conejo
del memo
puede ser bastante problemático
y de mantener
entonces
hay que ser bastante sabio
de donde hay que encontrar
un poco
los problemillas
de performance
que podemos tener
vale
hay que hacerlo
con cuidado
con mimo
con cariño
y sobre todo
con responsabilidad
no os volváis locos
hay muchas veces
que yo lo digo
que digo
oye no pasa nada
no pasa nada
si por lo que sea
nuestro componente
se renderiza tres veces
mientras no sea problemático
vale
tampoco pasa nada
entonces
una cosa que puede ayudaros
a determinar
si realmente amerita
pues hacer todas estas optimizaciones
una es mirarlo en el profiler
que ya hemos aprendido
otra
es esta pestaña performance
lo podéis poner con la cpu
a 6x
que es bastante bestia
y le das aquí
start profiling
que es bastante
estos botones son muy parecidos
start profiling
and reload page
lo que va a hacer
es refrescar la página
y entonces
va a tener el profiling
ya activado
y vamos a poder ver un poco
cuánto ha costado
cada una de las cosas
así que nada
ya le he dado
y esto va a parar
automáticamente
después de un rato
tener cuidado
que esto es bastante costoso
a veces se puede poner
tu ordenador ahí
a lo loco
vale
ahora está haciendo
el loading profiling
y esto nos va a salir
un montón de gráficas
por arriba y por abajo
pero las vamos a ver
y vamos a ver
si podemos leerlas
espero que no
que no me den problemas
a ver
loading profiling
profile
carga
ayuda
se ha quedado poco
picueto
bueno vamos a dejarlo
mientras pensando
si porque
uy
ah mira
está procesando
vale
le ha costado
bueno es que esto nos da
un montón de información
un montón
tenéis aquí un poquito
esto rojo de aquí
esto me daría
para un vídeo entero
porque a mí esta herramienta
me encanta
y tiene un montón de cosas
pero podéis ver
si ha ido a 60 frames
vuestra página
donde ha hecho junk
vale
esas partes rojas
se estaban procesando
demasiadas cosas
seguramente de layout
porque hay muchos
estos colores que veis aquí
es
si ha sido de layout
si ha sido de scripting
si ha sido
de tema
de que has cambiado
el contenedor
de algo
y se ha tenido que repintar
bueno
hay un montón de cosas
luego aquí
aquí tenemos un poco
las ricos
como han sido
las ricos
ha ido pillando las imágenes
un poquito el árbol
y aquí además
tenemos
unos screenshots
que nos van diciendo
cómo se ha ido pintando
y todo esto
vale
lo que quiero que os fijéis
y que sepáis
es que en modo desarrollo
tenemos esta cosa aquí
que no se ve muy bien
pero pone timings
vale
este timings
es muy interesante
para react
porque aquí
nos da información
muy interesante
de cómo
cómo va funcionando
cada componente
por ejemplo
vamos a poner este
si lo hacemos
más grande
a ver si lo puedo hacer
más grande
esto
a ver
ahí
es que me va
ahora
vale
que me estaba equivocando
de botón
vale
esta parte
vale
voy a ampliarla
y está muy bien
esta herramienta
porque podemos ver
desde el principio
cómo se ha ido pintando
nuestro
nuestra aplicación
y qué ha ido pasando
si vamos aquí al principio
pues vemos que
al principio
pues ha tardado
150 milisegundos
parece poco
pero ahora que ya lo hemos puesto
de ese x
pues ahí bastante
150 milisegundos
ha pintado la app
que la app ha pintado suspense
esto ha pintado un link
y tal
bueno
entonces aquí podemos ver
el coste
que cada componente
ha tenido
vale
aquí por ejemplo
tenemos ya la lista de gif
aquí tenemos que se ha montado
y ha ido pintando estos gif
que son 5
vale
pues aquí podemos ver
vale
pues este
ha tardado 11 milisegundos
y este suele ser el problema
de react
que las listas son súper costosas
claro
11 milisegundos
no es nada
pero si hubiéramos pintado
100 gif
100
por 10 milisegundos
pues es un segundo
pues un segundo
puede marcar la diferencia
y eso que
estos gif
que tenemos aquí
son súper sencillos
entonces aquí
es donde os puede ayudar
a encontrar esa información
y decir
ostras
pues este gif
lo tengo que optimizar
porque claro
si aquí
cada vez que cargo
nuevos gif
aquí me está saliendo
un montón
y está tardando
un montón
y toda la búsqueda
está tardando
200 milisegundos
bueno
pues esta es una herramienta
súper interesante
que puede sacar
un montón
de información
bueno
pues
hasta aquí
un poco
el tema
de optimizar
evitar renderizados
hemos visto ya
tres cositas
una
muchas veces
es tan fácil
como extraer el componente
al tener un estado
que es compartido
pues eso puede ser
problemático
así que muchas veces
extraer el componente
es suficiente
la segunda
hemos visto que a veces
el use callback
nos puede salvar la vida
porque cada vez
que se renderiza
el componente
que está creando
ese callback
para un componente
hijo
claro
ese componente
esa función
como la del submit
se va creando
cada vez que se renderiza
necesitamos el use callback
para indicarle
que no nos cree
esa función
entre renderizados
pero hemos visto
que a veces
eso no es suficiente
y que necesitamos
utilizar el memo
porque aún así
pues se renderiza
el componente hijo
y lo que queremos
es asegurarnos
que si las props
no han cambiado
solo las props
no controla nada
ni del contexto
ni del state
eso es una cosa
más interna
del componente
pero lo que le llega
de fuera
que son las props
eso sí que lo podemos
controlar
y eso
hemos visto
lo podemos controlar
con el react memo
y que nos puede marcar
la diferencia
y finalmente
también hemos visto
que el react memo
recibe un callback
como segundo parámetro
que nos puede ayudar
a afinar un poquito mejor
porque a veces
pueden llegarle
objetos
como props
y el crear
un objeto al vuelo
y son referencias
distintas
eso no nos va a ver
por dentro
el react memo
si tienen los mismos valores
ese objeto
por lo tanto
podemos crear
nuestro propio callback
en el react memo
para afinar
y decir
bueno es que a mí
en realidad
solo me interesa
si ha cambiado
la prop id
pues voy a mirar
la id de antes
y la de ahora
son diferentes
o bueno
lo único que me interesa
es mirar la url
o la url
y la id
o quiero mirar
dentro de un objeto
si ha cambiado
esta
eso es lo que nos da
esta granularidad
así que eso ha sido
el tema del renderizado
vamos a hacer
el deploy rápidamente
para tener ya
nuestro proyecto
totalmente deployado
me has iluminado
el camino
midudev
me dice
Damian Soria
me alegro un montón
me alegro mucho
Nicolás Santi
dice
midu
ureducer
lo usas
dan abramov
con kensi dodge
lo están recomendando
bastante últimamente
en sus publicaciones
le pasará lo mismo
a los renders
si
le pasaría lo mismo
a los renders
pero
lo interesante
de ureducer
está muy bien
porque
te obliga a hacer
muy buenas prácticas
con el estado
y a separar
cómo se actualiza
el estado
o sea
separar la lógica
del estado
pero
yo lo que os diría
es que no utilicéis
el ureducer
para todo
todo tiene
un sentido
todo tiene
una utilidad
entonces
el use state
sigue siendo válido
es una forma
muy buena
de actualizar
el estado
de tus componentes
pero
imagínate
que tienes
un formulario
bastante complicado
o tienes
un formulario
que tiene
una lista
de filtros
y que
el actualizar
ese estado
es más complejo
y se puede actualizar
porque se puede
resetear el estado
puedes cambiar
un solo filtro
a lo mejor
cambian tres
a la vez
a lo mejor
si cambias
un filtro
que sea
el precio
se tienen que resetear
los otros
ya ves que hay
muchas formas
de actualizar
ese estado
ahí
yo creo que tiene
mucho sentido
el ureducer
porque
te obliga a decir
las diferentes acciones
en las que quieres
actualizar el estado
tener la claridad
de que
lo actualices
o sea
la lógica
de la actualización
la tengas
bien separada
del componente
y además
que no tengas
la mala práctica
de actualizar
el estado
sobre todo
si es un objeto
de golpe
creando siempre
un nuevo objeto
y no recuperando
bien la referencia
que puedes crear
y generar
un nuevo objeto
entonces
te puede ayudar
en otro tipo
de renderizados
puede ayudar
pero en este caso
que hemos visto
cuando ya le llega
ya es demasiado tarde
vale
entonces
si la prueba
al final cambia
al final
no lo vas a poder evitar
entonces
ureducer
que creo que
me gustaría
que lo viésemos
y seguramente
lo vamos a poner
pues
lo vamos a ver
lo vamos a ver
pero más adelante
a ver si se me ocurre
que podemos hacer
con filtros
de la búsqueda
porque a mí me parece
un buen caso de uso
y verás
que realmente
no lo hagáis todo
con ureducer
vale
los estados más pequeños
a veces
son lo suficientemente
sencillos
para que lo hagáis
con un use state
muchas veces
tienen sentido
y ya está
guau
Sergio Serrano
Garces
3 dólares
muchas gracias
nunca pares
de compartir
tu conocimiento
muchas gracias
Sergio
te mando un abrazo
enorme
que crack
que grandes sois
sois la hostia
sois muy guays
sois muy chidos
sois muy guays
sois muy chéveres
Juan
Josef
el Mousori
por fin llega el momento
de Bersel
llega
sí ahora empiezo
Andrés
mando como props
una copia de un elemento
de un array
cuando modifico esos datos
las props se modifica
el array original
¿qué crees que sea?
guau
puede ser cualquier cosa
puede ser cualquier cosa
pero muchas veces
cuando haces un destructuring
o cuando utilizas
algunos métodos
del array
incluso el concat
o sea
es que pueden ser
tantas cosas
si te devuelve un array
nuevo
si estás haciendo
cualquier cosa
ahí te llega
luego se sube el vídeo
al canal
Oman no te preocupes
grande maestro
me dice Roberto
gracias
en la respuesta
necesitaba
me dice Nicolás
gracias
justamente
estoy con un formulario
dinámico
que va creciendo
según el usuario
pues seguramente ahí
tiene sentido
el use reducer
como siempre un crack
gracias Nicolás
Ariel
¿por qué el momento
de actualizar
los estados
se debe usar
inmutables?
pues no
no se debe usar
inmutables
Ariel
¿por qué el momento
de actualizar
los estados
se debe usar
inmutables?
no sé si te refieres
al use state
que sí que tiene sentido
porque lo que queremos
al final
es que los estados
tengan un orden
y que sea predecible
lo que ocurre
si tú vas mutando
lo que va a pasar
al final
es que el objeto
que estás utilizando
no tiene seguro
ya lo que es
lo que tienes ahí
entonces
queremos que sea inmutable
justamente
para evitarlo
pero usar
inmutables
es un poco raro
porque
al final
un string
es inmutable
¿sabes?
un string
no lo pueden mutar
entonces
tienes que utilizarlo
sí o sí
pero podrías pasarle
un objeto
y un ojito
per se
no es inmutable
lo que sí que deberías
es actualizar
el estado
de forma inmutable
¿vale?
pero pasarle
inmutables
no es tal casi
usar algo
para código seguro
me dice René
no sé qué quieres decir
pero en frontend
poco código seguro
puedes hacer
minificar
y poca cosa más
vale
pues
¿qué vamos a hacer?
vamos a hacer
el deploy
¿vale?
si has llegado hasta aquí
dale like
suscríbete
si no lo estabas todavía
compártelo con tus amigos
ayúdame a compartirlo
ya que llegue a más gente
¿vale?
que estas cosas
cuanto más seamos
pues mejor no lo pasamos
vamos a darle
cañita
vamos a ver
vamos con el deploy
tengo que decir
que hace tiempo
que no utilizo
Vercell
entonces
vamos a intentar utilizarlo
tal y como yo recuerdo
pero puede pasar de todo
¿vale?
lo primero es instalar
Vercell
de forma global
así que hacemos un mpm install
Vercell
menos g
le damos aquí
y espero que esto
no tarde mucho
¿vale?
ha tardado súper poco
por lo que veo
y simplemente
lo que hacemos
es ejecutar
Vercell
Vercell
claro
mucha gente preguntará
¿qué Vercell?
¿qué Vercell?
vamos a verlo rápidamente
¿qué es Vercell?
ay
aquí es que estoy
logueado
así que
vamos a ver si
aquí
Vercell
no quiero hacer login
vamos a enseñar
que es Vercell
vale
Vercell básicamente
es una plataforma
que está muy orientada
para los equipos
de frontend
y que ayuda a hacer
deploys súper sencillos
de tus aplicaciones web
y de hecho
pues tiene un montón
de cosas
muy muy interesantes
como el hecho
de que se integra
muy bien en GitHub
y te hace deploys
por rama
de hecho
mi blog
sin ir más lejos
si busco aquí
midu.dev
a ver si salgo
bueno
no es este
pero lo puedo cambiar
midu.dev
pues
ay
¿qué ha pasado?
he petado
¿qué ha pasado?
he petado aquí
bueno
no sé por qué
no puedo ver
el
midu.dev
nada
error que
ah
vale
ahora lo he actualizado
y ya funciona
qué raro
bueno
el caso que si vemos aquí
pues yo hice aquí una PR
y puedes ver que tienes
lo de inspeccionar
y la preview
y me ha hecho una preview
de esto
entonces esto
si os parece
lo vamos a ver mañana
el cómo hacer la integración
de GitHub
porque me parece
muy interesante
y esto
lo que ha hecho aquí
es una
un deploy
de mi rama
directamente
así que
la integración
de GitHub
es muy potente
porque así puedes ver
tus cambios
en una URL
o sea
brutal
entonces
el cómo funciona
Versel
es totalmente gratuito
no os tenéis que hacer
tenéis que haceros cuenta
pero es totalmente gratis
os da un dominio
HTTPS
tenéis
deployment continuos
con git
como os he contado
está muy bien optimizado
tiene broadly
que es un método
de compresión
muy bueno
además
os da
la URL
está súper cerca
del usuario
vale
y luego además
pues tiene las serverless functions
que esto lo podemos hacer
con Next.js
y tal
son los creadores
de Next.js
y
hacen un montón de cosas
muy interesantes
son muy buenas
si queréis saber más
un poquito
de lo que hay detrás
pues
tenéis aquí
un
a ver
en mi canal
le hice una entrevista
a Guillermo Raus
que es el CEO
de Versel
vale
es argentino
así que
habla de cosas muy interesantes
es este chico
de aquí
este soy yo
vale
y bueno
habla de cosas súper interesantes
si lo queréis conocer
y tal
pues
me parece que
se aprenden muchas cosas
entonces
una vez que ya sabemos
todo esto
vamos a ver
cómo podemos hacer este deploy
lo único que tenemos que hacer es
uy
esto se ha quedado aquí
a ver
voy a limpiar
vale
hay que ejecutar Versel
y esto lo que nos va a hacer
es un montón de preguntas
vale
nos dice
oye
¿qué quieres hacer?
¿un setup y un deploy
de este proyecto que tienes aquí?
pues sí
sí sí sí
esto es lo que quiero hacer
y ahora me pregunta el scope
esto igual no os lo pregunta
esto es porque yo tengo
más de una cuenta
en mi caso
voy a utilizar mi dudev
vale
pero soy es el de mi empresa
o sea
mi dudev
le digo mi dudev
y ahora me dice
¿lo quieres linkar
a algún proyecto que exista?
lo cierto es que no
porque no tenemos ningún proyecto
así que por ahora no
vale
¿cuál es el nombre de tu proyecto?
bueno
aquí ya puedes ver
que por defecto
ha detectado que es giphy
pues va a ser giphy
le doy al enter
dice
¿en qué directorio
está tu código localizado?
pues la verdad
es que creo que está aquí
en este punto barra
¿no?
aquí es donde tenemos
todo el código
¿no?
así que vamos a ir adelante
con esto
punto barra
vale
está haciendo un setting
un setting up project
está pues creando
diferentes cosas
está haciendo un upload
vamos a ver si esto ha funcionado
vale
esto está muy bien
ahora tiene la capacidad
de detectar
de forma automática
si el proyecto
es de query backup
o es de next.js
o de diferentes frameworks
de frontend
¿vale?
y así te vienen cosas ya
pues configuradas
y no tienes que hacer nada
¿vale?
entonces
ya lo ha detectado
y nos está diciendo
que el comando
para hacer la build
es npm run build
¿vale?
vamos a mirar esto un momento
npm run build
os quiero enseñar eso
vale
estoy ahora en la terminal
¿vale?
y antes
y antes de continuar
uy
ha habido un error
vale
estoy en la terminal
voy a cerrar esto
que no sé por qué ha petado
vale
entonces
si hago un npm run
vamos a poder ver aquí
todos los scripts
tenemos start
test
tanto start como test
pues lo hemos visto
¿no?
tenemos build
y eject
eject
es para sacar la configuración
y configurarla tú
al detalle
no lo hagáis
¿vale?
en este caso
y tenemos build
claro
cuando hacemos un npm run build
pues esto lo que nos hace
es empaquetar nuestra aplicación
la optimiza
y ya la podemos servir
ahora vamos a ver
espero que no tarde mucho
tampoco debería ser muy grande
nos dice cuánto ocupa
además nos dice
los cambios que ha habido
de tamaño
respecto a la versión anterior
esto está muy bien
y nos dice
cómo podemos servir
cómo podríamos ver
localmente
esta página
podríamos hacer este
serve
ese build
no sé si funcionará tal cual
bueno
veo que no
que no ha funcionado tal cual
es que ya me extrañaba a mí
yo creo que este
ah
vale
porque primero hay que instalarlo
bueno
entonces
lo importante
es que dentro de build
la carpeta build
voy a hacer esto un poco más grande
vale
la carpeta build
aquí tenemos todos los estáticos
y en el index html
si lo abrimos
bueno
no funciona por diferentes motivos
pero
al menos aquí tendríamos nuestra página
con nuestras cosas
necesitaríamos un servidor
para poder ver esto
a ver si
serve build
o sea
que tenía por aquí un
a ver si no puedo hacer
serve
lo puedo instalar en un momento
serve
a mí me encanta
es un
es un proyecto
que te permite
poder tener
como un servidor local
para mostrar
los estáticos
de tus páginas
entonces
pues si quieres
rápidamente ver
si se ha hecho
bien
la compilación
pues lo puedes utilizar
vale
entonces
creo que sería
serve build
vale
entonces decimos
ahora estoy aquí
en el
en la raíz
de proyecto giphy
he utilizado serve
que lo acabo de instalar
y le digo la carpeta
que quiero servir
entonces serve build
y ahora pues si que me ha creado
el local host
un dos tres cuatro
pues me ha creado un servidor
y esto ya es justamente
lo que vamos a deployar
vale
esto ya es nuestro proyecto
no está en modo desarrollo
sino que esto sería
lo que vamos a deployar
vale
entonces
ahora que ya sabemos esto
claro
aquí cuando nos pregunta
el build command
tenemos que decir
cuál es el comando
que va a hacer justamente esto
de empaquetar nuestra aplicación
vale
el build
y el output directory
ya hemos visto
que lo deja en build
perfecto
y para hacer
el modo desarrollo
pues es react scripts start
que es el que estábamos utilizando
para tener aquí
en localhost 3000
nuestra aplicación
quieres hacer un override
de los settings
pues la verdad es que no
esto ya me va perfectamente
así que le digo que no
ya está haciendo aquí
un deploy
está haciendo un deploying
vale
en midudev
barra giphy
y
podemos ir a esta url
para inspeccionar
cómo va el deploy
así que vamos a ir
en un momentito
y aquí podemos ir viendo
lo que está haciendo
es súper rápido
vemos que está haciendo
la building
que tiene
lleva 13 segundos
y aquí está el dominio
donde va a hacer el deploy
podemos ver los logs
que está haciendo
paso a paso
el deploy
ahora está haciendo
el fetching
de los packages
y bueno
pues podemos ver
está haciendo el linking
o sea está bastante cerca
ya de hacer
la instalación completa
vale
a ver qué más
ya está haciendo la build
esto es súper útil
porque está viendo
todo el log
y puede ver si hay algún problema
de hecho esto es justamente
lo mismo que hemos visto
en nuestra terminal
solo que esto se está ejecutando
en los servidores de Mercell
vale
perfecto
pues nada
ya está
ya ha terminado
está haciendo
populating the build cache
pero bueno
esto ya lo tenemos en ready
ya tenemos aquí la preview
y ya nos dice que podemos
visitar nuestra página
vamos allí
pam
aquí la tenemos
ya tenemos una url
vale
con nuestro now.sh
ya tenemos aquí nuestra url
que podemos compartir
de hecho
os la pego
para que veáis
que funciona
que no me he inventado
vale
pues podríais entrar
en esa url
y pues nada
funcionaría bien
de hecho
vamos a ver si funciona
si
si parece que funciona
si
funciona incluso
el hecho
de
aquí tenemos
que buscamos matrix
y esta url
de aquí
la podríamos ya compartir
entrar directamente
y ya tenemos
una url
pública
totalmente gratis
con HTTPS
con nuestra aplicación
y que las rutas
funcionan correctamente
así que
bueno
me parece que
bastante fantástico
ahora
cuando ha terminado
primero nos ha dado
esta url
cuando la hemos visitado
teníamos una url
bastante rara
pero
por defecto
cuando nosotros
lo que hacemos
es un deploy
de digamos
la rama master
o la principal
aquí los dominios
ya nos lo ha preparado
para tener
partes más
más cortitas
de hecho
nos ha hecho este dominio
giphy.midudev.nao.sh
que también funciona
y mira que bonito
este
me ha gustado
me encanta que no esté
todavía ocupado
giphy.nao.sh
me gusta el nombre
igual deberíamos hacer
algo con esto
vale
menos mal que no habéis
ejecutado antes que yo
porque si no me hubiera quedado así
bueno
pues lo interesante
es que esto
ya tenemos tres dominios
que en realidad
están
en la misma página
si ahora hiciésemos
un cambio
por ejemplo
aquí pues habíamos puesto
tendencias
imaginemos
que queremos ir
un poquito más
y donde habíamos puesto
tendencias
pues queremos poner
trendings
vale
y guardo los cambios
y esto
ahora
pues le digo
venga
vercel
dale
ejecuto vercel
otra vez aquí
y ya directamente
me está haciendo
el deploy
vale
ha puesto deploying
me vuelvo a dar la url
para que haga una inspección
del deploy
pues nada
puedo ir directamente
copio
me voy aquí
perfecto
ya podemos ver
cómo va
y además
ahora
normalmente
tarda un poquito
menos
tarda un poquito menos
porque a lo mejor
ha podido hacer una caché
de los diferentes
recursos
a ver
esta ha tardado 39
vamos a ver si esta tarda menos
igual esta ya ahí
porque tampoco
nuestro proyecto
es que
tenga mucha cosa
normalmente tarda un pelín menos
porque
cachéa
ves
que ha puesto aquí
build caché downloaded
aquí se ha descargado
se ha descargado
lo de antes
ha hecho build caché found
o sea que
algo de caché tenía
pero bueno
en este caso
estamos hablando de
de una aplicación
muy chiquitita
o sea
un segundo
bueno
un segundo menos
que antes
pero nada
aquí teníamos
nuestro
nuestro deploy de antes
y si ahora
refresco
pues sigue igual
si ahora refresco
sigue igual
porque todavía
no lo ha llevado
a ese
a ese
a ese dominio
es normal
o sea
el deploy puede
en este sí que está
puede tardar
que se
digamos que se expanda
los diferentes dominios
en este caso
aquí podéis ver
que en domains
si que lo tenemos
en gifi.midudes.nao
y aquí en este
entonces
puede ocurrir esto
vale
que no haya llegado
a todos todavía
o
pero aquí aparecerá
eventualmente el otro
sino
otra cosa
que podemos hacer
vamos a ver por aquí
es que
podemos ir a los proyectos
a ver si los encuentro
porque
aquí
proyectos
entonces
en los proyectos
ah
vale
un tema
importante
claro
es que con la integración
de github
esto no pasa
aquí
cuando hemos hecho
el deploy
claro
yo solo he puesto
versell
pero
si nos fijamos
en la consola
ya me dice aquí
que si lo que quiero
es deployar a producción
tengo que utilizar
bueno aquí pone now
pero esto porque es el nombre
anterior
vale
pero lo que tengo que utilizar
es guión
guión
prot
vale
entonces le tengo que decir
que lo lleve a producción
ahora sí
con esto
nos lo va a llevar a la url de producción
que por defecto es la de giphy.nao.sh
vale
está bien porque así
entrando en los proyectos
lo he podido ver
está muy bien porque aquí puedes ver
todos tus proyectos
y aquí bueno
pues podéis ver el de mi dev
o sea mi blog
lo tengo aquí hospedado
súper contento
incluso el de mi proyecto
del tibak slide
y el del coronavirus
bueno
o sea que todo
todo lo tenemos aquí
si entramos en el proyecto
pues está bien
poder ver
pues el último de producción
que hemos enviado
las diferentes previews
aquí normalmente pues
lo podemos hacer desde aquí
o podemos hacerlo por prs
aquí tendríamos las prs deployadas
y
se debería
eso
se pueden ver los dominios
aquí podemos ver los dominios
los dominios que le hemos
le hemos dicho
que tiene que utilizar
pero podríamos aquí ponerle
pues
si lo tenemos
giphy.com
lo podríamos añadir
obviamente
tendríamos que configurarlo
ahora lo podemos añadir
pero aquí ya nos dice
oye
vamos a mirar el estado
y ahora nos dirá
oye
este dominio
no tiene la configuración correcta
lo único que habría que hacer
es ir
donde tenemos
nuestro dominio configurado
o comprado
y cambiar
el name server
las dns
y ponerle estas dos
ponéis estas dos
y ya lo tendréis
hay otra opción
que es esta
pero es un poquito más lenta
y perdéis muchos beneficios
que os da Vercell
así que esto
utilizáis los dns
y ya lo tendréis
en vuestro dominio
como yo
que tengo mi dudev
pues lo tengo en mi propio dominio
midu.dev
y esto está utilizando
Vercell para los deploys
con esto hemos visto
cómo hacer fácilmente un deploy
de hecho
para dejarlo ya
más pro
lo que podríamos hacer
es aquí
en los scripts
vamos a hacer un deploy
y aquí podríamos ejecutar
Vercell
no voy a poner
que lo haga en producción
porque no me parece
que sea correcto
hacer un deploy
de producción
desde aquí
desde un script
no me parece buena idea
así que
una cosa que sí que podemos hacer
es ejecutar los tests
antes de hacer el deploy
y luego hacemos
el deploy
a Vercell
que sea el deploy este
de prueba
de esta forma ahora
pues podríamos hacer
este run deploy
y ya
pues nos haría
los deploys ahí
pues fantástico
primero nos ejecuta
los tests
que teníamos
que vimos
en la clase anterior
así probamos
que nuestro código
funciona
antes de hacer el test
ay es verdad
que esto no funciona
exactamente así
bueno
lo tenemos que
ahora no me acuerdo
cuando es el flag
se puede hacer
que esto no nos pare
¿vale?
porque ahora nos está parando
porque nos pide el click
pero se puede
se puede integrar
sin problemas
lo que tendría que buscar
cuál es la
cuál es la configuración
en React Scripts Test
para evitar que haga eso
pero bueno
luego
lo importante
es que haría el deploy
puedes hacer tantos
como quieras
sí que hay un límite
hay un límite
en la parte gratuita
pero
no sé
son tantos
que yo no me preocuparía
vamos a ver
cuántos serán
creo que hay un número limitado
no tanto de deploy
sino de número de veces
que puedes hacer una build
al día
o algo así
a ver dónde está el pricing
pricing
o igual lo han cambiado
no me extrañaría
puede ser
sí
porque hace poco
cambiaron el pricing
y a lo mejor
pero sí que hay un
fair use policy
que es como
oye
no te pases
sabes
de
mira ves
aquí tenemos
hay algunos límites
que
builds per week
aquí te dice 25
bueno
yo he hecho
40
50 seguro
y no ha pasado nada
¿qué pasa?
que si siempre
te estás pasando
a lo mejor
de límite
pues igual
sí que te dicen algo
pero
un uso normal
no vas a tener
ningún problema
aquí dice
bueno
pues cuántos
de play puedes hacer
a la semana
por línea de comandos
2000
si haces 2000
igual
tenemos otro tipo
de problemas
vale
así que no
nos preocupamos
lo que es interesante
eso que ya tenemos
una preview
pues yo que sé
para acompañar
para nuestros compañeros
le podemos decir
oye mira
puedes entrar aquí
a esta url
que he hecho esto
y antes de subir
la producción
pues miramos
que los cambios
funcionen correctamente
¿no?
pues súper
súper interesante
para compartir
con nuestros compañeros
pues el trabajo
que estamos haciendo
o para compartir
en Twitter
un proyecto
una aplicación
que por cierto
que por cierto
que por cierto
antes de terminar
y para los 100
que estáis aquí
conmigo todavía
y eso
me gustaría hacer
un live
o un vídeo
viendo vuestros
vuestros proyectos
entonces
lo anunciaré
por Twitter
y por Instagram
entonces
estad atentos
a esas redes
porque me gustaría
que me enviaseis
vuestros proyectos
pueden ser de React
o de Vue
o de lo que sea
pero que sean de Frontend
eso sí
y que sean de código abierto
tienen que ser de código abierto
para ver vuestro código
y un poco
ver vuestro proyecto
curiosearlo
las ideas que habéis tenido
igual también
si queréis
os hago un poquito
de review
qué cosas se podrían mejorar
¿vale?
entonces no sé
qué día lo haremos
no sé
no creo
o sea esta semana
ya no creo
la siguiente
a lo mejor
el fin de semana
de la semana siguiente
lo haremos un día
entonces
eso
estad atentos
a las redes sociales
en Twitter
en Instagram
que lo anunciaré
y que me gustaría
pues ver vuestros proyectos
y a ver
qué ideas habéis tenido
no sé
y si queréis incluso
que le echemos un vistazo
a algún problema que tenéis
o lo que sea
¿vale?
entonces
hemos visto cómo mejorar
lo renderizado
de nuestra aplicación
hemos visto cómo hacer un deploy
y mañana
o pasado
mañana
vamos a ver
cómo hacer el deploy
cómo integrarlo
con GitHub
va a ser un vídeo
cortito
pero igual hacemos un live
para esto también
para que no se quede a medias
esto
pero es que ya
llevamos una hora cincuenta
y creo que es la hora
de cenar
para mí
así que
si os ha gustado
por supuesto
le dais al like
os suscribís
y lo compartís
con vuestros amigos
con vuestros compañeros
podéis seguirme
pues ya sabéis
os lo pongo aquí
a ver si encuentro la pantalla
podéis seguirme
en Instagram
donde voy poniendo
muchas cositas
voy avisando
también
mira este soy yo
feliz
feliz de que estéis aquí
¿vale?
para avisar de las clases en vivo
y todo esto
para daros envidia
de los cheesecakes
bueno
para avisaros de los vídeos que hago
y de poner fotitos
y tal
¿vale?
entonces me podéis seguir por aquí
me podéis seguir en Twitter
en Twitter
por si no sabíais
en Twitter
que aquí comparto
un montón de cosas
un montón
y la verdad es que
aquí es donde
creo que soy más activo
y por supuesto
por supuesto
en YouTube
ah mira
esto soy yo
feliz
también de que
aquí me podéis seguir
a ver si llegamos a los 7000
estamos cerca
estamos cerca
con vuestra ayuda
esto
serán
7000
¿vale?
de hecho
mira
lo vamos a hacer ya
en un momentito
porque confío
que vamos a llegar
así que
con vuestra ayuda
estos son 7000
en hay menos
mira
7000
no se sabe el qué
7000
se ha quitado los
7000
frontenders
happy
bueno
y technologies
ahí estamos todos
bueno
la forma te va un poco raro
pero ahí estamos
¿vale?
7000 frontenders
en nada
gracias a vuestra ayuda
así que
vamos a ir saludando
y despidiéndonos
a todos los que habéis estado
hoy
muchas gracias
de verdad
por estar aquí
casi dos horacas
conmigo
Jonathan de B
muchas gracias
muy bueno todo
como siempre
muchas gracias
muchas gracias
no sé si puedo recuperar
muchas gracias a Jeffrey Laura
que me ha dado
dos soles
peruanos
gracias a Sergio Serrano
Garces
Garces
que me ha dado
dos dólares
que me ha dicho
es lo que te mereces
crack
muchas gracias Sergio
muchas gracias
Emanuel Villanueva
que me ha dado 100
ARS
no sé qué son los ARS
me imagino que son
soles argentinos
ARS
me suena a argentino
así que
me dice
gracias a vos
aprendemos
y disfrutamos
de nuestra profesión
mucho más
muchas gracias Emanuel
te lo agradezco un montón
y también
me ha colaborado
también Sergio Serrano
Garces
tres dólares más
madre mía
que me ha dicho
nunca pare de compartir
tu conocimiento
Sergio
muchas gracias
de corazón
gracias
me ayudáis un montón
no solo contribuyendo
así que me anima
sino
dando likes
dejando comentarios
en todos los vídeos
que podáis
lo que os ha parecido
pues nada
haciendo comunidad
me encanta eso
y por supuesto
estando suscrito
y recomendando
a todos vuestros
amigos
amigos
colegas
y tal
que continúen aquí
un poquito más
conmigo
la odisea
de seguir subiendo de nivel
con el frontend
vale
y con react
así que nada
muchas gracias
alexandro munera
muchas gracias
guilliam
morocho
muchas gracias
nicolás santis
que siempre
uno que siempre está aquí
y me encanta
ver
que ya me voy quedando
con vuestros nombres
eso de verdad
me chifla
me encanta
y me emociona
ir viendo
andrés developer
20 pesos mexicanos
creo que son
muchas gracias
por todas tus aportaciones
muchas gracias
y gracias por todo
por compartirlo en twitter
y decir
pues estoy preparando la cena
y esto
no sé
a mí me emociona
y me anima
a continuar
así que
muchas gracias a todos
gracias alquímedes
gracias
gracias daniela
por estar ahí
y moderar el chat
que me ayudas un montón
y gracias
tross
muchas gracias
de corazón
muchas gracias a todos
continuamos en la siguiente
continuamos en el canal
por favor
cuidados mucho
y nunca dejéis
de seguir dándole
al frontend
esto ha sido muy guay
esto ha sido muy chido
esto ha sido muy perrón
esto ha sido muy chévere
un abrazo a todos
y a todas
chao
un abrazo a todos