Hoy para empezar, que me gustaría agradecerle a Ferdinand D'Alexa, no sé si hoy está en el chat,
pero el caso es que hizo una APR al proyecto y vais a ver que lo ha cambiado bastante,
que bueno, le ha dado un poquito de otro aire.
Como el proyecto está de código abierto, pues ha hecho una APR que ha estado interesante.
Dice, en caso de seguir con el proyecto para futuros directos,
pues realiza algunos cambios que considera mejor en la visualización.
Me encanta que contribuyáis y que hagáis estas cositas.
De hecho, me ha gustado tanto que he decidido emergearla y vamos a partir de este diseño.
Le he hecho algún cambio menor, nada del otro mundo, y podéis ver la APR porque la tiene en el repositorio.
El repositorio lo dejaré en la descripción, como siempre.
Y nada, pues eso, aquí ha dejado unas imágenes, ahora veremos un poquito cómo va,
pero creo que ha estado bien, le ha dado un lavado de cara y ha estado bien.
Así que, Ferdinand, muchísimas gracias por contribuir, por darnos esta alegría de compartirla.
Así que con esto vamos a continuar.
Voy a cerrar esto por aquí, voy a hacer esto un poquito más grande.
Vale, y voy a levantar el entorno de desarrollo.
Y bueno, os he dejado aquí en el monitor para intentar estar un poquito más, veros un poquito mejor en el chat.
Así que intentaré estar un poquito más atento a lo que vais diciendo.
Bueno, pues este era el proyecto nuestro, ¿vale?
Para los que os estáis conectando ahora, pues os lo recuerdo.
Hoy vamos a hacer Lazy Load.
Vamos a ver qué es Suspense, cómo utilizarlo.
Y vamos a hacer Paginación.
Y si nos da tiempo, Infinity Scroll.
Si no nos da tiempo, lo dejaremos para el siguiente live.
Así que bueno, y así tenemos para el siguiente viernes más material.
Entonces, vamos a ver un poquito cómo dejamos el proyecto.
Hay un montón de archivos ya.
La verdad es que el proyecto cada vez se está haciendo más grande.
Entonces, aquí en nuestra aplicación de GIF podemos ver que, bueno,
mostramos los GIF, que era la última búsqueda que habíamos hecho.
Y aquí teníamos categorías populares y mascotas.
Esto era un poco porque yo había hecho la gracia, ¿no?
De poner unas categorías populares.
Y bueno, una vez que hemos mergeado a la PR, pues ha puesto aquí de mascotas también.
Entonces, esto me ha dado una idea y he pensado, pues igual estaría bien tener, pues un GIFI API.
En GIFI API SDK hay un método, bueno, un endpoint que nos devuelve lo que es trending.
Entonces, he pensado que sería buena idea, pues, recuperar este trending.
Lo que es trending en GIFI directamente.
En lugar de hacer esto, que tenemos aquí de categorías populares, que si vamos a la página de la home,
que la tenemos aquí, esto lo voy a hacer más chiquitito, pum, vale.
Pues aquí en la home, voy a ajustar las cosas para que se vea todo bien, vale.
Aquí en la home puedes ver que está manualmente, pone categoría, name, está todo manualmente.
Entonces, he pensado que esto estaría bien si lo automatizamos y viene de ese endpoint, ¿vale?
Así que esto, pues voy a intentar hacerlo un poquito rápido para que veamos realmente lo que nos interesa.
Así que aquí lo que voy a crear es el getTrendingTermsService.js y va a ser muy parecido a lo que ya habíamos hecho en el getGIF,
que era llamar a un endpoint.
Solo que esta vez, en lugar de hacer un getGIF, vamos a hacer un getTrendingTerms.
¿He puesto? Ya no me acuerdo.
Terms, vale.
Muy bien.
Esto no va a necesitar ningún tipo de parámetros.
Y vamos a ver aquí qué es lo que necesita.
Bueno, esto es barra trending searches.
Necesitamos la API key.
Bueno, como ya estamos empezando aquí al tema de tener API key y la URL,
que esto se va reutilizando un poco, lo que creo que voy a hacer es crear aquí un settings.
Vamos a intentar hacer algo de buenas prácticas, al menos un poquito, ¿vale?
Y vamos a dejar esto por aquí.
Ay, me está diciendo que cambie la batería.
Vale, me he quedado, me quedé congelado.
Vamos a ponerse en la pantalla.
Vale.
Bueno, me he quedado sin batería en la cámara, así que por ahora no me vais a poder ver.
Luego igual le cambio la batería y me vuelvo a poner.
A ver si lo puedo continuar.
Vale.
Vale, pues API key, ya tenemos aquí el API key en el settings.
Este es el que tenemos aquí.
Así que ahora lo vamos a tomar de los settings.
En lugar de tener en cada archivo la API key que no tiene mucho sentido, ¿no?
Así que vamos aquí y en getGIF pues hacemos lo mismo.
Este API key es el que vamos a utilizar aquí.
Y aquí en getTrending pues lo mismo.
Este API key aquí.
Muy bien.
Ahora vamos a guardar los cambios para que me diga que esto funciona bien.
¿Qué es lo que no le gusta a este?
Dice is not a module.
Ah, claro.
Me falta aquí el export.
Muy bien.
Sí, es en vivo que dice alguien por aquí.
Sí, sí, es en vivo.
¿Qué dice Smilvás que es?
Vale, pues ¿qué más?
Entonces, también nos está quedando un poco raro todo esto de la URL, ¿no?
La URL esta que se está aquí pegando todo el rato.
Así que la URL también la vamos a dejar aquí.
API y URL.
Así que vamos a coger la URL, al menos la parte que se reutiliza.
Que hasta cierto punto yo diría que es hasta aquí.
¿Vale?
Y esta URL pues la vamos a pegar aquí.
Así que ahora también vamos a recuperar la URL y la URL la vamos a utilizar aquí.
Y ya está.
Bueno, algo es algo.
Luego, para el trending terms he visto esto.
Es trending searches, pero bueno, no importa.
Trending searches.
Entonces, en lugar de search, esto...
Ah, y ojo, cuidado, porque he puesto aquí en setting GIF.
Esto lo he dejado.
Vale, vale, vale.
Sí, sí, sí.
Entonces, esto es barra trending searches.
Esto es solo una barra.
En API URL hemos dejado una barra al final.
La vamos a quitar, esta.
Y vamos a dejarla que se ponga aquí, que me parece que se lee un poquito mejor.
Y todo esto sobra.
Esto sería para el get trending terms.
Y para tomar los GIF, pues aquí podríamos hacer un poquito lo mismo, ¿no?
Aquí el API URL.
Y ahora esto lo tomamos del settings.
Vale.
Guardo los cambios.
Vamos a ver.
Bueno, parece que esto debería funcionar.
Aquí, si miro la respuesta que me pone por aquí, me pone sub-suit response.
Vale.
Me dice que me devuelve data y es un array de strings.
Podría rápidamente mirar a ver qué devuelve esto,
pero voy a confiar que es un array de strings,
que me imagino que son los strings que queremos.
Así que todo esto que hacíamos antes, esto ya no tiene sentido.
Esto ya lo único que tengo que hacer es devolver este data.
Así, tal cual.
¿Vale?
Así que con esto y guardando estos cambios para tener la API URL,
si volvemos aquí, bueno, todo funciona como funcionaba antes,
pero ahora vamos a utilizar este get trending, bla, bla, bla.
Bueno, voy a ir cerrando cosas que si no se me van a ir acumulando.
Vale.
Entonces, en la página, en la home, esta, teníamos aquí las categorías.
Ahora lo que voy a querer es llamar a ese servicio para recuperar las categorías
que nos interesan.
Así que vamos a crear un nuevo componente aquí que le vamos a llamar trending searches.
Trending searches.
Y aquí un index.js.
Vale.
Import React desde React.
Y aquí, pues, hacer el export default function y lo que vamos a tener es este trending searches.
Vale.
Trending searches.
Por ahora, esto no va a recibir nada por los parámetros, pero lo que sí que vamos a tener,
bueno, por las props, no los parámetros, pero vamos a tener el state,
que el state, pues, serán las trends.
Y tenemos el set trends.
Y esto, pues, va a ser el use state.
Y al principio, pues, va a ser que tenemos una revacía.
Bueno, esto es, voy a ir un poco más rápido con esto, porque creo que esto ya básicamente lo conocéis.
Pero básicamente lo que queremos es hacer aquí la llamada del get trending, a ver, get,
en servicios, get trending, puesto terms, pero bueno, punto, punto.
Vamos a quitar esto.
Punto, punto, punto, punto, a ver dónde está.
¿Dónde está esto?
Services, barra, get trending, services.
Vale.
Muy bien.
Y aquí lo que haremos, se supone que es la categoría, bueno, no a category, era list of category.
No, era category.
Vale, vale.
Sí, sí, category.
Vale.
Entonces, esto por ahora vamos a dejar así.
Aquí vamos a llamar al get trending terms.
Y cuando tengamos la respuesta, pues, lo que hacemos es hacer el set trends.
Y ya está.
Esto lo dejamos así.
Y ahora la categoría.
Vamos a ver cómo se utilizaba.
Categoría, se pone el name y las opciones.
Vale.
Pues, en los options, options, vamos a tener las tendencias que hayamos recuperado.
Vale.
Me dice que el name, se lo tenemos que pasar, vamos a poner, no sé, tendencias.
Vale.
Vamos a poner el use state este.
Y esto, básicamente, lo que tendría que hacer, pues, nada, recuperar, utilizar el servicio este.
Esto no me, esto que estoy haciendo aquí, cada vez me está poniendo más nervioso.
Igual ahora, si vemos que todo funciona, lo arreglamos en un momentito, ¿vale?
Que me, no sé, estoy poniendo tantos puntos.
Vale.
Entonces, vamos a utilizar este nuevo componente en la página home.
Y ahora, en lugar de esta categoría que tenemos aquí, pues, utilizamos este trending searches.
Trending searches.
Esto ya no necesitamos.
Y vamos a importar el trending searches.
Sí, sí, no.
Estos puntitos le quedan, no.
Lo vamos a arreglar porque no me gusta, no me gusta.
Vale.
Guardamos los cambios.
Y, bueno, bueno, ahí está.
Ah, ahí están.
Ya está.
Ya lo tenemos, ¿vale?
Estamos recuperando las tendencias estas, digamos, que son las tendencias de hoy de Giphy, ¿no?
Bueno, veo que la umbrella, pepa pic.
Pues, sí, hay una de las tendencias es pepa pic.
Uy, veo que aquí, cuando son un espacio, bueno, esto se puede arreglar fácil.
Esto, si vamos a categoría, la categoría es el componente que está haciéndolo el título.
Bueno, pues, aquí podríamos utilizar decode Yuri o Yuri.
Y aquí esto ahora, a ver.
Vale, no, no le ha gustado.
Ajá, a ver, pepa, pepa, pepa pic.
No, no le ha gustado que haya hecho esto.
Bueno, pensaba que esto lo iba a arreglar, el decode Yuri.
No sé por qué.
Pensaba que esto me iba a dejar esto con un espacio.
Voy a tirar de vuestra, de vuestra, falta importar el user state.
Es que, ¿cómo va esto con retraso?
Sí, no, eso ya lo he visto.
Venga, ¿alguna idea para arreglar esto?
Para que me salga correctamente.
Igual, ah, claro, es que esto, ojo, ojo, ahora ya creo que he caído.
Es que esto, este pepa pic, esto, este es el app title.
Claro, esto no es aquí.
Vamos a ver, ¿dónde está el app title?
El app title, app title.
Ya está.
Era eso, solo que no es ahí.
Sí, esto, app title, última búsqueda, es aquí, es aquí, es aquí.
De code Yuri, vale, vale, vale, esto ahora, ahora sí.
Vale, vale, ya está, ya está.
Uy, que me ha ido de, vale, vale.
A ver si alguien había dicho, falta importar.
Sí, no, es decode Yuri, funciona, ¿eh?
Esto que he puesto aquí funciona, solo que no lo había puesto donde era.
Vamos a poner esto que esté un poquito más legible.
Vale, pues hasta aquí, pues nada, ya tenemos esto.
Ahora, os había dicho que iba a arreglar esto de los puntos porque me estaba poniendo un poquito nervioso.
Y no debe, creo, esto, si no ahora lo miramos en la documentación,
creo que a Create Backup y en Next.js también se puede crear un archivo jsconfig.json
y aquí se puede hacer este compiler options y aquí se le puede decir el base URL.
El base URL va a ser que cuando utilicemos un import, pues lo que va a resolver con el import va a ser a partir de este, de source.
Y esto es lo que nos debería arreglar un poquito todos los puntos que tenemos por ahí.
Así que, ahora que tenemos esto, vamos a probarlo.
Se supone que ahora, como nos va a resolver a través como la base en source,
ahora podríamos, en lugar de utilizar estos puntos, pues quitarlos porque la base ya sería source.
Veo que no le ha gustado.
No le ha gustado, igual es porque, a ver, vamos a quitar el servidor,
y lo vamos a volver a levantar, porque igual me extrañaría que tuviese que ver, ¿no?
Ah, sí, mira, aquí sí que ha funcionado.
Lo que me extraña es que no lo pille el editor.
Esto sí que me extraña, porque el editor lo debería encontrar.
No sé si a lo mejor también tendría que quitar el editor.
A ver.
Ah, qué lástima.
Pues sí, esto es un rollo.
A ver, vamos a cerrar las ventanas y volver a abrirla.
Por ejemplo, ¿dónde la había hecho?
Aquí, en detail.
Aquí tampoco.
Bueno.
Bueno.
Ah, sí, mira, ahora sí, ahora sí.
Vale, vale.
Mira, perfecto, ya está.
No sé qué le había pasado al editor, pero ya está.
Ahora ya no tengo que poner puntos y puntos, ¿no?
Esto mucho mejor, que si no es un locurón.
Y además, lo mejor es que tiene autocomplete.
O sea, yo ahora aquí hago components y list of gif y funciona perfectamente.
Vale.
Bueno.
Ahora mejor.
Vale.
Entonces, hemos eliminado en la home.
Volvemos a la home.
Vamos a hacer esto un poquito más chiquitito.
Y aquí, pues, ya tenemos las tendencias.
Vale.
Perfecto.
Entonces, entonces, ahora, lo que me gustaría hacer, porque, claro, esto está muy bien,
pero si yo aquí abro las herramientas de desarrollo, voy a poner esto por aquí abajo,
miro el network y refresco, podemos ver que, aunque no lo necesite,
estoy haciendo la llamada de los trendings.
De hecho, aquí se ve.
Este es.
El de los trendings es el primero.
Bueno, igual no se ve mucho, pero aquí está.
Este es el de los trendings.
Aunque no se está viendo.
O sea, esto es, pues, una matada.
Porque si no se está viendo, ¿por qué estoy cargando las tendencias?
Estaría bien, ¿no?, que solo se cargase cuando me acerco y entonces que se cargue.
Y de esta forma, pues, tenga algún tipo de lazy load.
Que esa sección se cargue solo cuando se necesita.
Eso es lo que me gustaría.
Así que, vamos a intentar hacer un lazy load con esto del trending y vamos a crear un lazy trending.
Antes de continuar, voy a ver qué comentáis.
¿Qué comentáis por aquí?
¿El programa que utilizas es Visual Studio?
Sí, es Visual Studio.
¿Cuánto va a durar el stream?
Pues, normalmente dura una hora y media, una hora y cuarenta.
Pero, a ver, a ver cuánto dura.
Bien, salvado eso.
Gracias, Gustavo.
¿Cómo se llama el plugin que muestra el error en vivo?
¡Qué raro!
¡Qué raro!
No me lo habían preguntado todavía.
A ver, el plugin es ErrorLens.
Ah, mira, ya.
Gracias, Ferdinand, que ya lo había contestado.
¿Se podría hacer alias con Webpack?
No podemos hacer alias con Webpack aquí porque tendríamos entonces que, tendríamos que, que, que, que, hacer un Eject.
O sea, tendríamos que sacar la configuración.
Y la verdad es que no lo recomiendo si vais a utilizar Create Breakup porque veis que no hay configuración.
En este caso, esto lo soporta, Create Breakup.
O sea, que aquí, esto no es para hacer alias de paquetes de fuera, sino es como para hacer un alias de cómo resuelves tus propios paquetes.
Lo cual es bastante útil.
Pero no puedes hacer un alias como sí que hace, puedes hacer en Webpack, que es bastante más potente.
¿Vale?
Acabo de terminar tu curso en Platzi.
Quería seguir haciendo otros proyectos similares para seguir aprendiendo.
Pues, mira, ¿alguna recomendación?
Pues este, de Loggif, que es súper divertido.
No sabía lo del JSConfig.
Pues es verdad, hay muy poca gente que sabe esto.
Y es, a mí me parece espectacular.
Queda mucho más limpio y, bueno, no pierdes el hecho de poder tener un autocomplete.
Lo cual, pues, está genial.
Así que, vale.
Vas a subir el vídeo.
El vídeo se queda grabado.
Voy a intentar recuperar la batería de la cámara.
Dadme un minuto, que tengo aquí una batería al lado.
Y voy a intentar poner la cámara.
Y ahora sigo con el live.
No se ha ido nadie, ¿no?
No, es que tenía la batería al otro lado.
Voy a ver si soy capaz de cambiarle la batería a la cámara mientras estoy hablando.
Eso es.
¿Qué utilizas para hacer zoom?
Mira, voy a ir contestando mientras estoy haciendo aquí una operación quirúrgica, que es que es para verlo.
Me tendría que grabar haciendo esto.
Esto sí queda para un live.
Utilizo Mac.
Tiene en la accesibilidad, en el tema de accesibilidad, puedes tener como un shortcut para que haga ese tipo de zoom.
Lo cual a mí me resulta súper útil, sobre todo para enseñar cómo se está haciendo el código y todo esto.
Así que, ¿cuándo ocupar el funcional component y cuándo class?
Siempre que podáis, utilizad funciones.
Siempre que podáis.
Ese sería mi consejo.
Ah, y vale.
Creo que lo he conseguido.
Ahora veremos si funciona o no funciona.
Pero...
¿O no?
A ver.
He vuelto, he vuelto.
Vale, ya está.
Ya está, ya está.
He cambiado la batería al vuelo, ¿eh?
Madre mía.
Bueno, perfecto.
Vale, pues con esto ya tenemos las tendencias y ahora lo que vamos a hacer es pasar las tendencias a que sea con lazy load.
Para evitarnos...
Ahí, estoy mirando ahí y es aquí.
Para evitarnos la request que estamos haciendo, ¿vale?
Así que vamos a ello.
Vamos a ver cómo lo podemos hacer.
Vamos a volver a poner aquí, ya sé si es algo en pequeñito aunque sea, para que veáis lo que estoy haciendo.
Bueno.
Vamos al lazy trending.
Lo que vamos a hacer por ahora, para hacerlo sencillo, vamos a intentar hacerlo todo aquí.
Este mismo componente al que está haciendo el export default y es el que estamos utilizando, vamos a quitarle el export default.
Y lo que vamos a hacer aquí es que el export default, lo que sea, es como otro componente que le vamos a llamar lazy trending, ¿vale?
Lazy trending.
Este, así será, este el que utilicemos en la página home.
Ahora, esto puede salir mal, es lo que tienen los directos, pero lo que voy a querer hacer en este componente, básicamente, es tener un estado dentro que sea el que me determine si tiene que mostrar o no tiene que mostrar el trending, la sección esta de trending.
Para ello, necesitamos un efecto y este efecto dentro va a utilizar el intersection of server.
No sé si sabéis de la API de intersection of server, creo que no tengo ningún vídeo, ¿no?
Pero, bueno, es muy interesante en MDN, pues, mira, aquí está la documentación de MDN, anda yo también, de MDN.
Pues os lo explica bastante bien, además, yo colaboré en la traducción que podéis ver, si encontráis cualquier cosa, me avisáis.
Y, básicamente, es una API de la plataforma que lo que nos permite es detectar cuando un elemento está en el viewport.
Bueno, nos permite hacer muchísimas cosas más.
Pero esto es lo que nos va a permitir hacer un lazy load, ¿vale?
Es lo que nos va a permitir evitar que el componente se cargue si no lo estamos viendo.
Así que, en este efecto, lo que vamos a hacer es crear un observer.
Y este observador lo iniciamos con new intersection observer.
El intersection observer recibe dos parámetros.
Uno, el callback que se ejecutará cada vez que haya una actualización sobre lo que está observando, ¿vale?
Así que vamos a poner aquí on, on, on, no sé cómo llamarle, on change.
Vamos a llamarle on change.
Y luego, pues, tiene aquí un objeto de opciones.
Aquí le pasamos un objeto de opciones que tiene un montón.
Tiene el root margin, el root, que sería el elemento que vas a utilizar de referencia para ver si está haciendo intersección, intersección.
Entonces, por ahora vamos a pasar que el root margin sea de 100 píxeles.
Esto significa que cuando haya una distancia de 100 píxeles, ya dirá que el elemento está haciendo intersección con el viewport, ¿vale?
Así que, de esta forma, pues, nos ayudará a hacer el lazy load, a hacer que diga que está funcionando, o sea, que está en la intersección antes, ¿no?
Y cargaremos antes de que aparezca.
Así es como para hacerlo mucho más agradable a nuestro usuario, ¿vale?
Entonces, en este on change tenemos aquí la función que se va a ejecutar cuando haya cambios en esta intersección, ¿vale?
Entonces, ¿qué es lo que vamos a hacer?
Este callback del intersection of server recibe dos parámetros.
Uno, los entries, que son todas las entradas que hay dentro que estamos observando para ver lo que le ha pasado a cada uno,
porque ya verás que ahora solo observaremos un elemento, pero podríamos observar tantos elementos como queramos, ¿vale?
Así que aquí tenemos todas las entradas.
Y luego tiene un segundo parámetro que es el propio observer que hemos creado.
Pero bueno, en este caso creo que ahora mismo no lo vamos a necesitar.
Entonces, ¿qué es lo que tenemos que hacer con este observer?
Pues observar, ¿no?
Tenemos que observar.
Así que hacemos punto observe y aquí tendríamos que pasarle el elemento a observar.
Que ahora mismo no lo tenemos todavía.
Así que vamos a crearlo.
Vamos a hacer aquí, vamos a hacer que este componente devuelva un div que sea lazy trending.
¿Vale?
Con el identificador lazy trending.
Luego veremos que esto tampoco es necesario, que tenga una idea.
Pero por ahora lo vamos a hacer así.
Entonces, si tenemos que mostrar, si ya el estado que tenía el componente lazy trending es true,
que todavía no lo estamos poniendo en true, o sea, siempre va a ser false por ahora,
entonces mostraremos el trending searches, ¿vale?
Este trending searches.
Y si no, pues por ahora, bueno, pues no hace nada.
No muestra nada que te haya sentido, ¿no?
Entonces, ¿cuál es el elemento a observar?
Pues este que tenemos aquí.
Así que vamos a recuperarlo con un document.getElementByID.
Se puede hacer de otra forma y luego lo veremos.
Pero por ahora es para que entendáis qué es lo que queremos observar.
Y observamos un elemento y necesitamos pasarle un elemento, un nodo del DOM al observe.
Entonces, ahora le estamos pasando el lazy trending.
¿Vale?
Entonces, ahora aquí en el onChange vamos a ver qué podemos hacer.
Podemos recuperar el elemento porque ahora como es un array, entries es un array,
y solo estamos observando uno, pues vamos a recuperar el primer elemento que estamos observando
porque solo podemos poner un console.log para que veamos lo que pasa con entries y veamos toda la información.
Pero bueno, por ahora vamos a poner también el console.log del elemento este.
Y ahora ya, en realidad, aunque no está haciendo nada todavía y no vamos a ver el elemento,
no vamos a ver que se renderice nada.
Si ahora aquí vamos abajo, pues ahora ha desaparecido a las tendencias,
pero deberíamos ver en la consola un montón de información.
Y efectivamente, pues aquí hay un montón de información que ha aparecido.
De hecho, cada vez, esto está bien, ¿no?
Cada vez que mueves el scroll, ¿vale?
Y pasa algo con el elemento que estamos observando, pues nos avisa y nos da una actualización.
Aquí puedes ver que tenemos un array de entradas y en la posición cero,
pues tenemos un montón de información de ese elemento que estamos observando.
Nos dice si es visible, si está interseccionando,
si el elemento en sí nos dice también las medidas.
Aquí tiene un montón de información y es súper útil porque es mucho más performante
que no estar mirando constantemente el scroll de los elementos, ¿vale?
Así que ahora os lo comento más y voy a ver cómo os voy leyendo, a ver qué decís.
Netflix me parece que utiliza esta API, estoy seguro.
O sea, todo el mundo utiliza esta API.
Todo el mundo la utiliza y la debería utilizar, ¿vale?
No deberíais escuchar el scroll para ver si un elemento está en el viewport porque es muy poco performante
y, bueno, al menos podéis hacer un debounce para evitar que se cargue constantemente ese evento,
pero si no, pues Intersection Observer, además, es muy fácil tener un polyfill.
Igual ahora lo hacemos, pero, bueno, a ver, ¿qué más?
Tengo, no, pasen el link del repo, ¿vale?
Luego os lo dejo en la descripción y si no, en el anterior vídeo lo tenéis disponible.
Vale, pues vamos a continuar, vamos a continuar.
Con toda esta información que tenemos aquí, si miramos en el entry,
aquí podemos ver que tiene una propiedad que es si está interseccionando, ¿no?
Entonces, en algún momento este isIntersecting, pues debería ser true.
Si yo voy hacia abajo del todo, que es donde está nuestro elemento,
pues ahora con todo esto que se ha actualizado podemos ver que nos indica que es true, ¿vale?
Que en algún momento ese elemento ha llegado al viewport, que es justo donde queríamos que estuviese, ¿vale?
Pues lo que vamos a hacer es esa propiedad, vamos a decirle, ¿vale?
Pues muy bien, si este elemento está haciendo intersección, lo que quiero es que el setShow pase a ser true.
Entonces, esto funciona, funciona y lo vamos a, voy a guardar los cambios y voy a hacer esto un poquito más chiquitito
y puedes ver que ahí salen las tendencias, que ya tenemos las tendencias y todo perfecto, ¿vale?
Si guardo, voy arriba del todo, ¿vale? Vamos arriba del todo y vamos a mirar el network.
Voy a, ah, aquí puede ser que pase una cosa interesante, pero vale.
Vale, estoy arriba del todo y podemos ver que se ha hecho una petición.
Esta petición es la de la búsqueda. Es la de la búsqueda porque la de la búsqueda no la tenemos limitada por ningún tipo de lazy load.
Si yo voy haciendo scroll hacia abajo, ahora llegará un punto en el que detecte que está haciendo intersección
y entonces disparará el setShow a true. Cuando el setShow este pase a ser true,
entonces lo que va a hacer es renderizar el componente trending searches y disparará la petición y hará todo esto, ¿vale?
Voy a seguir bajando, voy a seguir haciendo scroll hasta que llegue un momento.
Ahí está, ha llegado el momento, ha hecho esta petición que es la de las tendencias
y aquí tenemos los strings que son las tendencias y aquí lo ha mostrado, ¿vale?
Claro, esto es súper rápido. Además, en modo escritorio, si yo refresco, pues lo hace al momento
porque ya está visible y cuando está visible tan rápido, pues ya lo hace y ya está.
Lo cual está bien, no hay ningún problema. Además, pues así en desktop funciona bien y ya está.
Pero cuando es en móvil, lo que queremos es que lo haga solo cuando bajamos.
Lo que pasa es que esto lo hacemos tan rápido que seguramente ni nos vamos a dar cuenta.
Otro tema que a veces tienes que pensar, por ejemplo, si yo esto lo hago lo suficientemente grande
y le doy a buscar, voy a mirar el Nick Work, si soy capaz. A ver, vale.
Ahí, a ver, Nick Work, sí. Bueno, es posible que veamos que se han hecho las dos llamadas.
Es posible, ¿no? Que yo entre a la página y alguien diga, bueno, pero a ver,
se está haciendo las dos llamadas igualmente. O sea, ¿qué está pasando?
Me estás engañando con Lazy Load, esto no está funcionando bien. Vale.
El problema que hay aquí, aunque no lo parezca, es que como esto se está montando en el cliente,
esta última búsqueda, si esto lo ponemos, vamos a poner esto que sea súper lento, ¿vale?
Y voy a refrescar. Bueno, esto igual tarda un montón.
Pero lo que nos vamos a dar cuenta es que al principio, el última búsqueda,
claro, eso es una petición asíncrona, entonces está vacío.
Y como está vacío, ah, amigo, ¿ves? Ahí está, estaba vacío.
Entonces, Tendencias estaba arriba, porque claro, como última búsqueda estaba vacío,
pues ha dicho, ah, bueno, pues sí, claro que está haciendo intersección.
Por lo tanto, lo que deberíamos hacer para asegurarnos a veces de que tiene suficiente espacio,
por ejemplo, sería coger el List of GIFs y tomar esto y decirle, oye, bueno, pues esto,
ay, no, este no es, es este, pues que tenga una altura mínima, de forma que nos aseguremos
que nunca lo va a romper, no sé, podemos poner que sea todo el Viewport del Height,
porque es bastante improbable que la búsqueda que tenga tan pocas que no la llene.
Pero de esta forma, voy a volver a poner en la Newport a la velocidad normal,
pero de esta forma, ahora sí que puedes ver que eso lo hace una, ¿no?
Porque el elemento este, aunque no tenga nada, aunque no se pinte, pues tiene una altura
y esa altura lo que hace es empujar las tendencias hacia abajo.
De esta forma, aquí puedes ver, ahora solo hace una y hasta que no me acerco,
ahora sí, pues no hace la siguiente, que es lo que queríamos.
Pero, ojo con esto, que esto es un error muy común, muy común, ¿no?
Que decimos, wow, pero si esto no está funcionando, ¿qué está pasando?
No me está haciendo lazy load, me lo carga desde el principio.
Claro, porque si esto, lo que tienes arriba es contenido asíncrono y todavía no se ha cargado,
pues tienes que tenerlo en cuenta, ¿vale?
Porque tienes que hacer hueco.
Ay, para aquí, para acá, que os iba a leer.
Vale, pues, ¿qué? ¿Qué me contáis? No me contáis nada.
Vale, espero que estéis todos bien, que por ahora lo estéis pillando guay.
Por ahora hemos hecho el lazy load, ¿vale?
Pero esto del lazy load queda un poquito, ¿no?
O sea, está bien porque hacemos un lazy load de la llamada de la Nick Word,
pero como tal no estamos haciendo un lazy load de todo el componente,
que es lo que queremos hacer ahora.
Entonces, unas cuantas cosas vamos a contar aquí.
Voy a quitar esto.
Unas cuantas cosas.
Lo primero, aquí, si recuerdas, pues había dicho que íbamos a poner una id
y, bueno, esto funciona y está bien.
Pero esta, lo primero es que esto es innecesario,
porque React nos da una forma de poder recuperar la referencia de un elemento del DOM
sin necesidad de ponerle un nombre y que además esto, pues, tiene ciertos problemas.
Y además que en React nos gustaría evitar al máximo posible esto, ¿no?
Esto hace un document.getElementById, esto nos gustaría evitarlo al máximo.
Además de que tenemos que recuperarlo cada vez que se ejecuta este efecto.
Total.
Que hay una forma de evitar todo esto.
Para eso vamos a añadir un nuevo hook que está dentro de la biblioteca de React
que se llama useRef.
Y en useRef vamos a hacer aquí una constante y le vamos a llamar elementRef.
Y vamos a utilizar useRef.
Ahora, ya nos dice que este elementRef, pues, tiene un valor asignado,
pero no lo estamos utilizando.
Este useRef lo que nos hace es como un baúl.
Es parecido al state, pero no es un state.
¿Por qué?
Es un baúl porque nos permite guardar valores que entre renderizados
se va a mantener ese valor totalmente inalterado.
Entonces, es parecido a un state porque pasa como el state, ¿no?
Que el valor sigue siendo accesible y no cambia entre renderizados,
solo que la diferencia con el state es que el state, cuando cambia su valor,
nos vuelve a renderizar el componente.
Pero en el caso del useRef no vuelve a renderizar el componente.
¿Vale?
En este caso vamos a poder utilizarlo también directamente
para recuperar la referencia de este elemento.
Para eso utilizamos la propiedad ref y le pasamos el elementRef.
Y automáticamente ahora en elementRef se está guardando la referencia de este div.
Ahora le decimos que lo que queremos observar no es este getElementById,
no es este elemento, sino que es el que tenemos en la referencia.
Y para eso tenemos que utilizar la propiedad current,
que esto lo que dice es el valor actual del elementRef, de esta referencia.
Le he llamado elementRef, pero lo podríamos llamar ref directamente,
si lo veis mejor, como queráis.
Yo creo elementRef igual queda un poquito más claro.
Entonces, para acceder al valor de la referencia tenéis que poner .current.
Esto es un patrón bastante típico en React, esto de utilizar una referencia
y recuperar la referencia del elemento, cuando sobre todo tienes que interactuar
con el DOM y React no está preparado para ello.
Así que esto sería un poquito el lazy trending.
Ahora vamos a volver a bajar aquí, pues nada, todo funciona correctamente.
Aquí hay un tema también que se nos puede escapar y que es importante.
Vamos a verlo en la consola.
Aquí, cuando decimos si el elemento está haciendo intersección
y dice que esto pasa true, si ponemos aquí un console.log
y, bueno, en lugar de ponerlo aquí, vamos a ponerlo aquí.
Vamos a ponerlo aquí.
Es intersecting.
Vale.
Entonces, vamos a guardar los cambios.
Uy, no, esto va justo debajo, aquí.
Vale.
Entonces, bueno, puedes ver que se ejecuta un montón de veces, ¿vale?
Es normal, se ejecuta un montón de veces, bueno.
Entonces, yo voy bajando y, pues, se ha ejecutado aquí cinco veces.
Me ha dicho cinco veces el true, claro.
¿Por qué?
Porque esto está observando cualquier cambio.
Si yo sigo moviéndome, puedes ver que se va ejecutando y se va actualizando.
Entonces, aquí lo que tenemos, básicamente, es que no hemos parado de observar este elemento
y esto nos puede traer problemas.
No solo porque estamos actualizando el state cuando no es necesario,
porque aquí se está ejecutando otra vez el set show,
sino porque no lo necesitamos.
Así que aquí lo que tenemos que hacer es desconectar.
Es desconectar lo que estamos observando.
Entonces, había dicho que tenemos aquí el observer como segundo parámetro
y aquí lo que podemos decirle es que una vez que ya sabemos que ha hecho la intersección,
pues, nos desconectamos.
Le decimos, vale, desconectate.
De esta forma, ahora, vamos a poner el console.log aquí otra vez,
console.log, el isIntersecting, vale.
Vale, entonces, si volvemos aquí, vale, cuando es false es normal
porque sigue observando, ¿no?
Y va diciendo, vale, vale, es false, pero yo me voy a fijar
cuando esto exactamente pasa a ser true.
Entonces, si seguimos bajando, seguimos bajando, vale.
Este de true que lo ha hecho cinco veces, esto es porque lo ha hecho,
claro, el set show este es asíncrono y, por lo tanto, cuando esto se actualiza,
a lo mejor el disconnect este llega demasiado tarde.
Pero lo importante es que cuando subo y cuando vuelvo a bajar,
como puedes ver, pues, esto ya no lo está haciendo tantas veces, ¿no?
Ahora sí que no vemos que se ha quedado eso ahí, pues, dándole vueltas
y viendo si se está haciendo y tal.
Al menos así, de esta forma, pues, ya lo tenemos un poquito más controlado.
De la misma forma, el efecto puede devolver una función para desconectar las cosas
o limpiar eventos y todo esto.
Pues lo vamos a utilizar, lo que devolvemos en el efecto,
vamos a devolver una función para hacer esta desconexión también.
De forma que cuando este componente se deje de utilizar,
pues, ejecute este método y limpie también el evento.
Así, también evitaremos problemas que intente ejecutar este set show
cuando el componente este, pues, ya no está disponible,
que es un error bastante típico, dicho sea de paso.
Vale, vale.
Vamos a ver qué me contáis por aquí.
¿Lazy sirve para React Native?
Oye, pues, muy buena pregunta, porque no lo sé.
Me dice, ¿has probado en React Intersection Observer?
Sí, de hecho, ahora vamos a hacer un hook y quiero, me gustaría,
no me gusta explicar algo y utilizar algo mágico, ¿sabes?
Decir, ah, toma, aquí tienes un componente que te lo hace.
Quiero que sepáis y aprendáis lo que está pasando por detrás.
Claro que hay un montón de hooks y componentes que os hace esto
de Intersection Observer y os hace Lazy Load.
Pero creo que tenéis que saber lo que está pasando detrás
y creo que muchas veces incluso es mejor que hagáis el vuestro
si esa librería es muy grande o no se encaja con lo que necesitáis.
¿Vale?
Entonces, seguro que hay un montón de librerías para hacer esto,
pero en este caso yo os recomiendo que sepáis utilizar la plataforma,
no solo bibliotecas que hay por ahí.
¿Cuál sería la diferencia entre UseRef o CreateRef?
Bueno, el createRef es para los componentes que son clases, ¿vale?
En los de funciones puedes utilizar el hook, que es un poquito más cómodo.
¿Vale? ¿Qué más? ¿Qué más?
Ferdinand, uno es un...
Vale, ya estaban por ahí comentando.
Dice, en caso de que no tengamos, tengamos que dar soporte a Internet Explorer 11,
¿alguna alternativa a Intersection Observer?
Vale, yo, mi recomendación, y de hecho lo podríamos hacer rápidamente
si lo vemos necesario, de hecho, Intersection, Intersection Server...
A ver, esto es un momento.
El caso es que podéis utilizar un polyfill,
y es muy fácil hacer, utilizar el polyfill solo cuando sea necesario, ¿vale?
De hecho, igual es hacer un MPM install...
A ver, este, Intersection Observer, que este es como el polyfill oficial.
Vale, os enseño el...
Vale, este es, Intersection Observer, ¿no?
Pues esto es un polyfill.
Entonces, podéis instalar el polyfill.
Vamos aquí a nuestro proyecto, voy a poner aquí el MPM install,
lo instalamos.
Entonces, el polyfill es bastante chiquitito, no ocupa casi nada,
pero lo interesante de esto es que podéis hacer que el polyfill
se cargue solo cuando lo necesitáis.
Entonces, por ejemplo, podríamos hacer...
No lo quería complicar, pero bueno, podríamos hacer aquí un promise resolve.
Si esto no lo entendéis, no pasa nada, tampoco es muy importante, ¿vale?
Entonces, podríamos hacer...
Si tenemos soporte a Intersection Observer,
Intersection Observer, pues devolvemos Intersection Observer.
Y si no...
No sé si esto funcionaría así.
Vamos a probarlo.
¿Qué puede pasar?
¿Qué puede pasar?
Vale, ahora lo miramos y esto...
Esto, esto...
Voy a hacer esto un poquito más grande, ¿vale?
Pero esto es una forma fácil de hacer y utilizar esta funcionalidad.
Un polyfill básicamente lo que es, es una pequeña biblioteca que te da una funcionalidad
que le falta a tu navegador, ¿no?
Por ejemplo, en este caso, en Internet Explorer 11, pues no tiene soporte a Intersection Observer.
Lo que podemos decirle es, vale, no tienes soporte, pero yo te voy a proveer de ese soporte.
De esta forma, una forma fácil de hacer que esto funcione sería añadirlo aquí arriba.
O sea, podríamos decir, vale, pues importas el polyfill este aquí y ya está.
Lo malo de hacerlo así es que, claro, este Intersection Observer, de esta forma, se está cargando siempre,
independientemente si ya el navegador tiene soporte a Intersection Observer.
Entonces, lo que se puede hacer es evitar importarlo siempre.
Lo que puedes hacer aquí en el efecto es tener un Promise Resolve.
Esto ya es un poquito más avanzado, pero básicamente podemos importar la librería de forma dinámica
que detecte si realmente tiene soporte y si tiene soporte, pues que utilice el que tiene ya en el navegador
y si no, que lo importe dinámicamente y de esta forma solo se lo descargará cuando lo necesita.
Y de esta forma, pues le estamos dando bastante mejor performance a los usuarios que ya tienen soporte.
Entonces, lo que podríamos hacer aquí sería type of Intersection Observer.
Si es diferente a en Define, pues entonces utiliza Intersection Observer.
Y si no, importalo del polyfill.
Ahora, esto nos va a devolver, tendría que ver si esto nos devuelve Intersection Observer o si nos lo inyecta.
A ver, esto no, esto no sé si nos lo inyecta.
Bueno, da igual, vamos a ver.
Ahora, lo que estábamos haciendo aquí, todo esto que estábamos haciendo aquí, vale, pues lo podemos hacer aquí.
Ahora el problema es que nos dice que Observer no está definido.
Claro, entonces, vamos a poner aquí una constante que se llama letObserver y de esta forma aquí diremos Observer.
Así es, Observer.
Si tenemos Observer, pues lo desconectamos y esto ya no vamos a utilizar aquí una constante,
sino que utilizaremos la variable que habíamos puesto aquí fuera.
Vamos a ver si esto funciona.
Voy a guardar los cambios.
Vale, perfecto.
Entonces, lo que podemos ver, bueno, claro, no lo vamos a poder ver porque aquí lo soportamos,
pero voy a hacer esto en la Nick World, lo vamos a ver más claro.
A ver, hoy, hoy, hoy, hoy, le cuesta.
Vale, vale.
Imaginad que yo quito esto.
Quito estas dos líneas y dejo esto así y guardo los cambios.
Vamos a ver qué pasa.
Vale, lo que podemos ver aquí es que tenemos este chunk aquí, ¿no?
Que pone 2.chunk y que son 8.7k.
Si le damos aquí y vemos todo el código, puedes ver aquí que este es el intersection of server, ¿verdad?
Claro, porque estamos cargándolo ahora siempre.
Pero lo que hacemos de esta forma es, mira, magia potagia.
Si intersection of server no es undefined, utiliza el que tienes disponible.
Si no, lo que puedes hacer es importarlo de forma dinámica, de forma que utilices este que es del polyfill.
Y esto te lo inyectará y lo tendrás ya disponible y lo podrás utilizar como se está utilizando aquí.
Si ahora guardamos los cambios, veremos que este chunk, este 2.chunk va a desaparecer.
Porque este chunk, aquí podemos ver que es el de intersection of server, ¿vale?
Entonces, guardamos los cambios.
Y ahora ese 2 ha desaparecido.
Y de esta forma, los navegadores que tienen el soporte, pues nada, ya está.
Bueno, o sea que ya tenemos esto que es totalmente compatible con todos los navegadores.
Y además, lo que estamos logrando es darle la mejor experiencia a cada uno de los navegadores.
Pero esto no es todo. Esto no es todo. Vamos a hacer algo más.
Porque esto está bien, pero el tema...
Mira, dice Jonathan, excelente. Vale, perfecto.
Me dicen, Iván, Iván, ¿cómo haces que se te vea esto?
Esto así. ¿Cómo haces que se vea este igual?
Las ligaturas. Esto es una cosa que se llama ligaturas.
Esto es una cosa de la fuente.
Y la fuente que tengo es la Cascadia Code, que lo tiene disponible.
También tienes Fira Code, tienes un montón.
Vale. Entonces, alguien decía que era muy interesante, pero que ya había hooks que hacían esto.
Y es verdad, ya hay hooks que te hacen todo esto de la intersection of server y no tienes que saber nada de esto.
Pero ya que lo hemos hecho, pues lo mejor de todo es que esto lo podemos extraer a un hook.
Así que vamos a utilizar un hook que se llama Use Near Screen.
Y lo que vamos a hacer es crear un hook en base a lo que habíamos hecho aquí.
Así que vamos a ir pegando un poco las cosas que teníamos aquí.
Ahora, el estado este lo vamos a sacar.
Vale. Lo vamos a sacar de ahí.
Este efecto, que en realidad todo este efecto es que es todo para el intersection of server.
Todo esto, todo el efecto fuera.
Ya está. Esto lo dejamos aquí.
Y ahora, claro, nos dice el element ref is not defined.
Porque se lo vamos a pasar como propiedad del hook.
Ahora, este Use Near Screen lo vamos a utilizar aquí.
Y lo que vamos a hacer es pasarle el element ref.
Vale.
Y esto lo que nos debería decir es si estamos cerca Near Screen.
Si el elemento que le hemos pasado por parámetro, si realmente está cerca de la pantalla.
Pues ahora, en lugar de show, ponemos is Near Screen.
Vale. Voy a revisar un poquito el código.
Show. Vale.
Este show, este hook, tiene que devolver algo, ¿no?
Y hemos dicho que es el Is Near Screen.
Pues Is Near Screen.
Is Near Screen.
Vale.
O sea, que ahora ya esto lo tenemos como un hook.
Use Near Screen.
Y ya lo podemos utilizar en más de un sitio.
Aquí hay una cosa que no me gusta.
Y ahora a lo mejor lo arreglamos.
Voy a guardar los cambios.
A ver si funciona todo.
A ver si no he roto nada.
A ver.
A ver.
Vale.
Las tendencias, pues nada.
Ahí están.
Funcionan perfectamente.
Vamos a ver.
Sí, sí.
Funciona todo perfectamente.
Aquí tenemos la tendencia.
O sea, que todo funciona bien.
Lo que iba a hacer es que este use Near Screen, esto de pasarle la propiedad element ref,
igual lo podríamos hacer todavía más interesante.
Y hacer que esto devuelva un objeto, evitamos tener la referencia aquí y directamente que nos la devuelva.
Así el Is Near Screen lo que hacemos es que lo haga todo.
Y así lo simplificamos.
Ahora, nada de propiedades.
Element ref.
Este element ref es el que vamos a devolver aquí.
Devolvemos el Is Near Screen y el From Ref, que este From Ref es el que vamos a recuperar de aquí.
Y este From Ref es el que tenemos aquí.
Vale.
De esta forma.
Ahora el Use Near Screen nos devuelve un objeto con Is Near Screen y From Ref.
Ahora, así, de esta manera, ya tenemos un lazy load en un hook que lo podemos reutilizar tantas veces como queramos.
Y lo podemos un poquito también parametrizar.
O sea, podríamos poner distancia y que a la distancia, pues por defecto, sea 100 píxeles.
Y entonces este root margin, que tampoco se entiende muy bien, pues será la distancia.
Así ya sabremos que la distancia que le pasemos, por defecto, va a ser de 100 píxeles, pero lo podemos customizar.
Así que aquí le podríamos decir que la distancia, pues sea de 200 píxeles.
Entonces ahora en una distancia de 200 píxeles, de hecho podríamos ver, vamos a ver, si yo voy bajando, a ver, si pongo 500 píxeles, que es bastante.
A ver, 500 píxeles.
Refresco.
Y ahora al poco de bajar debería...
Sí, no, no, no.
Me ha ignorado vilmente, me ha ignorado vilmente esto.
La distancia, le he pasado aquí esto.
O igual es que no era el root margin, el que ahora ahí me ha dejado dudando.
Pensaba que era el root margin.
Voy a ver qué me comentáis mientras.
A ver.
Vamos a ver qué me comentáis.
¿Tienes un caudal de conocimiento?
Gracias por compartirlo.
Tampoco tanto, tampoco tanto, pero gracias Enrique.
La clase de hoy está muy chévere.
Gracias Miguel, gracias a ti.
Resolve es static.
¿Por qué promise.resolve y no new promise?
Buena pregunta, Daniel Esquinazi.
He utilizado promise.resolve porque lo único que queríamos era envolver un valor en una promesa.
Y esto lo hace de forma más sencilla, porque lo que queremos es resolver ese valor sí o sí.
De esta forma no tenemos que hacer un new promise, dentro pasarle a la función, queda un poquito más limpio.
Como lo único que necesitamos es hacer eso, pues...
¿Qué más?
Cuando se hace scroll hacia el div varias veces, vuelve a ejecutar la función nuevamente.
¿Qué función?
Puede ser, puede ser.
La verdad, esto es un lazy load muy rápido, pero seguramente se pueden hacer pequeñas mejoras para evitar que se carguen mucho.
Por ejemplo, se podría hacer un debounce para hacer que si es muy rápida la observación y te dan muchos datos,
pues solo tomar uno después de unos milisegundos y cosas así.
Vale, entonces, todo esto está muy bien en el near screen.
Sí, debería pasarse como...
Se lo estaba pasando, ¿no?
Use near screen.
He puesto distancia y debería, sí que debería, ¿no?
Distance, use near screen, ya que lo tenemos.
Distance, ay, ay, ay, ay, qué bueno.
¿Dónde lo he puesto?
Buah, menos mal, menos mal que alguien...
Sí, Mateo, distancia debería pasarse como parámetro en el near screen hook y se lo he puesto al use effect, que no sirve para nada.
Ay, madre mía, que menos mal que estáis atentos.
Un like para ti, un like.
Sí, sí, sí, tienes toda razón, estaba alucinando.
Es que esto que he puesto aquí, esto es en el efecto.
Eso no sirve para nada.
Había que pasárselo al hook, exactamente.
Aquí, ahí está.
Muchas gracias, menos mal que te he dado cuenta.
Son de estos errores tontos que uno no se entera, pero vale.
Pues ahora vamos a recargar.
Bueno, y claro, le he puesto una distancia tan grande que muy rápidamente se carga.
Ahora lo he arreglado con un poquito de scroll.
Ahora sí, con una distancia de 200 píxeles.
Aquí está.
Aunque no estoy ni cerca de las tendencias, todavía no han aparecido.
Aquí hemos hecho ya la carga, ya se ha cargado.
Muy bien, muchísimas gracias.
Ahí has estado muy atento y te llevas un midubi para ti.
Vale, he estado en el use effect.
Exacto, muy bien, perfecto.
Vamos a seguir.
Esto está bien.
Ya tenemos aquí el tema.
Bueno, vamos a arreglar este código un poquito.
Vamos a arreglarlo antes de que esto vamos a poner en el hook.
Vamos a poner la carpeta hooks.
Vale.
Y tenemos aquí use near screen.js.
Aquí esto lo movemos aquí.
Fuera.
Importamos todo lo que necesitamos, que en este caso pues era use effect y use state y use ref.
Y esto from react.
Y hacemos un export default de esto.
Perfecto.
Ya tenemos un hook nuevo que podemos utilizar en más de un sitio.
Así que aquí, vale.
Vamos a poner esto mucho más bonito.
Es que me encanta.
Me encanta esto porque me encanta el tema este de evitar tener los impos relativos.
porque al final se te mezcla un jaleo de punto, punto, barra, punto, punto, barra y a mí, pues no sé, me parece mucho más limpio.
Por ejemplo, en este components, en la categoría, esta línea de aquí, esto funcionaría bien así.
Pero pierdes como un poco de semántica, ¿no?
Y creo que si lo ponemos así, aunque pudiera hacer eso, pues decir, no, componen category.
Pues esto te puede ayudar un poco a ordenarlos y tenerlo más claro.
Y ves rápidamente los impos.
Vale.
Guardamos los cambios a ver si todo va bien.
Vale.
Esto funciona perfectamente.
Vale.
Entonces, esto que hemos hecho está bien, pero lo que hace como tal es evitar hacer la llamada de la red.
Aquí es donde entra el concepto de suspense y React Lazy, que nos va a permitir no solo evitarnos la llamada de la red,
sino cargar el JavaScript solo cuando lo necesitamos.
Vamos a separar de todo el JavaScript que cargamos esa parte que todavía no la necesitamos, la vamos a separar
y utilizando React Lazy le vamos a decir a React, mira, esto lo tienes que cargar solo cuando sea visible.
Y entonces dirá, ah, vale, cuando lo necesito me lo descargo.
Y entonces hará la llamada de la red.
Entonces, no solo nos vamos a evitar la llamada de la red, sino que nos vamos a evitar descargar todo el JavaScript.
Vamos a ver cómo lo podemos hacer.
Hemos movido el UREF, ya tenemos el hook.
Vale.
Lo que tenemos que hacer primero es cargar esto solo cuando lo necesitamos.
Para eso vamos a separarlo en otro componente, en otro fichero, que le vamos a llamar Trending Searches,
que es como se llama, total.
Entonces, lo que teníamos aquí, esta función de aquí, esto, lo vamos a pasar aquí, al Trending Searches.
Y además de esto, lo podría haber cortado.
Vale.
Cuando lo borro, pues ya me dice, oye, que sepas que nada de esto lo estás utilizando en este archivo.
Vale, pues perfecto.
Así que nos podemos cargar esto.
Bueno, todo esto, estas tres líneas que son las que no utilizamos, es porque las utilizamos aquí.
Así que las importamos y ya está.
Y hacemos un export default del Trending Searches.
Guardamos los cambios.
Y esto ya no lo necesitamos.
Nada de esto.
React sí.
Hasta aquí.
Vale.
Entonces, hemos separado el Trending Searches Index, es el que va a devolver el Lazy Trending.
Este componente que va a hacer todo el tema de Lazy Load y todo esto.
Y luego, un fichero llamado Trending Searches, que es el que hace la llamada, el que muestra las categorías,
importa categorías, importa el servicio de que tendrán Trending Terms y todo esto.
Vale.
Entonces, lo estamos separando en dos ficheros distintos.
Ahora, lo que aquí nos está diciendo, oye, Trending Searches no está definido.
Claro, lo tendríamos que importar, ¿no?
Aquí tendríamos que hacer import Trending Searches from Trending Searches.
Vale.
Pero esto no es lo que queremos.
No queremos esto porque, como hemos visto antes en Intersection Observer, lo que va a pasar con esto es que se va a cargar siempre.
Aunque no lo estemos utilizando, se va a descargar ese JavaScript en nuestro navegador.
Y eso es lo que queremos evitar.
Un buchito de agua para seguir.
¡Ay! Patrocinado por H2O.
Vale.
Entonces, ¿cómo podemos lograr eso?
¿Cómo podemos evitar importarlo siempre?
Vale.
Pues vamos a utilizar el React Lazy.
Vamos a utilizar una constante y le llamamos Trending Searches.
¿Cómo sería el componente?
¿Cómo se llamaría?
¿Vale?
Ahora hacemos React Lazy.
Aquí es React.Lazy y aquí dentro, Lazy, le tenemos que pasar una función que devuelva el import dinámico del componente que queremos utilizar.
¿Vale?
O sea, tenemos que devolver aquí una función y aquí tiene que devolver el import dinámico.
Import.
Y el import dinámico, cuando es dinámico es que es como una función el import, ¿vale?
Que es asíncrono y devuelve una promesa.
Cuando es como las dos primeras líneas, no es asíncrono y entonces se descarga todo junto.
Así que este import dinámico, que va a ser totalmente asíncrono, lo que va a hacer es descargarse solo cuando React te diga,
diga, vale, ahora necesita descargarse.
Y luego veremos cómo lo hace, cómo hace esa distinción, cómo lo detecta, ¿vale?
Vamos a decirle cuál es el path. En este caso, punto, barra, Trending Searches.
Vamos a decirle que en el componente Trending Searches queremos cargar de forma lazy, de forma solo cuando lo necesitemos,
no que lo descargue a saco, sino solo cuando lo vayamos a necesitar, el Trending Searches.
Entonces, ahora guardamos los cambios y parece que todo ha ido bien, parece que todo funciona.
Si yo voy hacia abajo, vamos a ver qué pasa con el Trending Searches.
Vamos a descargar, vamos a hacer scroll.
¡Hala! Ha reventado todo.
Vale, voy a quitar esto.
Leyendo el error, ya nos lo dice, ¿no?
Nos dice que un componente de React cuando está suspendido necesita estar envuelto por este componente suspense
y hay que darle un fallback.
Vale, entonces, ¿qué es esto de un componente suspendido?
Bueno, este Trending Searches lo que pasa es que en realidad tiene una promesa.
Entonces, React ha intentado renderizar este componente que en realidad era una promesa y ha dicho,
perdón, o sea, yo no soy capaz de renderizar esto.
Y por lo que veo, no tengo este componente suspense que me está indicando qué debería renderizar
mientras cargo este componente.
Como no tengo nada, pues he reventado.
Entonces, lo único que debemos hacer es envolver nuestra aplicación
o cualquier punto de nuestra aplicación con este componente suspense.
Nosotros lo vamos a hacer bien cerquita de donde lo estamos utilizando,
pero en realidad podríamos envolver cualquier punto que esté envolviendo este Trending Searches
para decirle que los componentes que tienen esta promesa debieran renderizar algo en concreto.
Ahora lo vamos a ver.
Este suspense lo vamos a importar de React.
Suspense.
Y esto que es un componente lo vamos a utilizar aquí.
Suspense.
Y es lo que va a envolver esto.
Ahora, falta todavía una cosa y es el fallback.
Por ahora, vamos a hacerlo fácil y vamos a hacer que el fallback renderice nul.
No renderice nada.
Así que vamos a ver si ahora bajando, pues nada, ya está, ya funciona.
Ya está, ya nos podemos ir.
Vale, funciona perfectamente, pero ¿qué es lo que has hecho, Miguel?
¿Y qué ha pasado aquí?
¿Qué ha pasado?
Enséñame esto bien.
Vamos a ver.
Vamos a abrir las herramientas de desarrollo.
One more time.
Vale.
Y vamos a darle aquí al refrescar, vamos a subir esto y vamos a mirar solo los JavaScripts, los scripts que se están cargando.
Estos son los JavaScripts que se están cargando para nuestra aplicación.
Ahora, si limpio esto, ahora se supone que no hay nada en la Nick World, está toda limpia.
Voy a ir bajando a ver qué pasa, voy a ir bajando, voy a ir bajando.
Y cuando bajo lo suficiente, podemos ver que se ha descargado un JavaScript.
Si miramos este JavaScript, podremos ver que este JavaScript tiene todo el JavaScript necesario para hacer que nuestro componente trending searches funcione.
Por lo tanto, es como que de todo lo que he cargado en nuestra aplicación, hemos separado un cacho a un lado y ese cacho solo lo cargamos cuando lo necesitamos.
Y el cacho ese que hemos separado es el que vemos aquí, el que hemos puesto aquí, import.
Por lo tanto, todos los imports que se hacen dentro de ese cacho, todos esos imports solo se van a cargar también cuando necesitamos lo que tenemos en el trending searches.
Aquí lo podéis ver más claro.
¿Veis? Category, que es uno que estamos importando aquí, pues aquí tenemos el category.
Lo del get trending terms, pues si buscamos, lo buscamos aquí.
Ahí.
Get trending terms, aquí tenemos el componente de trending searches.
Aquí tendríamos el servicio.
Aquí tenemos todo el JavaScript separado.
Así, de esta forma, podemos cargar solo lo que el usuario necesita.
Lo cual me parece bastante interesante y bastante cómodo.
Para esto tenemos suspense.
¿Qué podríamos hacer?
Y puede ser interesante.
Lo bueno de suspense, aquí en el...
¿Dónde lo he dejado?
Aquí, vale.
Es que tiene un fallback.
Aquí podríamos poner, por ejemplo, una frase.
Podríamos poner...
Estoy cargando.
Estoy cargando.
Vamos a hacer que esto sea lo suficiente...
La distancia sea muy chiquitita para que lleguemos a ver...
Estoy cargando, aunque va a ir bastante rápido.
Pero bueno, vamos a intentarlo.
A ver...
Nada, demasiado rápido.
Está todo cacheado.
Bueno, vamos a ver.
Voy a hacer esto y voy a poner la Nick World cuando termine todo.
Slow 3G.
A ver si de esta forma somos capaces de ver el...
Estoy cargando.
Vale, aquí lo podéis ver.
Estoy cargando.
Vale.
Y ahora ya se ve las tendencias.
Las tendencias todavía tardan también porque, bueno, para que se renderice, pero ahí lo tenemos.
Entonces, ya hemos visto una forma de hacer...
Claro, cuando tenemos una conexión rápida, como has visto, no te das cuenta.
Pero cuando tienes conexiones lentas, estás en móvil y es tan importante la experiencia del usuario,
lo que hay que hacer es evitar cargar cualquier cosa que no sea crítica para el usuario, cualquier cosa que no necesite.
Y esto, pues, sería un ejemplo.
Entonces, para simplificar un poco el estoy cargando y todo esto, lo que podemos hacer es que aquí, como fallback, pues, tenga el spinner este que teníamos.
Habría que solucionar un poco los estilos y os dejo esos deberes para vosotros.
Pero de esta forma, si en algún momento vemos el que está cargando, pues, veremos el spinner.
Además, es interesante porque podemos hacer también que el isNearScreen, si es false, pues, también muestre ese spinner.
De esta forma, pues, nos aseguramos que siempre se va a mostrar, no va a haber un salto.
Y, bueno, pues, es algo chiquitito que se renderiza, que va a estar ahí y en cuanto estemos cerca, pues, se renderiza todo.
Así que ahí tenemos ya nuestro LazyLoad y también utilizar Suspense.
Lo que os comentaba, esto de Suspense, que lo tenemos aquí, en realidad lo podríamos poner en cualquier punto de nuestro árbol.
Esto lo podríamos poner en nuestra aplicación, pero yo, podemos tener uno, pero yo recomiendo que no lo hagáis así.
Uy, esto es pepito, dejé pepito. Para los que visteis esto, bueno, ahí se queda pepito.
Bueno, pues, este Suspense lo podríamos llegar a poner aquí.
Podríamos poner aquí el Suspense que envuelva toda nuestra aplicación de forma que en cualquier componente suspendido que hayamos utilizado con React Lazy, pues, utilice esa forma, ¿vale?
Pero, bueno, yo os recomiendo que tengáis este control más granular y, además, el fallback tenga sentido, ¿no?
Que no tengáis un fallback genérico, sino que cada fallback tenga sentido.
De hecho, se pueden utilizar fallbacks muy interesantes.
Os voy a enseñar, por ejemplo, React, SVG, Playholder.
Sí, a ver si se encuentra alguno, pero hay unos que son muy bonitos, que son estos, que puedes utilizar un componente que se asemeja al componente que va a cargar,
que lo utiliza Facebook, lo utiliza LinkedIn, lo utiliza Twitter y están muy guays y son muy fáciles de utilizar.
En realidad son SVGs, son muy chiquititos, no ocupan casi nada y te ayuda como a darle esa sensación al usuario de que, oye, que esto está cargando, que va por faena.
Hay un montón, ¿eh? Hay diferentes, aquí tenéis uno que, además, es un editor online que está muy chulo.
Mira, se puede mover, ¿eh? Y está muy, muy, muy chulo este, ¿eh? Muy bonito.
Tenéis aquí diferentes ejemplos. Está muy bien, está muy bien.
De verdad, creo, esto es lo que podéis utilizar como fallback y va a quedar, vamos, para lamerlo va a quedar.
Así que ya sabéis, ahí tenemos, ya tenemos, eso, paginación y, hay paginación, no, paginación es a lo que vamos.
Ya tenemos suspense y lazy load. Ahora vamos a por la paginación.
Y voy a ver qué me estáis comentando aquí en el chat.
Vale, no diría, eh, eh, eh, vale.
Hola, pregunta general.
Class components, ¿aún lo utilizas o todo se maneja con functional components?
Si tenéis que escribir ahora componentes de React, mi recomendación es que lo hagáis todo con functional components, ¿vale?
Si tenéis componentes con clase, no hace falta que los mováis, a no ser que estéis muy ociosos o ociosas, ¿vale?
No hace falta.
Fallback recibe un componente.
No tiene por qué recibir un componente.
No es un componente.
Tiene que recibir cualquier cosa que sea renderizable.
Un string, un null, un número, puede recibir un array, no es recomendable, pero también un elemento.
Entonces, podéis pasarle un elemento, no un componente.
Sería un elemento.
La diferencia entre un elemento y un componente es importante.
Os la explico rápidamente.
Esto, este fallback, esto, este spinner, esto sería un elemento, ¿no?
Aquí se lo estamos pasando como elemento.
En cambio, esto, esto es un componente, ¿vale?
La function spinner es el componente y cuando lo utilizamos es un elemento.
Porque ya está, esto sería un createElement y tal.
O sea, esto es el elemento.
Porque elementos, digamos que elementos puede tener muchos, que es verdad que a veces hablamos de componentes como si fuesen elementos y yo también lo hago un montón, ¿eh?
No pasa nada.
No os preocupéis.
No es que sea una bronca, sino lo digo para que sepáis bien la nomenclatura correcta.
Bueno, yo también muchas veces digo, se le pasa un componente, cargo este componente y la...
Bueno, no pasa nada.
Pero en este caso, fallback recibiría cualquier tipo de cosa renderizable.
O un nodo de React, que puede ser un string o lo que sea, ¿vale?
A ver, ¿qué más comentáis por aquí?
¿Podrías ponerle el típico gif de carga?
Sí, claro, cualquier típico gif de carga o, bueno, lo que hemos visto, ¿no?
Playholders que se podrían hacer.
A ver, Christopher dice, ¿no se podría poner is near screen?
Claro, a ver si él dice, os lo voy a pegar y os lo enseño.
Comenta algo así, ¿no se podría hacer esto?
Bueno, he pegado demasiado, ¿vale?
Pero comenta de hacer esto.
Claro, esto sí que funcionaría.
Esto que comenta, si podríamos poner este suspense, lo podríamos llegar a poner aquí dentro.
O sea, en lugar de que envuelva todo.
Lo he hecho más que nada por un tema elegible.
Pero sí, esto lo podríamos poner aquí.
Lo importante es que el componente suspendido esté envuelto.
Así que sí, podríamos hacer esto.
Sin necesidad de este.
Sin necesidad de este.
Pero bueno, lo que digo, es un poquito más difícil de leer.
Pero bueno, funcionar, pues funciona.
Vamos a ver, así.
Y esto así.
Es un poquito más difícil de leer.
Yo os recomendaría también, tampoco hay que volverse loco de que sea justamente envuelva el componente que estamos dejando suspendido, ¿vale?
Pero bueno, sí, podría funcionar, ¿vale?
Pero en este caso, como se leía mejor el otro, he ido directamente al otro.
Pero para que lo sepáis, que creo que es interesante.
¿Qué más, qué más?
Se me comentan por aquí.
No sé si lo respondiste porque llegué algo tarde al live.
No pasa nada.
Ha llegado ahora.
Si se está observando varios elementos, ¿puedes desconectar su elemento que ya pasó a ser observado?
¡Qué buena pregunta, Jesús!
¡Qué buena pregunta!
Bueno, eso no lo vamos a ver hoy porque si no, hoy no me iría a comer seguramente.
Y alguien en mi casa me asesinaría.
Pero igual lo podemos ver en otro.
Pero sí, se podría hacer.
De hecho, en lugar de hacer un observer.disconnect, esto que hacemos aquí, lo que podríamos hacer es un observer.unobserve.
Es como dejar de observar, ¿no?
Y podríamos decir, este elemento, deja de observarlo.
Y ya está.
Esto es una cosa que podría funcionar.
En nuestro ejemplo funcionaría sin ningún tipo de problema y funcionaría igual.
Y está muy bien porque esto te deja reutilizar el mismo observador, ¿no?
El intersection of server, uno para un montón de elementos.
Y solo los elementos que te interesa harías una cosa u otra.
Pero bueno, en nuestro ejemplo, por un tema de simplicidad, pues lo hemos puesto así.
Vale.
Fernando Galende dice, function versus arrow function.
¿Usas function por un motivo para los componentes en lugar de arrow function?
Vale.
Esto es una pregunta que me hacen un montón.
A ver, a mí me gusta mucho la léxica del function, de utilizar function.
Entonces, como veis, a veces uso function y otras utilizo arrow function.
En estos casos, en concreto, no lo hago por nada.
Lo hago, no tiene ningún otro sentido, sino que es un tema de legibilidad que a mí me gusta.
Pero bueno, independientemente, hay veces que aquí, pues hago así y ya está.
Pero en los componentes, esto es un tema mío personal, ¿vale?
En los componentes a mí me gusta utilizar function.
Creo que queda más legible y no queda tanto con la const y tal.
Así, de esta forma, yo soy capaz de ver de arriba a abajo, ¿no?
Más fácilmente digo, vale, pues esta es la línea de la función y aquí ya veo el primer const.
De la otra forma, queda un poco la const.
A ver, es una tontería como un templo.
Así que si os gusta más function o arrow function, sed libres y hacerlo como queráis en este caso.
Pero bueno, ya sabéis por qué lo hago yo.
Según cómo lo vea más legible, hago uno u otro.
Yo, ¿qué más?
¿Sabes?
¿Subes esto a algún repositorio?
Sí, lo he comentado al principio y lo tendréis en la descripción del vídeo.
Si no, buscadme en GitHub como midudev y me seguís y le dais like y veis mis repositorios.
Y uno de ellos es el de React Live Coding, que tenéis enlace a todos los vídeos y a todo el código que se está haciendo, ¿vale?
Y acordaos de darle like y suscribiros a este canal, por supuesto.
No os olvidéis.
Bueno, yo creo que ya podemos ir a por la paginación, que es lo último.
Al final no nos va a dar tiempo al Infinity Scroll, pero bueno, pues lo dejamos para la siguiente clase, que tampoco pasa nada.
Esto va a ser fácil.
Tampoco nos vamos a liar, pero bueno, nada que lo pienso puede tener un poquito de cosa.
Bueno, yo hablando aquí en posalta.
A ver, a ver, a ver.
Voy a cerrar.
He cerrado todo porque si no, no me entero.
Vale.
Vamos a ver.
¿Por dónde empezamos esto?
Teníamos un hook que era el de Use GIF.
Vamos a hacer una búsqueda, por ejemplo esta de Matrix.
Ueh, qué bonito.
Vamos a hacerlo ahora sencillo, que es añadir un botón al final para recargar la siguiente página.
Quería hacer un Infinity Scroll, pero hay unas cuantas referencias y temas importantes que hay que explicar.
Lo dejaremos para la siguiente Live.
Por ahora vamos a enfocarnos a tener la paginación.
Si quieres que pase el siguiente Live, ya sabes, like y compartirlo y dejar comentarios, que guay todo y cómo me ha gustado.
Y lo comparto con toda mi familia, mis amigos, mi perro y mi gato, por supuesto, también me encanta React.
Vale.
Entonces, teníamos este hook que nos permitía cargar los GIF que teníamos y todo esto.
Vale.
Estoy pensando mientras lo voy explicando.
Entonces, lo que vamos a hacer es tener aquí otro estado que le vamos a llamar Page.
Y Use State y el Page por ahora, vamos a empezar con cero.
Y esto va a ser el Initial Page, que empezamos con cero y lo pasamos aquí.
Vale.
Muy bien.
Bueno, antes de continuar con esto, vamos a poner el botón para que se vea aquí que tenemos un botón para la siguiente.
Así que vamos a las páginas, Search Results.
Aquí es donde, en el Search Results, justamente es donde estamos utilizando el hook de Loading y GIF.
O sea, estamos recuperando si estaba cargando y si teníamos un resultado con GIF.
Y lo que podemos hacer aquí es añadirle ese botón que hemos dicho.
Vamos a poner el botón Get Next Page.
Y aquí cuando hagamos un clic, Handle Next Page.
Y esto, vamos a crear aquí la función, que por ahora no va a hacer nada.
Guardamos los cambios.
Y ahí tenemos el botón.
Bueno, este botón lo voy a separar un poquito muy mal, ¿eh?
Solo para que, bueno, más o menos, más o menos.
Además habría que arreglarle el borde de Radius, porque creo que es el del buscador de arriba.
El caso es que ahí está nuestro botón.
Bueno, botón y, bueno, se aceptan PRs, así que luego podéis seguir trabajando en ello.
Vale, tenemos el botón para tomar la siguiente página.
Lo vamos a hacer con el hook y, por lo tanto, va a salir un poquito especial.
No va a ser tan fácil como, ah, bueno, llamo un método y ya está.
No, si no, vamos a hacerlo en el hook para que sirva para todo.
Tenemos este Set Page que empieza con la página cero.
Vamos a crear otro efecto de forma que cuando la página cambie, este efecto se ejecutará cada vez que la página cambie.
Y la página cambiará llamando al Set Page.
Así que vamos a sacar para afuera este Set Page.
Ahora, la primera vez cuando la página es igual a Initial Page no debería hacer nada.
Y tampoco debería hacer nada cuando esté cargando.
Si estamos cargando, este efecto no debería funcionar.
No debería hacer nada.
Vale, si no está cargando, bueno, vamos a quitarlo del loading por ahora porque no lo puedo complicar.
Pero luego miramos y nos da problemas y si da problemas lo añadimos.
Vale, entonces, aquí estábamos llamando el servicio Get Give que le pasamos la Keyword y esto nos recuperaba los Give.
Vamos a ir al servicio y lo vamos a maquillar un poquito.
Ahora, aquí teníamos, voy a hacer esto un poco más grande, teníamos el Limit Keyword, pues ahora vamos a añadirle también Page.
Y Page, por defecto, que sea cero.
Bueno, la API URL esta que estamos creando, vamos a hacer que sea un Let y veo que aquí he estado utilizando ya el Offset.
Vale, vale, pues podemos hacer que sea una constante.
Bueno, no me suele gustar programar así, pero bueno, lo vamos a hacer aquí, así.
En Offset, para el que no sepa, Offset es básicamente cuántos resultados me tengo que saltar de los resultados que te voy a devolver.
Y así es como se hace la paginación, ¿no? Te devuelve 25 y para ir a la página 2, pues tendrías que hacer un Offset de saltarte a dos páginas primeras.
Si tienes 25 resultados por cada página, pues tendrías que saltarte 50 resultados.
Así es como estarías haciendo básicamente paginación.
Así que en el Offset ST, ¿cómo lo calculamos?
Nosotros multiplicamos la página por el límite, que el límite es el número de resultados que nos va a devolver.
De esta forma, cuando estamos en página cero, no nos saltamos ninguno.
La página cero es la página inicial, en página cero no nos saltamos ninguno, nos devolvemos 25 primeros.
Cuando la página sea 1, bueno, cuando lo pongamos aquí, no, cuando lo pasamos como parámetro, el 1,
1 por 25, pues saltará los 25 primeros.
Bueno, esto es lo que tiene.
Creo que tampoco debíamos, ya está, ¿no?
No tenemos que hacer nada más aquí.
Vale, entonces, aquí en este efecto, ahora que tenemos esto, pues teníamos el Keyword,
le tenemos que pasar la Keyword que era con la que buscábamos.
Esto, esto lo vamos a tener que mover.
Esto que tenemos aquí, lo vamos a mover aquí, si no hay problema, que creo que no.
Vale, y este Keyword to Use es el mismo que vamos a utilizar al hacer la búsqueda.
Y ahora le pasamos la página, la página que viene del estado, ¿vale?
Que tenemos aquí en el estado.
Y una vez que tengamos esto, pues tendremos los GIFs, vamos a llamarle Next GIFs, Next GIFs.
Y aquí dentro, pues deberíamos ver qué hacemos.
Ah, bueno, mira, aquí me ha comentado que le falta ahora la dependencia del Keyword.
Este, dice, claro, este Keyword ahora es este y este.
Es algo que está fuera del efecto y que si cambia ese valor, pues ¿qué pasa?
Claro, no tiene sentido.
Entonces, cuando guardamos los cambios, ya nos lo arregla y nos lo pone aquí como una dependencia.
Pero esta ahora sobra.
Ah, no, porque lo estamos utilizando aquí.
Vale, vale, vale, pues ya está.
Entonces, ahora que tenemos los siguientes GIFs, ¿qué es lo que tenemos que hacer aquí?
Pues tenemos que llamar a setGIF y aquí podemos utilizar en el state, no sé si esto lo expliqué,
se puede actualizar utilizando un método, una función.
Le puedes pasar a setGIF, a cualquier setState, le puedes pasar una función
y esta función, pues te devuelve como parámetro el estado anterior.
Así que aquí hacemos un prepGIFs.
Vamos a hacer que, y lo que tiene que devolver la función es el nuevo valor del estado.
Así que vamos a concatenar.
Vamos a decir que vamos a tener los anteriores y los nuevos.
Sí, vale.
Pues esto debería funcionar aquí bien.
Podríamos hacer aquí otro estado.
Este loading no lo vamos a tocar, vamos a hacer un loading nextPage para tener dos estados separados,
uno para el primero y otro para las paginaciones.
Esto nos puede ayudar a tener una granularidad sobre lo que queremos hacer.
No es lo mismo cargar el primero que el de la siguiente página.
Y el setPage, el setPage que tenemos aquí.
Este setLoadingNextPage, esto lo podemos poner aquí.
Al principio sería false.
Y aquí, una vez que tengamos los resultados...
Ay, perdón, perdón. Esto es al revés.
Antes de hacer la llamada se pone a cargar y cuando estemos aquí ya hemos terminado.
Vale, guardamos los cambios y esto nos debe dar el loading, loading nextPage, gif y setPage.
Este setPage es el que vamos a tener que llamar aquí.
Porque esto ahora, este botón no funciona.
Así que aquí en el handle nextPage, aquí, ahora recuperamos este setPage.
De forma que cuando hacemos el handle nextPage, cuando llamamos en un clic al handle nextPage, que esto...
Vamos a ver, guardamos los cambios.
¿Ves? Aquí tenemos este callback.
Pues aquí vamos a llamar al setPage.
Y aquí vamos a utilizar la misma técnica que utilizamos aquí.
De utilizar el estado, actualizar el estado con una función.
Esto de actualizar el estado con una función es muy interesante y muy importante para evitar mutaciones o evitar a veces raceConditions.
Y en este caso nos va a ayudar porque, ¿qué pasa?
Que aquí en el setPage no sabemos cuál es la currentPage.
¿Cuál es? No la sabemos.
La podríamos pasar, la podríamos devolver aquí.
O sea, podríamos en este hook, aquí podríamos decirle, vale, vos envía el page.
Pero, bueno, me parece interesante que aquí, pues, directamente, digamos, bueno, pues, prepPage, el nuevo valor va a ser, pues, la página anterior más uno.
De hecho, al principio esto sea cero más uno, pues, pasará a ser uno.
Esto debería actualizar el estado y ya debería estar.
Vamos a guardar los cambios y vamos a ver aquí.
¡Uy!
Vale, vale, vale.
Funcionado, funcionado.
Ha funcionado.
Bueno, de hecho, vamos a abrir las herramientas de desarrollo para que vayamos viendo un poco cómo funciona esto.
Vale, lo guardamos aquí.
Y le doy a get nextPage.
Bueno, ha cargado un montón de cosas, pero este es el que no interesa.
Vamos a ver, vamos a ver.
Esto se ve muy chiquitito.
Vamos a ver.
Offset 50, vale.
Eso será la página 2.
Ya le damos otra vez.
Ha cargado otra vez.
75.
O sea, que ya está.
Ya tenemos aquí una paginación.
Ya estamos paginando.
Ya está.
Tenemos aquí páginas y páginas.
No queda muy...
Queda un poco rara la paginación.
No sé...
Alguien se puede estar preguntando, bueno, pero ¿por qué no se empuja hacia abajo?
Y ya está.
Es por el tema de las columnas el cómo está hecho.
¿Vale?
Igual deberíamos arreglarlo.
Entonces, cuando se añaden nuevos elementos, se está añadiendo en la tercera columna.
Porque es como la última columna.
Pero lo importante es que estamos haciendo la paginación y estamos haciendo nuevo contenido.
De hecho, puedes ver que el scroll ahora es enorme.
Así que con esto tendríamos la paginación bastante arreglada.
Vamos a ver, ¿qué me comentáis?
¿Qué me comentáis?
Es que Miguel da muy buenas ideas.
Vaya, muchas gracias.
Muchas gracias.
Edgar Daniel Mogollón.
Bueno, me gusta tu comentario mogollón.
Dios, me van a meter en la cárcel por esto.
Vale, pues con esto...
Pero he aprendido más por mi cuenta que en la uni.
Sí, bueno, estas cosas suelen pasar, ¿eh?
Pero bueno, a mí me ayudó la universidad para aprender a aprender.
Eso tengo que decirlo, que me ayudó bastante.
Aprender a aprender.
Pues hemos visto Lazy Load, Suspense y con esto Paginación.
Queda pendiente Infinity Scroll.
Lo vamos a ver en el siguiente live.
Creo que está bastante bien como está quedando la aplicación.
De nuevo, me gustaría agradecerle.
Voy a buscar el nombre un momento de la persona que nos hizo esta maravillosa contribución
y ayudó a dejar más bonita la aplicación.
Me parece increíble cómo va tomando forma una aplicación que yo pensaba al principio que era una chorrada.
Ferdinand Alexa.
O no sé si es Ferdinand...
Bueno, claro, como sabe todo junto, voy a entrar a su...
Fernando Alejandro Llerena Ramos.
Ese es, ese es.
Le encanta el desarrollo web y es de Nuevo León, de México.
Pues nada, muchísimas gracias, Fernando.
Te agradezco un montón que hayas contribuido.
Os lo, mira, os enseño ahí el...
Este es el nombre.
El nombre feliz, feliz, por supuesto, de haber contribuido.
Así que muy bien, ¿eh?
Muchísimas gracias.
Entonces, flex column...
No, es que ahora está utilizando columnas de otro tipo de columnas, ¿eh?
No es, no es, son flex y ya está.
Mira.
Ah, lo que lo vamos a arreglar.
En el siguiente live esto lo arreglamos también.
Vamos a arreglarlo todo.
El tema de las categorías es que utilizamos un truco almendruco este...
Ah, no, categorías no.
En el GIF, no, list of GIF.
Esto es porque al principio utilizamos el column count este, que está bastante interesante.
Lo que pasa es que, claro, no está pensado para esto.
Quedaba bien, pero ahora se nos ha quedado corto.
Igual el siguiente live, pues, lo arreglamos fácilmente.
Bueno, si os ha gustado, si queréis que siga haciendo de estas cosas, like y suscribíos.
Sobre todo suscribíos, que hay que llegar a los 10.000.
Creo que vamos por 6.200.
Nada, son los que nos quedan 4.800.
Te necesito, necesito tu ayuda para llegar a los 10.000.
Porque cuando lleguemos a 10.000, no sé qué va a pasar, pero supongo que algo bueno ocurrirá.
Así que, ya sabes, darle cariño.
¿Qué más? ¿Qué más?
Pues nada, voy a ir saludando a todos los que os habéis quedado por aquí.
Oscar Fuentes me dice, haz un live de Formic.
Vale, pues intentaré hacer uno de Formic.
No la semana que viene, pero más adelante.
Ferdinand, Alexa, mira, está aquí.
Está aquí, gracias a ti por cada clase.
Yo encantado de ayudar con lo que pueda.
Muy bien, muy bien.
Nicola Santi, gracias Máquina, como siempre un placer.
Alexander, estaba prestando atención y suspendí.
¿Cómo que suspendiste?
Con suspense, suspendiste.
Bueno, hay gente aquí incluso que es del Barça.
Muy bien.
Vamos a ver que la gente teníamos aquí.
Vamos a ver que la gente teníamos aquí.
Alexander Rodríguez, Ángel Esquinazi, Oscar Fuentes, Jonathan David, Héctor Méndez, José Barrios, Fernando Galende.
Bueno, muchas gracias a todos.
Muchas gracias a todos los que os habéis conectado un ratito.
Ya sabéis, me podéis encontrar en Twitter, me podéis encontrar en YouTube, seguro, en Instagram y en Facebook.
Me podéis seguir por ahí para que estéis súper informados de todo.
Por favor, si le vais dando likes a todos mis vídeos, pues yo lo agradezco de corazón, que me ayudan un montón.
Y si le empezáis a hablar a vuestros compañeros de clase de que hay un canal súper chulo, a vuestros colegas del trabajo, a todo esto.
Hay un chico ahí de España que es muy majo, que es de Barcelona y que hace cosas, que hizo el curso este de Platzi, de Arriaga Avanzado.
Pues bueno, le vais vendiendo, si soy muy majo, una vez que entra ya, lo tenemos aquí, le bajamos al ala y vamos, es que le va a encantar.
Gente de Ecuador, Francisco Palacios, gracias a todos, gracias por todo, a ti máquina, gracias David.
José Gutiérrez dice que me conoce por Platzi.
Pues nada, muchísimas... sí, mi bolsillo, Jonathan.
Hasta la otra semana. Muchas gracias a todos, nos vemos la semana que viene.
Muchas gracias por estar ahí, muchas gracias y espero que os haya gustado.
y espero que os lo hayáis pasado tan bien como yo.
Ya sabéis, cuidado mucho y seguidándole al frontend, por supuesto, aquí, en mi duvete.
Hasta luego. Adiós, adiós, adiós, adiós.