La clase de hoy va a ser un poquito sobre hacer custom hooks, ¿vale?
Y intentar, vamos a ver si llegamos, espero que sí,
intentar utilizar el contexto para tener como una especie de estado global en nuestra aplicación.
Una especie. No es tan potente como lo puede ser Redux,
pero creo que muchas veces puede estar bastante bien para hacer cosas sencillas.
Entonces, vamos a ver un poquito más de custom hooks.
Esto nos va a dar la oportunidad de ver más sobre hooks en general,
porque tendremos que utilizar algún hook que no hemos visto todavía
y seguiremos con nuestra aplicación del buscador de GIF.
Si ahora estás tu primera vez y estás así un poco,
¡Uy! ¿Pero esto por qué empieza aquí?
Bueno, pues tengo ahí unos cuantos vídeos en mi canal, entra a mi canal.
Teníamos dos vídeos anteriores, uno para aprender React desde cero,
otro para crear una aplicación de React desde cero
y esta sería como la tercera parte.
Pero bueno, quédate, lo ves, a ver lo que entiendes.
Y luego te revisas los otros dos y vuelves a revisar este.
Y ya verás un poco la imagen completa.
Que levante la mano el que vino a la clase anterior.
A ver, yo levanto la mano.
Pues que los que ya sepáis un poco de qué va,
pues es eso, que teníamos ese buscador de GIF que habíamos hecho en el vídeo anterior.
Y ese es el que vamos a continuar.
Si ya sabes React, pues puedes continuar.
El proyecto es bastante sencillo y ahora haré una pequeña explicación
para que lo podamos ver, a ver cómo funciona.
También tenemos desde Brasil, Arquímedes Guilán.
Un placer.
No sé si está saludando a alguien que se llama Brasil o bueno.
Bueno, bueno, bueno.
A ver, a ver, a ver.
Vamos a ver si me funcionan las pantallas.
Sí, esta es la otra pantalla.
Y parece ser que ahora todavía se me escucha.
Ahora me estoy fijando bien en el tema este de la tarjeta de sonido.
No se me vaya a cambiar de golpe.
Si no, pues me lo comentáis si se cambia de golpe.
Vale.
Muy bien, ahí.
Todos levantando la manito.
Muy bien, la manita aquí.
Vale, genial.
Pues nada, así vamos siguiendo un poco el hilo.
Así que genial.
Bueno, pues este he hecho un poquito...
Me lo vais a perdonar, ¿vale?
Pero he mejorado un poquito los estilos.
Nada, nada del otro mundo, ¿vale?
Pero lo que he hecho es, pues nada, hacer un poco de estilos.
Ahora vamos a comentar los estilos.
Teníamos aquí GIF de Matrix, de Chile, de Colombia, Ecuador.
He puesto unos cuantos, pero bueno, porque lo dejamos un poquito así, ¿no?
Y entonces cada GIF, pues lo vemos ahí, más o menos bien puesto
y con el keyword que nos ha devuelto cada uno de los GIF.
Esto lo podemos hacer un poquito más chiquitito y, bueno, pues se quedan dos.
De hecho, lo vamos a dejar así para que solo quepan dos columnas, ¿vale?
Le he dado un poquito de estilo, porque sé que el otro era bastante horrible.
He dejado que dándole un clic entramos a un detalle que todavía no está listo
y vamos a ver si esto somos capaces de hacerlo funcionar
y si no, pues lo dejaremos para el siguiente vídeo.
Y paso a enseñaros un poquito el proyecto, cómo lo he dejado, qué es lo que he hecho,
qué es lo que he cambiado.
Sí, esto lo vamos a quitar y esto también lo vamos a quitar,
porque en principio esto es, sí, esto es lo que tenemos.
Bueno, habéis visto ya este logo fantástico que he creado de un sitio de estos
que dice, genera tu logo. Vale, pues eso he hecho.
Entonces, la aplicación. Esta es la aplicación.
Ya habíamos dejado unas cuantas rutas utilizando Gooter.
Más o menos sigue igual, solo que he añadido una ruta más que es la del detalle.
Pero ya has podido ver que está vacía, o sea que no he hecho absolutamente nada con eso.
Sí que he cambiado aquí el path, porque antes era barra gif y ahora lo he dejado en barra search.
¿Vale? Es el único cambio en este sentido.
A nivel de componentes los he separado un poquito mejor.
He puesto un spinner un poquito más en condiciones, que no sé si se ve,
pero hay un spinner un poquito más bonito que el que había antes,
que es un componente y está aquí.
Es bastante raro, pero es de estos que te generan también.
Hay un spinner creator por ahí y me lo he copiado y ya está.
Pero muy similar, ¿eh? El componente de GIF está exactamente igual.
He intentado tocar lo mínimo posible.
Así que todo lo demás ya estaría.
Sí que es verdad que lo que he avanzado es que he creado unas páginas.
He creado aquí las páginas.
He separado componentes y páginas.
Esto es una cosa que comentamos en el vídeo anterior,
pero básicamente es una buena práctica.
En lugar de tener las páginas dentro de los componentes, pues separarlas.
Y lo que he hecho es que cada ruta, por ejemplo,
esta es la ruta del componente de la home.
¿No? Vale.
Pues entonces tengo aquí el path de la barra que sería para la home.
Este componente home está aquí, estaría aquí, en la carpeta pages.
Y dentro de páginas tendríamos la home y aquí tendríamos el index.
Este también es muy similar,
solo que he puesto una forma sencilla de ir añadiendo nuevos.
O sea que, por ejemplo, si queremos poner un nuevo GIF,
entre los GIF más populares, esos que se ven ahí al principio,
pues podemos en este array poner Venezuela y ya sale aquí GIF de Venezuela.
Y le damos y ya tendríamos aquí un montón de GIF de Venezuela.
Vamos a ver qué cosas tiene Venezuela.
Un pajarito por aquí.
No entiendo esto.
¿Por qué sale un Teletubi?
¿Alguien me puede explicar por qué si busco Venezuela me sale un Teletubi amarillo?
Bueno, está bien.
El caso es que, bueno, he añadido esta forma fácil de añadir estos GIF populares
porque no teníamos un buscador, ¿no?
Y se queda un poco ahí el tema del buscador.
Así que lo primero que creo que voy a hacer es un buscador, ¿vale?
Así que vamos a ver si estamos hasta aquí todos de acuerdo.
Tengo, si está, el proyecto, es verdad, no lo he dicho, pero el proyecto,
no sé si, igual no está en Git, pero lo iba a subir a Git y lo voy a subir a Git, ¿vale?
Lo subiré a Git si no lo está y si lo está os pasaré el enlace.
Ahora es que no me acuerdo y no me gustaría ponerme a buscar,
pero os pasaré el proyecto, ¿vale?
Que igual no lo he subido, pero lo pondré para que lo podáis continuar y lo podáis ver y todo esto.
¿Qué más, qué más?
¿Por qué en las rutas no uso Exact, vale?
No uso en React Router, se puede utilizar aquí uno que se llama Exact, ¿vale?
No estoy utilizando React Router, estoy utilizando Wouter.
Esto lo expliqué en el anterior vídeo porque es una dependencia un poquito más chiquitita
y a mí personalmente, pues, me gusta más.
Y voy a poner música, un poquito de música de fondo, a ver, live coding, sí, voy a poner esta,
a ver si se escucha, no sé si escuchará, pero a mí me va bien para concentrarme y ponerme en zona.
Vale, voy para acá.
Vale, ¿qué más, qué más?
Vale, vale, pues, si ya estamos todos más o menos en zona, vamos a hacer cositas.
Lo primero que me gustaría hacer es esto, ¿no?
Es añadirle este buscador para buscar películas y que fuese...
Ay, buscar películas, yo también.
Como siempre hago lo de buscar películas, es que me sale solo.
No, vamos a hacer un buscador de GIF, por lo tanto, vamos a añadirle para buscar GIF.
El buscador lo vamos a poner en la home, ¿no?
Entiendo, así que tendríamos que ir en páginas al índex este y aquí es donde vamos a crear nuestro buscador.
Vale, vamos a quitar esto de popular GIF que al final no lo vamos a utilizar porque, bueno, vamos a dejarlo.
Vamos a dejarlo y vamos a poner antes de los popular GIF, vamos a poner el buscador.
Vale, para buscar lo que podríamos hacer aquí, pues, es tener un estado.
Vamos a poner keyword, set keyword, o sí, keyword me parece que está bien.
Y añadimos un useState.
Vamos a empezar este useState que tenga como valor inicial un string vacío.
Ahora vamos a utilizar aquí un formulario y en el formulario vamos a tener un input que es del tipo texto
y el valor de este input va a ser esta keyword.
La keyword es lo que vamos a meter dentro del campo de la input, ¿vale?
Perfecto. Vamos a ver.
No se escucha la música, no se escucha la música.
Bueno, yo la escucho.
Bueno, la subo un poquito más porque igual está muy bajita, ¿eh?
Pero a mí, mientras a mí se me escuche, que no me doy otro vuelco al corazón que se me deja escuchar.
Vale.
Entonces, teníamos esto del keyword, hemos puesto el formulario, esto lo tenemos que cerrar aquí.
Entonces, tenemos este pequeño formulario y tenemos también el input.
Vamos a guardar los cambios para ir viendo cómo queda esto.
Que no se nos olvida importar el useState.
El useState de aquí, ¿vale?
Bueno, ya tenemos ahí el input.
Vamos a ponerlo encima, ¿no?
De los GIFs populares.
Vamos a ponerlo aquí encima.
El buscador.
La extensión de los errores, que me lo preguntan siempre, y voy a hacer un vídeo solo de esto,
es el...
Ah, no me acuerdo.
Mira que lo he dicho a veces.
Error Lens.
Error Lens.
Esa es, ¿vale?
Que me lo preguntáis un montón.
Vale.
Es esta, que te dice el error justo en la misma línea.
Es que me encanta.
Vale.
Entonces, vamos a tener ahora dos callbacks.
De la misma forma que teníamos el onClick cuando hacíamos click, pues vamos a tener uno que se llama onSubmit.
Cuando se haga submit del formulario, ¿vale?
Vamos a crear a una constante que le vamos a llamar handleSubmit.
Que esto va a recibir el evento.
Y del evento voy a enseñar un error que es muy típico y luego lo solucionaré.
Pero vamos a ver qué más.
Luego el handleInput.
El handleInput básicamente va a ser el que va a tener el input para recuperar...
Bueno, podemos llamarle un handleChange.
Aunque el input también debería funcionar.
Vamos a poner handleChange.
HandleChange lo ponemos aquí.
Vale.
O sea, que ya tenemos dos funciones.
Una que se va a ejecutar cuando hagamos submit del formulario.
Y otra cuando hagamos cada vez que cambiemos algo en el input.
Vamos a guardar los cambios.
Y aquí ahora vamos...
Cada vez que hagamos un cambio en el input, cada vez que escribamos,
vamos a actualizar el estado con lo que tengamos en eventTarget.value.
Y este setKeyword actualizará el estado y en Keyword tendremos el nuevo valor.
Entonces una vez que ya tengamos claro que este es el valor que queremos,
pues lo que deberíamos hacer es...
Es hacer algo, ¿no?
Es navegar.
Lo voy a dejar por aquí así.
Navegar a otra ruta.
Por ahora debemos hacer eso.
Pero lo que vamos a mirar es que tenemos en Keyword.
Vale.
Vamos a guardar los cambios.
Esto aquí que me he dejado...
Vale.
Lo del exacto.
Vale.
Fuera.
Muy bien.
Vamos a abrir aquí la terminal.
Y aquí pues vamos a buscar Avengers.
Y hago un submit.
Le he dado al enter.
Y como puedes ver aquí hay como un pequeño error.
Hay un error, bueno, que es muy típico.
Y es que si le doy a enter para hacer el submit,
pues lo que está pasando es que se está refrescando toda la pantalla
y no estoy viendo nada.
O sea, se está refrescando la URL.
Se está refrescando la página.
Y no estoy viendo en el console.log este que he puesto.
Esto es súper típico porque hay que poner un event preven default.
¿Vale?
Para evitar que haga su comportamiento por defecto.
Esto a veces es un bug muy típico porque se nos olvida esto.
Yo es que el formulario por defecto hace un post a la página
que le hemos puesto aquí en action.
Pero esto no lo estamos utilizando.
Y ya cada vez se utiliza menos.
Eso era antiguamente.
Vale.
Ahora tenemos este keyword.
Ya hemos hecho el preven default.
Vamos a buscar aquí.
Vamos a buscar Avengers.
Le damos al enter.
Y, bueno, tengo la keyword.
O sea, esto no ha hecho realmente nada del otro mundo.
Lo que vamos a querer cuando tengamos el submit
y sepamos la keyword, básicamente es navegar a una URL que sea como esta.
Una URL que sea barra search barra la keyword que hemos buscado.
Entonces, para lograr eso, podemos utilizar un hook que tiene guter,
que es muy parecido al de React Router.
Creo que tiene uno parecido también, que es use location.
Este use location lo podemos utilizar aquí.
Es un hook que tiene guter.
O sea, que ya estaríamos viendo un custom hook, pero que no es nuestro,
sino que lo ha creado alguien externo a nosotros.
Y esto aquí nos devuelve algo.
Podría mirar la documentación y ver claramente lo que devuelve,
pero por ahora voy a hacer este location aquí, así.
Y vamos a ver lo que devuelve.
Vamos a guardar los cambios.
Vale.
Lo que devuelve es un array de dos posiciones.
En la primera posición tendríamos el path en el que estamos.
Y en la segunda posición puedes ver que hay una f que dices.
¿Pero cómo que es una f?
Bueno, no sé si se verá conmigo encima, pero bueno.
Dos posiciones, el path y una f.
La f es una función.
Y esta función que se ve aquí ya se ve que se le puede pasar un to.
Que básicamente esta función es como para navegar de forma programática.
Para navegar sin utilizar un link ni utilizar nada de esto.
Así que diríamos que en la primera posición tenemos el path
y en la segunda posición tendríamos, le podríamos llamar push
porque sería lo correcto.
Pues vamos a llamarle push.
O, venga, sí, push.
Vamos a llamarle pushState.
PushState igual pushLocation.
¿Vale?
PushLocation está bien.
Entonces, ahora aquí lo que deberíamos hacer en este pushLocation
es decir, vale, pues este pushLocation vamos a irnos a barra search,
barra la keyword que tengamos.
Y ahora guardamos los cambios de esto y vamos a ver si funciona.
Hemos dicho Avengers, le doy al enter y ya tenemos ahí los GIFs de Avengers.
O sea que ya, pues tenemos un buscador bastante,
sé que no es el mejor buscador del mundo, ¿vale?
Pero search a GIFs here, voy a poner aquí un playholder para que se...
Pues nada, Avengers, le damos al enter y ya lo tenemos.
Podríamos poner, no sé, tenemos Argentina que nos faltaba ahí, ¿vale?
Solo para que veáis el spinner y lo bonito que ha quedado.
Vale, pues esto ya lo tendríamos, ¿no?
Bueno, hasta aquí, hasta aquí ya tenemos el buscador, que ya es algo.
Vamos a ver qué me contáis por ahí, qué me estáis contando.
No, no llegas muy tarde, no te preocupes.
Ha llegado al momento, al momento, al momento.
Pachi Vadilla me dice, importa el virus esté, si no petará, si es verdad.
Pero por suerte tenía el error lens que me decía que iba a dar algo.
Muy bien, a todos los que habéis dicho lo del pre-end default
antes de que pasase nada.
Nada, solo le he dado una intro.
No es de películas, es verdad, es de GIF.
No es el use history, eso sería en el React Router.
En router sería el use location directamente.
O sea, porque estábamos utilizando la location
y ahí ya podemos hacer un push de lo que necesitemos.
Igual es un pelín diferente el React Router DOM, ahora no recuerdo.
Vale, ¿por qué cuando se usa React a veces imprime dos veces
el console.log como te ha pasado ahora mismo?
Eso es interesante, ¿no?
Cuando yo he puesto aquí, ese está bien.
Aquí he puesto el console.log y he puesto...
Bueno, en realidad he puesto...
Pero podríamos poner aquí el path, ¿no?
Y claro, me ha dicho, oye, es que aquí te ha salido dos veces.
Esto puede ser por diferentes motivos en este caso.
En este caso en concreto.
Aquí puede ser que haya salido dos veces.
Entonces, normalmente, si sale dos veces significa que ese componente
se ha ejecutado dos veces, lo que quiere decir que se ha renderizado dos veces.
Entonces, seguramente me da a mí que el use location está cambiando el estado.
Está aquí cambiando el estado.
Si no, simplemente es que esto se ha ejecutado dos veces,
se ha renderizado dos veces.
Si alguna vez te pasa y ves que lo mismo se te pone aquí dos, tres,
o lo que sea, fíjate si tienes alguna llamada a un hook o un use state
o a una llamada a un estado y no se está actualizando ese estado
o las props se están cambiando o el estado del padre
que está haciendo que el componente no pare de renderizarse, por ejemplo.
Vale, ¿qué más, qué más?
Buen playlist, ya te sigo.
Genial, perfecto.
Utilizar onclick en lugar de onsubmit para evitar lo del prevent default.
Eso está muy interesante, pero no os lo recomiendo.
Por ejemplo, aquí podríamos poner un botón y vamos a poner que sea submit
o buscar, vamos a ponerle buscar.
Vamos a ponerle aquí un botón.
¡Uy, madre mía! Ese botón es enorme.
Pero bueno, vamos a poner...
A ver, si pongo un input type button...
Esto pongo...
Es que el botón, claro, tiene que tener unos estilos de beta saber...
Tengo que poner que esto sea un value y no elijo.
Value, buscar...
Y esto lo puedo hacer submit.
Bueno.
El caso, claro.
Si tú pones aquí un onclick,
lo que va a pasar es que sí que vas a detectar el evento de hacer click.
Si pones aquí un botón o lo que sea, vas a detectar el evento de hacer click,
pero te vas a perder la posibilidad de, por ejemplo,
cuando haces enter dentro del search.
Entonces, la buena práctica sería hacer un onsubmit.
Porque además, de forma automática, si tú pones aquí un botón,
te va a detectar cuando, por defecto,
el último botón que tienes dentro de un formulario,
y esto es bastante interesante,
el último botón que tienes dentro de un formulario,
directamente te hace también el submit.
De forma automática.
No hace falta ni que le indiques que es el que hace el submit.
Y no tienes que hacer un onclick ni nada.
Entonces, es mejor tener un onsubmit en el formulario,
porque es más accesible.
Y hay veces que la gente se mueve con el teclado y cosas así,
que no ponen un onclick en un botón en concreto,
porque al final te puedes perder eventos por culpa de eso.
Así que esa pregunta me ha parecido súper interesante,
y creo que esto espero que te haya ayudado.
Vale, vale, vale.
¿Alguien sabe cómo se llama el tema o la extensión para mostrar la flecha?
No sé qué flecha te refieres,
pero si es esta flecha, en realidad es la fuente,
no es una extensión.
¿Vale?
Vale, vale.
Pues nada, vamos a continuar,
porque creo que no hay más preguntas por ahí.
Vale.
Pues vamos a continuar.
Entonces, hasta aquí ya tenemos nuestro buscador.
Vamos a cerrar esto.
Y ahora lo que vamos a hacer es crear nuestro primer custom hook.
Vamos a ver aquí en search results,
y esto es lo que hacíamos.
Esto es el search results,
esta es la página una vez que llegamos a la búsqueda.
Si miramos un poco el árbol de elementos,
bueno, lo podríamos llegar a ver aquí.
Vamos a poner components.
Vale.
Pues lo que se está renderizando ahora,
esta ruta, es la de search results.
Esta sería la página resultados.
Así que en esta página es la que reciba,
por parámetros de la URL,
la keyword, en este caso el avengers,
que lo tendríamos aquí en este keyword.
Y lo que está haciendo aquí es decir,
bueno, pues me inicias un estado con loading por defecto como false,
y luego además me empiezas a inicializar un array de give,
y luego tenemos el useEffect,
que recordad que esto es un efecto,
que se ejecuta cada vez que el componente se renderiza,
y cambian las dependencias que le indicamos en este array.
En este caso, lo que estamos diciendo es que esta función
se tiene que ejecutar cada vez que la keyword cambia.
O sea, que cada vez que detecte que la keyword que se le pasa a este componente
sea distinta, se debería volver a renderizar.
Vale.
Entonces aquí dentro lo que estamos haciendo es decirle,
bueno, pues antes de hacerme esto de tomar los give,
me haces el setLoading,
me lo pones a true,
para así mostrar el spinner.
Y luego, una vez que tenemos los give,
pues hacemos este setGif para actualizar el estado,
podemos mostrar los give y tal.
Aquí tenemos un renderizado condicional,
que si está cargando mostramos el spinner,
y si no, pues mostramos la lista de give.
Y tenemos este componente listofgive,
que nos renderiza todo este grid.
Este grid, que por cierto, por si os resulta interesante,
lo tenemos en components, listofgive,
¿vale?
Esto sería, ¿no?
Lo interesante de hacerlo así,
es que he utilizado el column count.
El column count, tú le puedes decir el número de columnas
que quieres que te ponga los elementos.
Así que he utilizado una custom bar de CSS,
y lo que estoy haciendo aquí,
es que cada vez que voy haciendo más grande esto,
pues me lo pone en más o menos columnas.
Y bueno, me ha parecido una forma bastante interesante
y bastante única de hacerlo.
Y el problema es que no está del todo soportado,
sobre todo en navegaderos antiguos,
pero bueno, me parece que está bastante guay.
Y queda muy bonito de una forma muy sencilla
y con muy poco código.
Entonces, volvemos al search results.
Tenemos todo esto, ¿no?
Entonces, imaginemos que ahora yo todo esto,
esto que tenemos aquí,
esta lógica, ¿no?
Yo la quiero utilizar en la home.
Porque no solo quiero mostrar los GIFs más populares,
sino que me gustaría mostrar unos resultados en la home
de algún tag que sea el más popular.
O, por ejemplo, el último buscado.
O uno por defecto.
Uno que pensemos, bueno, este es bastante trendy.
Pues me gustaría utilizarlo.
Claro, una cosa que podríamos llegar a hacer,
y bueno, vamos a hacerlo rápidamente,
que tampoco creo que tardemos mucho,
sería ir a la home.
Y aquí en la home,
que ya tenemos todo el estado este de la búsqueda
y todo esto, ¿vale?
Pues deberíamos copiar un poco toda la lógica
que teníamos en el otro sitio.
Aquí ponemos el useEffect, ¿vale?
Ponemos pete.
El getGIF lo tenemos que importar del otro sitio.
Esta no es la forma correcta, ¿eh?
Pero vamos a hacer que funcione
y luego ya lo movemos.
Entonces, esto lo tenemos que coger de services,
de los servicios que teníamos.
Vale, nos dice que no utilizamos el loading.
Voy a obviar enseñar el spinner,
porque eso ya sería un poco demasiado,
pero sí que puedo enseñar los GIF, ¿no?
Entonces, en el search results,
para enseñar los GIF,
teníamos el list of GIFs.
Vale, pues este list of GIFs
lo vamos a poner aquí,
justo debajo del buscador.
Ahora, este list of GIFs
lo tenemos que importar también.
list of GIFs from
y esto, pues vamos a tener components,
list of GIFs, ¿vale?
He guardado los cambios
y vamos a ver qué pasa.
List of GIFs, claro.
Ahora el keyword, claro, el keyword,
ta, ta, ta.
Vamos a hacer que aquí por defecto,
cuando buscamos esta keyword aquí,
vamos a ver que sea RIC,
por defecto que nos busque RIC, ¿vale?
Porque estamos en la home
y todavía no hemos hecho ninguna búsqueda.
Entonces, vamos a poner aquí
que sea, por ejemplo,
un title para separar esto
que nos ponga que es última búsqueda.
Por ahora vamos a pensar
que es la última búsqueda,
que la última cosa que he buscado
es RIC and Morty.
Última búsqueda.
Perfecto.
Vale.
No es verdad,
pero ya un poco vamos entendiendo
por dónde van los tiros, ¿no?
O sea, yo tengo aquí la última búsqueda
y estoy reutilizando
toda la lógica
con todos los estados
y todo esto, ¿no?
Básicamente sería,
vamos a poner aquí un comentario,
se haría de aquí a aquí.
Todo esto, todo esto.
Y todo por el tema
de querer utilizarlo en dos sitios.
Entonces,
aquí es donde está la magia
de los custom hooks.
Y es que los hooks
están súper guays
porque no solo existen
para simplificar
ya de por sí
tu componente,
sino para que puedas
crear tus propios hooks
y simplificar
cuando necesitas reutilizar
cierta lógica.
Así que,
en este caso,
lo que podríamos hacer
es extraer
todo este código
a un custom hook
que hiciese todo esto
y solo nos diese el output
de saber si está cargando
o si tiene GIF, ¿no?
Y tener esa información separada.
Así que,
vamos a ver cómo lo creamos.
Vas a ver que es muy sencillo,
o sea,
es muy fácil
y lo vamos a hacer
en un momentito.
Vamos a crear una carpeta.
Vamos a llamar hooks
y esta carpeta,
voy a quitarme aquí
la escena
para leer
vuestro chat,
a ver que me estáis contando
mientras.
A ver.
Vale,
por ahora,
sí.
Podría lo tener,
¿eh?
Vale.
Entonces,
ya tenemos los hooks.
Vamos a poner aquí
un custom hook
y le vamos a llamar
usegif.js.
No sé si es el mejor
nombre del mundo,
pero bueno,
le vamos a llamar así.
O usegifs
en plural.
Usegifs.
Usegifs.
Vale.
Ahora,
lo que hacemos aquí
es,
primero lo que vamos a hacer
es copiarnos,
básicamente,
este código que teníamos aquí,
que decíamos que era
lo que habíamos copiado
también en la home,
pues lo vamos a copiar aquí,
por ahora.
Vale.
Tenemos todo esto.
Ahora,
¿cómo vamos a llamar a este hook?
Pues lo hemos dicho
que es usegifs.
Y esto
lo vamos a dejar dentro.
Lo que habíamos hecho antes
lo vamos a dejar dentro.
Ahora,
aquí le falta información.
Por ejemplo,
primero lo que le falta
sería el useState
y el useEffect.
Estas dos cosas
le faltan,
las tenemos que recuperar
de React.
Vale,
nos vamos acercando.
Ahora,
¿qué le falta?
También le falta keyword.
O sea,
que tenemos que decir
que este hook
usegif,
igual que el useState
recibe un parámetro
para el valor inicial,
pues este hook
que nosotros vamos a crear,
vamos a llamarle,
vamos a decir
que tiene un parámetro
que es la keyword.
Vale.
Y entonces,
nos falta el getGif
que es el servicio,
pues lo vamos a importar también.
Vamos a tomar el getGif
y lo importamos
de services getGif.
Vale.
Ahora,
¿qué es lo que queremos
que devuelva
este custom hook?
Pues lo único
que queremos que devuelva
es tanto el loading
como los gif.
Vale.
Guardamos los cambios
y esto,
por supuesto,
lo tenemos que exportar.
Así que hacemos
exportDefault
de esta función.
Bueno,
voy a poner un export
de la function
porque sé que luego me decís,
pero ¿por qué no lo haces nombrado?
Pues lo hago nombrado ya.
Voy a guardar los cambios.
Ahora,
en el searchResults,
que es donde estamos
utilizando todo esto,
vamos a importar este hook
useGifs
y lo vamos a ver
dónde estaba esto.
Hooks
useGifs.
Vale.
Entonces,
todo lo que habíamos hecho
anteriormente,
que era de aquí
a aquí,
ahora lo vamos a recuperar
de nuestro custom hook.
Para eso,
vamos a hacer aquí
una constante
y ¿qué es lo que devolvía
el hook?
Pues era loading
y gifs.
¿No?
¿Era gifs?
Sí.
Vale.
Pues eso.
Y esto lo vamos a recuperar
desde useGifs
y le tenemos que pasar
la keyword.
Vale.
Pues ya está.
Ahora,
esto ya no lo necesitamos,
este getGifs.
Ahora,
no necesitamos tampoco
nada de esto.
A ver,
ah,
esto era un import nombrado.
Muy bien.
Una maravilla
que te suelte los errores.
Entonces,
bueno,
la home todavía no hemos hecho nada.
¿Vale?
La home se está quedando igual.
Esto lo estamos cambiando
en el searchResults.
Así que,
si todo ha ido bien,
esto debería funcionar
exactamente igual
en el searchResults.
Por lo tanto,
vamos a buscar Avengers
y, pues,
podemos ver
que funciona correctamente.
Para ver que realmente
este código
es el que estamos ejecutando,
pues,
podríamos ver
cuáles son los valores
de loading
y gif.
¿Vale?
Voy a levantar aquí esto.
Bueno,
podemos ver aquí el objeto.
Esto,
pues,
un poco lo mismo,
¿no?
¿Qué pasa?
Que esto se está volviendo
a renderizar unas cuantas veces
porque,
pues,
la primera vez
cuando estaba buscando,
cuando a lo mejor
luego ha hecho match
de la ruta,
cuando luego ha actualizado
los gif,
cuando ha actualizado el loading.
O sea,
que podemos ver
que esto está repetido
unas cuantas veces
por esto.
¿Vale?
Podríamos intentar
optimizar esto,
ya lo podríamos ver
más adelante,
intentando utilizar
un memo
para decirle,
bueno,
este componente
solo me lo tienes
que actualizar
cuando realmente
cambie esto
o lo otro.
¿Vale?
Pero bueno,
lo importante ahora
es que sí que tenemos
en el último objeto,
tenemos la información
que queríamos.
Ya nos está cargando
y tenemos todo el loggif.
Y esto lo hemos hecho
con un custom hook.
O sea,
que lo que estamos haciendo
básicamente
es fácilmente
extraer lógica
que queremos reutilizar.
Y fíjate
lo fácil
que se entiende ahora,
¿no?
Esto que antes
lo teníamos ahí
dentro del componente,
ahora que tenemos
un custom hook
vemos claramente
lo que tiene que hacer
este hook
y en la página
ya no tenemos
todo esto.
Así que fíjate
lo bonito
que queda este componente.
Si es que está
para lamerlo
este componente.
Está niquelado.
no tenemos ningún tipo
de use state,
no vemos de dónde
recupera esa información,
no tenemos el use effect
y lo mejor de todo
es que esto
lo podemos reutilizar.
Entonces,
voy a leeros
y vamos ahora
a reutilizarlo.
Vamos a ver.
A ver qué me contáis
por aquí.
¿Se recomienda
Wooter
o React Router?
A ver,
si es un proyecto
muy grande,
pues seguramente
React Router
tiene bastante
más comunidad,
está bastante
bien mantenido
y de verdad
es una librería
que es fantástica.
Yo he utilizado Wooter
lo primero
porque me gusta
darle oportunidades
a librerías
que no son tan famosas
y que al final,
pues no sé,
puede ser interesante
utilizarlo en un proyecto.
Creo que en la variedad
está al gusto,
¿sabes?
Y entonces,
pues al final
la API es muy similar
y es muy chiquitita
la librería
y se utiliza muy fácil
y como hemos podido ver,
en un momentito
la tenemos funcionando.
Así que si es una aplicación
de producción muy grande,
pues seguramente
te iría a React Router,
pero bueno,
si es un proyecto tuyo,
yo me animaría con Wooter
que además tiene soporte
a server side rendering
y le faltan
muy poquitas cosas
y que ocupa
como siete veces menos
también.
Así que eso.
Vale.
¿Hay manera de usar
UseEffect?
Me dice Christopher García Abril
sin que se renderice mil veces
cuando modificas
el state dentro del mismo
o decirle
que no actualice
cierto elemento
que se requiera dentro.
Sí que se puede.
De hecho,
lo que se puede hacer
en este caso
tendríamos que ver bien
de dónde vienen
los temas,
¿no?
Pero,
por ejemplo,
podríamos hacer,
dependiendo cuál fuese,
utilizar el React Memo.
El React Memo
lo que hace,
aquí podríamos hacer
que esto fuese una función.
Mira,
vamos a ver ahora
cuántas veces
se renderiza esto.
Vamos a ver
si somos capaces
de solucionar algo.
Esto,
pues,
tres,
cuatro,
cinco,
seis,
siete,
ocho veces.
Bueno,
vamos a ver
si utilizando React Memo
mejoramos algo esto.
Vamos a dejar esto
que sea una función
y decíamos
un export default
de React Memo
y aquí le pasamos
el componente.
Y vamos a ver
con el console.log
que teníamos antes
cuántas veces
se renderiza esto.
A guardar los cambios.
Tres,
cuatro,
cinco,
seis,
siete,
ocho.
Las mismas.
O sea,
que en este caso
seguramente
lo que está pasando
es más,
está dentro
o está renderizándose
algo de dentro.
Lo que podríamos hacer
en este caso,
aparte de ser
bastante más,
porque el React Memo
ahora lo que está haciendo
por defecto
es ver que los parámetros
que le están llegando
a ver si cambian,
pero no mira
dentro del estado.
No mira si dentro del estado
está cambiando algo
para evitarle el renderizado.
Lo que podríamos hacer
desde,
uno,
ser más agresivo
en la forma que queremos
que esto cambie o no cambie,
pasándole un segundo parámetro
y diciéndole
las dependencias que tiene
el volverse a renderizar.
Y otra cosa,
lo que podríamos hacer
es ser más granulares,
en el sentido de decir,
bueno,
tampoco me importa
que se renderice otra vez
este componente
si conseguimos,
por ejemplo,
que el list of GIFs
sí que no se renderice,
porque a lo mejor
es el más grande,
el que tiene todo
el listado de componentes.
Entonces,
en el list of GIFs,
este,
en lugar de aquí,
que seguro que si ponemos
un console.log,
pues tenemos otra vez
lo mismo de antes,
que se renderiza,
en este caso,
solo dos veces,
porque claro,
el cambio de loading,
el otro hace que se renderiza
cuantas veces,
pero este se renderiza dos,
claro,
una seguramente para ser,
cuando pasa a ser vacío
y otra cuando deja de ser vacío.
Si quisiéramos que este,
eviteásemos que si no cambia
lo que se renderizase,
pues haríamos aquí el Rian Memo.
Al final,
sería poco jugar con eso.
También evitar tener
componentes muy grandes.
Cuanto más grandes sean,
pues tienes un estado
que afecta más componentes.
Pues intentar dividirlos
y que sea más granular,
tal y como tenéis los componentes.
¿Vale?
Rian Memo lo que hace
es comparar las props
que le llegan
y dependiendo de,
por defecto,
si las props que venían antes
y las que le llegan ahora
son iguales,
pues no lo renderiza.
Es un poco tricky
porque, claro,
cuando envías como prop objetos,
pues los objetos
se pueden crear y tal.
Entonces,
tiene un segundo parámetro
para que tú le pases
una función
para hacer la comparación.
Que si devuelves true
significa que las props
son iguales para ti
y si pasa false
se vuelve a renderizar.
Sería un poquito eso.
Buscaré un ejemplo
porque me parece que
igual que este ejemplo
es un poco más difícil de ver.
A ver si en esta clase
vemos algún ejemplo
que tenga sentido
y si no me lo pienso
para otra clase.
Vale.
¿Qué me recomiendas
para validación de formularios?
Dice Camilo.
Formic.
¿Qué ventaja tiene Hooks
a componentes de clases?
Pues lo primero
es que como has podido ver
quedan mucho más limpios.
Si esto lo tuviéramos
que escribir en clase
quedaría bastante más largo
más difícil de entender
en mi opinión
y no podrías utilizar Hooks
que por lo tanto
no podrías crear
Custom Hooks.
Entonces
ya perderías bastante.
Además,
la comunidad
se está moviendo mucho
en esto
y por lo tanto
pues
es bastante recomendable
utilizarlos.
Vale.
Mientras leo
me voy a poner aquí
en primera pantalla.
Vale, vale.
Alguien decía por aquí
Custom Hooks
es similar a
High Order Components.
Son dos cosas
totalmente distintas
aunque
a veces
pueden tener
cosas similares.
A ver.
Un High Order Component
básicamente es una función
que devuelve un componente.
Es eso.
¿Vale?
High Order Component
función que devuelve componente.
Lo que pasa
es que ese High Order Component
normalmente le inyecta
props.
Pero en este caso
nosotros no estamos
inyectando props
aunque podríamos.
Podríamos hacer un
Custom Hook
e inyectarse props y tal.
Aquí lo que estamos haciendo
es incluso
cambiar el estado
interno del componente.
Así que
es bastante más potente.
Un Custom Hook
es bastante más potente.
Podemos llegar a lograr
un High Order Component
nunca podrá lograr
lo que hace un Custom Hook.
Podría llegar a lograrlo
pero sería bastante más complicado
y en cambio
un Custom Hook
puede hacer fácilmente
lo que hace un High Order Component.
Y es bastante más fácil
de entender
yo creo.
¿Vale?
¿Podrías hacer algo de Context
para un Login Register?
Vale.
No voy a hacer Login Register hoy
pero igual más adelante
y hoy voy a intentar
a ver si utilizamos
el Context.
Por ahora
vamos a volver
al código
y lo habíamos dejado
con que teníamos
el Search Results
con nuestro Custom Hook.
vamos a ver
la potencia
y la gracia
de todo esto.
Si vamos a la página
y de la Home
vamos a la página
de la Home
habíamos copiado
toda esta lógica
que teníamos aquí
para utilizar
también
esto de buscar
las películas
y tal.
Pues ahora
que tenemos este Hook
lo único que tenemos que hacer
es importar el Hook
y ahora
este Use GIF
es lo que vamos a utilizar
en lugar de todo esto.
así que lo que vamos a hacer
es que este Loading
y este GIF
vengan del Use GIFs
pero el problema
es que aquí
de la misma forma
que antes
no tenemos Keyword.
Por ahora
podemos poner
por ejemplo
po po po
indiana
por decir algo
¿no?
Vale.
Entonces vamos a la Home
y pues busca
con la Keyword
indiana.
Vale.
Pero
hemos dicho
que lo que podría ser
interesante
es que
que el Custom Hook
tuviese algo extra
¿no?
Que le diese ahí
una no sé
un toquecito
toquecito
de forma
que en la Home
lo podamos utilizar
sin pasarle el Keyword
así
de esta forma.
Entonces
lo que
he abierto esto
vale.
Lo que podemos hacer
al respecto
es
aquí
vamos a dejarlo como está
vamos a guardar los cambios
y vamos a dejar que esto pete
pum
¿vale?
Y vamos a arreglar
el Custom Hook
lo que voy a querer hacer
es que mi Custom Hook
que le estamos pasando aquí
por defecto
una Keyword
o sea
estamos pasando una Keyword
y necesitamos decirle
cuál era
lo que vamos a hacer
es que esto
por valor
por defecto
sea una Keyword
que tenga el valor
de NULL
por ejemplo.
Vale.
Entonces
vale.
Ahora funciona
pero estará buscando
seguramente NULL
si miramos por aquí
seguramente está buscando
NULL
en la Home
vamos a verlo
Keyword
guardamos los cambios
y sí
podemos ver que está
NULL
NULL
está buscando NULL
esto es lo que está viendo
el Custom Hook
en la Home
en el Shell Results
seguro que le llega bien
la Keyword
pero aquí pues no queremos
entonces
lo que podemos hacer
es que cada vez
que se llame
este Custom Hook
si tiene Keyword
que la guarde
entonces lo que vamos a hacer
es que
antes de hacer la llamada
si tenemos Keyword
podríamos hacer Keyword
bueno
vamos a hacer
If Keyword
¿vale?
pues lo que vamos a hacer
es un Local Storage
Set Item
y vamos a hacer
Last Keyword
y vamos a poner aquí
que sea pues la Keyword
bueno
esto
esto en realidad
lo podríamos hacer siempre
esto lo podríamos hacer siempre
cuando ya tengamos los resultados
¿no?
cuando tenemos los resultados
pues podríamos hacer algo así
que siempre que
que hagamos una búsqueda
y ya tengamos resultados
pues vamos a guardar
esa búsqueda
en el Last Keyword
ahora
lo que podríamos hacer
es que
si la Keyword
es Null
podríamos decirles
si no tenemos Keyword
o pueden decir
Keyword to Use
creamos una constante
la Keyword para usar
si tenemos Keyword
pues utilizamos la Keyword
bueno
vamos a enseñar esto
Keyword
si tenemos la Keyword
sería Keyword
y si no
podríamos tomarlo
de Local Storage
Get Item
Last Keyword
y ya está
entonces para simplificar
este código
que es un poquito raro
podríamos decirle
si tenemos la Keyword
y si no
pues tómalo
de Local Storage
y esta Keyword
sería la que vamos a utilizar
de esta forma
aquí
recuperamos la Keyword
de Local Storage
y aquí
guardamos la Keyword
en el Local
Storage
vale
de esta forma
si no le pasamos
ninguna Keyword
por defecto
debería utilizar
la última
que hemos buscado
así que si yo
pongo aquí Avengers
y le doy a buscar
y vamos a la Home
pues como lo último
que busqué
fue Avengers
pues ahora
podemos ver
que la última búsqueda
es Avengers
si buscamos Matrix
y le damos a buscar
pues tenemos Matrix
y si por lo que sea
yo ahora digo
ah pues vamos aquí
a Local Host 3000
que es la página
esta fantástica
pues ya tiene
la última búsqueda
que básicamente es Matrix
así que de esta forma
pues ya le hemos dado
un toquecito
¿no?
y de esta forma
en el Search Results
sí que le pasamos
una Keyword
y en la Home
no le estamos pasando
una Keyword
no le estamos pasando
ningún parámetro
como se puede ver aquí
en este caso
bueno nos dice
que no estoy utilizando
el Loading
porque es verdad
no estoy enseñando
el Spinner en la Home
pero lo podríamos hacer
tampoco sería tan complicado
de hecho
si podríamos mover
el Loading
a List of GIFs
y de esta forma
pues ya tendríamos
esa funcionalidad
tanto en la Home
como en el Search
así que
ahora estaríamos
reutilizando
este Custom Hook
para dos cositas
vale vale
vamos a ver
que guardaremos
el código
en algún repositorio
de Github
no te preocupes
XaviGoo
que lo guardaríamos
podría hacer
paginación
con los GIF
no creo que hoy
me dé tiempo
pero
para la próxima clase
lo hago
porque me parece
interesante
además
bueno puede ser cortito
pero bueno
puede ser guay
vale
y si nunca se buscó
nada
vale
si nunca se buscó
nada
vale
esto es yo
porque estoy en el Happy Path
vale
pero podríamos hacer
que si nunca ha buscado
nada
pues aquí
una de dos
o le dejamos
algo que nosotros
digamos
si nunca ha buscado
nada
pues que busque
random
sabes
de esta forma
deberíamos
que si
yo borro
todo lo que tengo
en mi ordena
de este proyecto
y voy a la home
vale
pues ha utilizado
random
para buscar GIF
que de verdad
son muy randoms
oh
si
esto es
un nugget
con forma de
Tyrannosaurus Rex
siguiendo a alguien
siguiendo a alguien
what
que es esto
o sea
uy uy uy
bueno
me he quedado aquí
un momento
vale
que más
que más
vale pues esto
estaría solucionando
si no encontra
si no ha buscado
nada
en ningún momento
vale
que más
la tendencia es que el export
de los custom hooks
sea un array
no
no
no tiene por qué
vale
Kashir
me pregunta Kashir esto
y no tiene por qué
porque la verdad
es que en este
en este ejemplo
no tiene sentido
que sea un array
el array
muchas veces
tiene sentido
en el useState
y de hecho
no es verdad
que los hooks
normalmente
devuelvan un array
eso es
que el hook
que más utilizamos
que es el useState
sí que devuelve un array
pero el resto
de hooks
el useEffect
no devuelve nada
por ejemplo
el useContext
devolverá
lo que tengamos
en el contexto
a ver
vamos a buscar los hooks
para ir acordándome
pero
tenemos el state
el efecto
por supuesto
no hace nada
el
tenemos el useRef
el useRef
por ejemplo
tampoco
guardaría
lo que quisiéramos
entonces
hay una falsa creencia
que hay que devolver
un array
y no es así
eso lo que pasa
es que el useState
que es el que más utilizamos
devuelve un array
de dos posiciones
porque le va muy bien
porque al ser un array
de dos posiciones
pues puedes utilizar
la desestructuración
del array
y en la primera posición
siempre tienes el valor
y en la segunda posición
siempre tienes para actualizarlo
pero el tema
aquí
es que
así le puedes poner
el nombre que tú quieras
en nuestro caso
en nuestro custom hook
que hemos utilizado aquí
que es el useGIF
si yo hago esto
y lo que hago
es devolver
un array
lo que pasa
es que
le puedes poner
el nombre que tú quieras
a esto
a ver que al final
puedes lograrlo
podemos lograrlo
también como un objeto
lo podríamos renombrar
pero creo que así
tiene más sentido
que sea un objeto
porque es más fácil
de extender
porque al final
no es tan fácil
de pensar
que es el valor
y el método
sino que son valores
y además son valores
que tienen sentido
y a lo mejor
el día de mañana
pues ponemos un tercer valor
aquí
que es
pues
num of results
yo que sé
que es el número
de resultados
y el array
tendrías que fiarte
en la posición
ah no
en la tercera posición
tengo el número
de resultados
vale
y si no quiero recuperar
los resultados
es un poco raro
y si no quiero recuperar
el loading
y solo quiero recuperar
los GIF
o al revés
o sea que
en este caso
tiene sentido ser un objeto
y no siempre
tiene que ser un array
vale
¿usa lazy loading
para cargar los GIF?
no
todavía no lo uso
podríamos utilizar
el
el atributo
lazy
no
es loading
y podríamos ponerle
lazy
¿esto era así?
lazy
no me acuerdo ahora
si es así
creo que sí
que era loading lazy
y ahora haría
automáticamente
lazy load
lo que pasa es que
tiene un threshold
muy grande
así que
¿qué más?
¿qué más por ahí?
¿por qué en el
on change
del input
no haces directamente?
vale
Bautista me pregunta
que por qué
en el on change
pues cojo
y me
me transformo
este
perdón
lo tenemos en la home
¿por qué
que hago esto?
y creo una constante
bueno
esto es una cosa mía
personal y a mí me parece
personalmente una buena práctica
vale
que es evitar
llenar el render
de hecho esto
esto seguramente lo evitaría
pero llenar el render
de tener funciones en línea
si no tienes necesidad
y lo puedes hacer aquí
en handle change
porque el tema es que
el handle change
esto puede extenderse
el día de mañana
¿no?
y cuando cambia
a lo mejor quieres
empezar aquí
hacer más cosas
y entonces
si lo dejas en el render
pues ya
intenta
separar
el inicio
de tu componente
¿no?
que sería como
preparar tu componente
las cosas
que va a necesitar
tu componente
y lo que renderiza
tu componente
para que fácilmente
sea más fácil de leer
yo sé que
parece muy guay
eso de poner
en una línea
las funciones
y tal
pero al final
la realidad es que
es muy difícil de leer
de hecho
esto si ya lo metemos aquí
ya empezamos
un poco a
dar saltos
que no tienen mucho sentido
yo lo
a mí no me gusta
personalmente
y la verdad es que
os aconsejaría
que no lo hagáis
Emiliano Verón
dice
nunca voy a terminar
de entender
el use effect
vaya
¿por qué?
si al final
es tan sencillo
como pensar
que el use effect
es una función
que se ejecuta
cada vez que se renderiza
tu componente
eso es de base
pero
¿qué pasa?
que hay veces
que tú quieres
que el efecto
solo se renderice
bajo algún supuesto
cuando cambia una dependencia
de ese componente
por ejemplo
yo quiero que este efecto
se ejecute
solo cuando cambie
la prop
pepito
¿vale?
pues cuando cambie pepito
se ejecuta esta función
cada vez que cambie pepito
se renderiza el componente
y se ejecuta esta función
pues ya estaría
vale
pues hasta aquí
tenemos esto
creo que no me he roto nada
vamos a ver
no me he roto nada
no
vale
perfecto
vamos a ver que
ok gracias
me dice Bautista
bueno espero que lo hayas entendido
si no
pues nada
poco a poco
con calma
no pasa nada
vale
entonces
aquí viene
el tema
de lo interesante
que es hacia donde quería llegar
vamos a ver cuánto tiempo llevo
una hora ya
vamos a ver hasta donde llega esto
y si no
pues lo dejaremos justamente
ahí en la
en la magia
entonces lo que quería llegar a hacer
era que al darle click
a una búsqueda
aquí pudiese recuperar
perdón
esto es una búsqueda
vale
entonces voy a quitar esto
esto es Hulk cabreado
entonces me gustaría que al darle al Hulk cabreado
aquí pudiese mostrar este GIF
entonces yo aquí
podría hacer una cosa
podría hacer una llamada a la API
para recuperar la información
de este GIF
podría hacerlo por supuesto
y tendría todo el sentido del mundo
pero entonces
no podría enseñaros
lo que os quiero enseñar
y me gustaría enseñaros
lo que os quiero enseñar
que básicamente
y seguramente esto
no os preocupéis
si no lo entendéis de primeras
o si os vuelve locos
y pensad también
que lo estamos haciendo
porque quiero
es un ejemplo pequeñito
donde tiene sentido
para que entendáis el concepto
vale
no es que a lo mejor
lo haría así
en la vida real
pero creo que es para que veáis
el concepto y cómo funciona
vale
que es el tema del contexto
básicamente el contexto
podríamos entender
que es un objeto mágico
que tiene React
y que puedes utilizar
en todos tus componentes
sin necesidad de que se le pase
ni por parámetro
ni por estado
ni por nada
o sea
inyectado
tienes que utilizar un Hulk
o puedes utilizarlo de otra forma
pero
el tema es
que es un objeto
que puedes acceder a él
desde cualquier parte
de tu árbol de elementos
desde cualquier sitio
entonces
en este caso
lo que me gustaría
es que como yo
este GIF
lo he visto
porque lo he visto
he visto al Hulk
yo lo que quiero aquí
es que con esto
que tengo aquí la ID
es recuperar ese GIF
y para poder recuperar ese GIF
vamos a tener que guardar el GIF
en algún sitio
y ese sitio va a ser
ese objeto mágico
que nos proporciona React
este objeto mágico
que ahora lo vamos a ver
con este ejemplo
de este GIF
y podemos empezar
a ver un ejemplo rápido
el tema
es que puede ser
un objeto
que no cambie nunca
por ejemplo
pues puede ser una configuración
vamos a crear aquí
una nueva carpeta
le vamos a llamar
context
y vamos a crear
el
por ejemplo
static context
por ahora
aquí
lo que vamos a hacer
es importar React
desde React
y aquí
pues vamos a crear
un contexto
y le vamos a llamar
React
create context
y lo que va a tener
este contexto
pues vamos a poner aquí
que tenga
pues un name
y vamos a poner
midudev
y
suscríbete
al canal
y vamos a poner
true
¿vale?
y ahora
esto
vamos a hacer un export default
del context
esto es lo que vamos a hacer
en este
en este fichero
tan sencillo como esto
ahora
en nuestra aplicación
vamos a importar
este contexto
lo que estamos haciendo aquí
que he ido un poco rápido aquí
¿vale?
es que importamos React
¿vale?
entonces hacemos React
punto create context
y aquí este
create context
lo que estamos diciendo
vale
este es el objeto mágico
que me tienes que crear
como valor inicial
¿vale?
como valor inicial
y como valor inicial
vamos a querer
que tenga el nombre
de midudev
y tenga
suscríbete al canal
este bolea
¿no?
esto es el valor
que tiene ese objeto
ese objeto
que vamos a querer
poder acceder
desde cualquier sitio
y aquí simplemente
pues lo estamos
exportando
contexto
perfecto
entonces
vamos a ir a la app
y en la app
lo que vamos a hacer
es importar
este contexto
porque el contexto
digamos que tiene
dos cosas
una
un consumidor
y un proveedor
¿no?
el contexto
tiene dos partes
uno para consumir
ese objeto
y otro para proveer
ese objeto
para decir
vale
este objeto mágico
¿dónde lo puedes utilizar?
pues en todo
lo que venga
rodeado
por este proveedor
ahora lo vamos a ver
más claro
por ejemplo
¿dónde quiero utilizar
este contexto?
vale
vamos a importar
este static context
vamos a llevar
static context
vale
pues esta es nuestra aplicación
como queremos
normalmente
el contexto
se hace
engloba
bastantes cosas
de tu aplicación
por lo tanto
en este punto
lo vamos a poner aquí
vamos a hacer
que toda nuestra aplicación
tenga la posibilidad
de utilizar
este proveedor
¿no?
así que lo que estamos haciendo
es que
todos los componentes
todos los componentes
que están
o todos los elementos
que están
por debajo
todos los elementos
que están por debajo
o sea
este elemento
este
este
las rutas
las páginas
todo lo que queda por debajo
todo lo que queda envuelto
por esto
tendrá acceso
a este objeto mágico
si yo esto
lo muevo
y lo pongo
por ejemplo
aquí
y lo otro lo muevo
pues quedaría más acotado
pero por ahora
quiero que esté
en todo
toda nuestra página
ahora aquí
ya me dice
que la propiedad
value
está faltando
que no entiende
que está pasando aquí
pues aquí
le tendríamos que decir
que valor
queremos que tenga
este contexto
ya lo hayamos hecho aquí
pero en el caso
de que no le pasemos ninguno
de hecho
esto debería funcionar
y lo vamos a ver
y si no
pues lo arreglaremos
pues en el caso
de que no
no le pasemos ningún valor
a este
a este provider
el valor
por defecto
tendrá
pues será este
será este valor
¿por qué se le puede pasar
el value?
porque
claro
cuando tenemos este provider
al final lo que vamos a querer
es que este value
vaya cambiando
o sea que puede ir cambiando
su valor
pero por ahora
no vamos a querer que cambie
ahora
muy bien
vamos a quedarnos aquí
en el detalle
y lo que vamos a hacer
en la página del detalle
es utilizar
este objeto
quiero acceder a la información
de este objeto
vale
pues si vamos al detalle
para poder acceder
a la información
de ese objeto
lo que tenemos que hacer
es utilizar un hook
que se llama
use context
y le tenemos que decir
cuál es el contexto
que queremos utilizar
cuál es el contexto
que queremos consumir
vale
o sea que
ya te acuerdas
que tenemos por una parte
el proveedor
¿no?
dónde queremos proveer
ese objeto
ese contexto
y por otro lado
dónde lo queremos consumir
pues lo quiero consumir aquí
así que aquí
vamos a importar
este static context
hacemos aquí
de este from
y vamos a buscarlo
en context
y static context
vale
ahora aquí
vamos a hacer
use context
y aquí le pasamos
como parámetro
el contexto
directamente
ahora aquí
en la constante context
deberíamos tener
lo que teníamos
en el objeto context
vamos a ver
si esto ha funcionado
vamos a guardar los cambios
vale
pues no ha funcionado
no pachana
vamos a ver
qué pasa
voy a comentar esta
porque sale aquí la idea
vale
está en define
el contexto
pero bueno
el static context
sí que está funcionando
porque si no
nos habría dado algún pt
y todo esto
pues si vamos a la app
y ponemos aquí el valor
si ponemos un objeto
vale
aquí en value
tendríamos que indicarle
el valor que tenía
o sea que no
simplemente le podemos poner aquí
el contexto este
y ya está
pues esto
que le estamos pasando aquí
vamos a poner aquí
el objeto vacío
y se lo vamos a pasar
por la app
aquí
vale
ahora
ahora me acuerdo
porque esto no funciona
y cómo debería ser el tema
vale
vale
si ponemos aquí el valor
este objeto
ahora sí que lo podemos ver aquí
vale
entonces
en realidad
el valor que le estamos pasando
a este contexto aquí
esto que le estamos poniendo aquí
ahora lo vamos a ver claramente
esto es
sin provider
y esto lo vamos a dejar dentro
vale
lo que pasa
es que cuando creamos el contexto
lo que le estamos poniendo aquí
como valor inicial
esto es en el caso
de que un consumidor
intente utilizar el contexto
y no tenga acceso
al contexto
porque no tenga el provider
o sea que si quitamos el provider
de aquí
por ejemplo
y guardamos los cambios
pues podemos ver
bueno
pues todo esto es provider
pero esto es sin provider
esto es
esto es
sin provider
vale
este sería el valor
que tiene ese objeto
si intentamos consumirlo
y no tenemos acceso
al contexto
así que
ahora que he quitado
el provider de la app
vale
pues entonces
este valor inicial
que le he puesto al create context
este de aquí
que esto es sin provider
es en el que
al que puedo acceder aquí
pero una vez
que utilizo el provider
estoy obligado
a pasarle un value
entonces
pues pongamos que
el value que le quiero pasar
lo que quiero que tenga el objeto
pues sea esto
vale
vamos a poner esto
para que quede mejor
entonces el valor
sería este objeto
si guardo los cambios
ahora lo que estoy accediendo
desde el detalle
sin cambiar nada
en el detalle
es el objeto
que le estoy pasando
al provider
entonces el detalle
él dice
yo quiero utilizar este contexto
que es el static context
yo quiero utilizarlo
yo no sé si tengo un provider
o sea
yo no sé si tengo acceso
a ese objeto
no lo sé
yo solo lo quiero utilizar
si tiene acceso
va a poder tener
la posibilidad
de leer este objeto
pero si no tiene acceso
pues lo que leerá
es el valor
que le hemos puesto aquí
por defecto
vamos a ver
vuestra cara de sorpresa
y seguimos con esto
vamos a ver
vamos a ver
alguien dice
vamos primero con esta
que dice Gilberto
si uso set location
voy a ponerme en primera persona
no tiene mucho sentido
que se vea todo el rato
la pantalla ahí
sin hacer nada
si uso set location
de Wooter
¿dónde puedo declarar
el componente
o el listado de componentes
en un switch?
¿lo tomo automáticamente?
sí
o sea
no necesitas switch
en Wooter
así que
tú realmente
ya funciona por defecto
como si fuese un switch
vale
no he podido llegar a tiempo
no pasa nada
Joseph
el msouri
no pasa nada
se queda grabado
y lo vas a poder ver
cuando quieras
tú y todos tus amigos
vale
¿se puede tener más de un context?
por supuesto
se puede tener más de un context
de hecho
puedes tener más de un objeto
que quieras leer
hablamos de objeto
aunque en realidad
está bien hablar de objeto
porque en realidad
el contexto en sí mismo
tiene que ser un objeto
vale
pero en realidad
como value
aquí como value
le puedes pasar lo que quieras
vale
no es que tenga que ser un objeto
sino que
hay que pensar conceptualmente
como que es un baúl
en el que guardas cosas
y puedes acceder
desde cualquier sitio
a ese baúl
si tienes la posibilidad
de tener proveedor
pues a ese baúl
te vendrá
con la información
del provider
y si no
te vendrá
con la del valor inicial
que tenga
puedes tener más de uno
y el tema aquí
que hay que tener en cuenta
es eso
que yo en la app
en el value
en lugar de un objeto
le puedo pasar lo que quiera
yo podría poner aquí un 2
y esto
bueno
pues ahora que pienso
igual sí que funciona
pero no le
igual no le gusta
no, sí, sí
sí que le gusta
al final el valor
puede ser lo que quieras
de hecho aquí puedo tener
aquí se ve
que en el detalle
ahora me ha devuelto
ay
ay que no se ve la pantalla
perdón
vale
si aquí al value
ahora le pongo un 2
vale
le he puesto al value
del provider
le he puesto un 2
bueno pues puedes ver
que al detalle
ahora le llega un 2
o sea que no hace falta
que se le pase como value
un objeto
solo que conceptualmente
pensad que el context
es un objeto
donde se le pueden guardar
diferentes cosas
y como se le pueden guardar
diferentes cosas
pues pensad que también
se le puede
puedes tener más de uno
o sea que
sin ningún tipo de problema
vale
pues
eso lo he dejado bien
así que sí
puedes tener más de un contexto
que más
context es como una implementación
del patrón contenedor presentador
bueno
no
sí
puede ser
puede que sí
es que depende
o sea
puedes hacerlo
como
como contenedor contenido
puede ser
pero a lo mejor
puedes romperlo
te permite hacerlo
te permite hacerlo
pero son cosas distintas
porque en realidad
tú puedes hacer
el contenedor contenido
sin utilizar context
por ejemplo
así que
yo no mezclaría
yo diría que sí
te permite lograrlo
pero también
lo podrías hacer
con un custom hook
como hemos visto
ahí hemos separado
el contenedor
que era la lógica
en un custom hook
y el contenido
lo hemos dejado
o sea que
bueno
puedes tener
Nicolás Santis
lo explica así
vale
sí
puedes tener contextos
diferentes en diferentes momentos
por ejemplo
un contexto para un carro de compras
y un contexto global
para el out
yo lo ocupo para out
y de esa forma puede identificar
si estás login o no
también
eso lo decía Adriano
pero sigue Nicolás
yo también lo uso para el local
por ejemplo
para el i18n
para internacionalización
oh Dios mío
internacionalización
eso
así la app completa
cambia el idioma
exacto
o sea es que al final
puedes tener un montón de contextos
de hecho
es bastante típico
ver aplicaciones
o librerías de terceros
que tengan incidencia
en toda tu aplicación
que necesiten un contexto
que envuelvas tu aplicación
con ese provider
por ejemplo
React Router
React Router
necesitas
necesitas envolver tu aplicación
con un provider
porque el React Router
internamente
necesita acceder a este objeto mágico
solo que
así es como funcionan
sus hooks
por ejemplo
¿no?
toda esa información
viene de ese contexto mágico
así que
muchas cosas
utilizan
por detrás de esto
sin darnos cuenta
vale
también puedes pasar el value
y exportar el provider
con el value ya dentro
efectivamente
y de hecho lo vamos a ver
¿qué más?
yo lo que suelo pasar
dentro del contexto
es un useState
pues lo vamos a ver también
al importar useStaticContext
no se podría importar
context a secas
que es el export default
y hacer context.provider
sí
de hecho
es que cuando
un export es default
lo que estamos haciendo aquí
por ejemplo
este
me comenta esto
¿no?
oye no podríamos
aquí en lugar de static context
podríamos poner context
por supuesto
o sea este context
en realidad
es que esto se llama context
y es que el problema
que tienen los export
bueno ahora me he cargado
a este
se me ha olvidado este
vale
el problema que tienen
los export de default
es que se pueden llamar
cuando no te la gana
aquí lo podemos poner
pepito
y pepito
y pepito
y ya tenemos
un pepito de contexto
anda
¿qué nos parece?
a ver
¿qué más tenemos por aquí?
perdón
¿para qué sirve el contexto?
bueno
si no te ha ayudado
lo que he dicho yo
y lo de Nicolás
pues piensa
que es una forma
de poder
inyectar
información
en cualquier parte
de tu árbol
de elementos
de tu aplicación
de React
sin necesidad
de tener que ser
inyectada por props
sino que dices
quiero utilizar este contexto
desde cualquier sitio
y puedo acceder
a esta información
eso sería
básicamente
sirve para eso
¿no?
para poder acceder
a una información
que digamos
que esa información
ahora se hace
de repente global
y esto
además
ya podéis imaginar
que la gracia
de todo esto
es que vamos a tener
la posibilidad
de hacer un estado global
con esto
fácilmente
¿vale?
más que un objeto
es un recurso
que ofrece React
mediante el cual
provee un objeto
que puede alterar
y al que te puedes
suscribir
desde cualquier elemento
interno
del que lo declare
el tema
es que es un poco complejo
cómo funciona el contexto
¿no?
porque el contexto
al final
en realidad
es una referencia
que se queda ahí guardada
y para ser una referencia
tiene que ser un objeto
o sea
internamente
es un objeto
¿vale?
entonces
lo que está haciendo React
y de hecho
muchas veces
da problemas
los contextos
porque si intentas
linkar un contexto
cuando tienes dos referencias
diferentes al mismo contexto
peta
y te da problemas
y esto es
un error muy típico
que da muchos quebraderos
de cabeza
entonces
tiene que ser
la misma referencia
¿vale?
porque se tiene que
se tiene que ser
tiene que ser
la misma referencia
¿vale?
hasta aquí
sí
ya hasta aquí
todo contestado
creo
vamos a intentar
a ver
el tema
de
de hacer esto
lo bueno del contexto
es que nos da la oportunidad
de hacer
estados globales
¿vale?
y es algo parecido
a lo que podríamos conseguir
con Redax
y de hecho
a partir del contexto
puedes hacer
un Redax
hoy no lo vamos a hacer
nos da tiempo
pero
sí que podemos ver fácilmente
este problema que teníamos
¿no?
del GIF
pues a ver si somos capaces
de algún sitio
guardar
los GIF
y recuperarlos
en este punto
así que
ahora a ver
como me
bueno voy a dejar
el pepito
el pepito provider este
lo voy a dejar por aquí
¿vale?
lo que sí que voy a hacer
es crear otro contexto
que le vamos a llamar
GIF
context
provider
o bueno
GIF context
GIFs
GIFs context
vale
entonces aquí pues lo mismo
y así pues vamos a ver
el ejemplo de tener
dos contextos
funcionando en la misma aplicación
hacemos un import
de React
y aquí lo que tenemos que crear
es el React
punto
create
context
creamos el contexto
y ahora
podríamos hacer
export default
context
esto
es exactamente lo mismo
a lo que hemos hecho
con el static
¿no?
es pum
lo mismo
pero ¿qué pasa?
que así
lo que estaríamos haciendo
en el context
es devolver
tanto el consumidor
como el provider
pero lo que podemos hacer
es crear nuestro
propio provider
podemos decir
vale
el consumidor
es el que es
o sea por defecto
es el mismo
porque no tiene mucha más magia
pero el provider
que es en el que
tenemos el value
podríamos crear
el nuestro propio
¿no?
y que en el value
metamos la información
que nos interesa
así que
lo que podemos hacer
es un export function
y la función
que vamos a devolver
sea
gives context
provider
vale
entonces
el provider
lo que tiene que devolver
es
lo que tiene que
le llega de las props
es children
que básicamente
es lo que va a envolver
ahora
lo que tenemos que hacer
aquí dentro
lo que queremos que haga
por ahora
podríamos
hacer exactamente
lo que ya hace
¿no?
sería
o sea esto sería
ahora mismo
hacer
ponerle un nivel
de complejidad
que no añade
absolutamente nada
pero sería
pues algo así
¿no?
decir vale
pues aquí me devuelves
el children
y aquí pues le ponemos
la información que queramos
por ejemplo
le podríamos poner
los gifs
¿no?
podríamos ponerle aquí
pues los gifs
podríamos crear aquí
una
una constante
a ver
que sean los gifs
y
sí
los gifs
y esto es
lo único que va a tener
ya está
¿no?
entonces aquí lo que hemos
hecho es
envolver el provider
con un provider nuestro
¿no?
y que ya pues tenga
de valor
pues un gif
por defecto
aquí es donde
viene un poco la magia
este gif
lo que podríamos hacer
es que sea
un useState
de forma
que tengamos aquí
tanto el valor
como la forma
de actualizarlo
y el useState
tenga por defecto
pues una ribacía
aquí vamos a poner
el useState
y
vale
nos dice
el setGif
pues no lo estamos
utilizando
lo cual
tiene bastante sentido
así que lo que vamos a hacer
es tener esto
y pasarle
esto
lo podríamos
bueno
esta
la puede liar parda
luego veremos
seguramente en algún momento
petará esto
porque no
porque no funcione bien
y tiene una explicación
bastante interesante
¿vale?
pero por ahora
lo vamos a dejar así
ya tenemos el
gif
context provider
ahora
esto
vamos a decir
que el proveedor este
solo para que sirva
de ejemplo
igual que este
lo envolvimos toda nuestra aplicación
pues vamos a decir
que este provider
de los gif
solo
se pueda utilizar
aquí en las rutas
¿vale?
y guardamos los cambios
vale
me ha petado
miserablemente
porque
no estoy utilizando
el contexto
de hecho
este gif
context provider
es nombrado
así que tenemos que importarlo
de forma nombrada
desde
el context
context
aquí
hasta
gif context
gif context provider
y guardamos los cambios
y todo parece funcionar bien
hasta aquí
¿no?
todo parece que va bien
hemos añadido
este gif context provider
que voy a añadir esto aquí
este gif context provider
está
envolviendo
todas nuestras rutas
o sea que
todas nuestras rutas
va a tener acceso
todo lo que está dentro
de nuestras rutas
esta parte
de nuestra aplicación
va a tener acceso
a lo que hayamos hecho
en este provider
ahora en el detalle
de la misma forma
que estábamos utilizando
el context anterior
pues gif context from
y ahora
tomamos este contexto
gif context
perfecto
ahora
este context
lo vamos a llamar
static context
o static
vamos a dejarle static
solo para que veamos
que podemos utilizar
los dos
hay static
es una palabra
reservada
se la han guardado
static
static
config
vamos a poner
static config
static config
static config
y ahora
pues vamos a utilizar
este gif context
vamos a tener gifs
vamos
gif context
gif context
use context
y utilizamos esto
y hacemos un console log
del gif context
aquí en el detalle
y guardamos los cambios
y vemos que no queda nada
vale
vale
pues ya en el detalle
tenemos este acceso aquí
¿no?
esta información
tenemos gif
es una red de cero
y tenemos aquí
una función
que es esta
que nos serviría
justamente
para actualizar
el estado
o sea que ya tenemos
una forma
de actualizar
el estado
o sea que
ya tenemos una forma
tanto
de leerlo
como de actualizarlo
desde el detalle
o sea estoy yo
en el detalle
y ya podría hacer eso
en el detalle
por ahora lo que nos va a importar
solo es recuperar los gif
así que lo que voy a hacer
es esto
y voy a poner aquí
gif
de forma que
tenemos este arriba
cio
este el static config
si no os importa
lo voy a quitar
porque no tiene mucho sentido
que está aquí
así que por ahora
tenemos un arriba cio
que son los gifs
del detalle
pero vamos a ir
trabajando y siguiendo
con esto
para ver como
lo podemos solucionar
a ver que os leo
os leo rápidamente
gracias ya lo busco
otro que estaba preguntando
que como
cuál es el
cuál es el plugin
la extensión que utilizo
en mi editor
error lens
error lens
error lens
se podría usar
un hire del component
para devolver un provider
con valores por defecto
sí
sí que se podría utilizar
un hire del component
porque al final
un hire del component
devuelve un componente
podría ese componente
ser el que hemos creado
o sea que sí
podrías hacerlo
que más
la principal ventaja
es solo que no tienes
que estar pasando
props de componente
a componente
no solo
Alberto
sino que además
esa podría ser
un caso de uso
que no quieres pasar
una prop hacia abajo
que es el prop drilling
aunque normalmente
existen alternativas
para evitarlo
pero podría ser
utilizar contexto
para evitar eso
también se puede utilizar
para tener
esta especie
de estado global
y comunicar componentes
no solo pasarle
una prop hacia abajo
sino que imagínate
que no puedas
pasarla hacia abajo
porque lo que ocurre
en un componente
sea lo que le interesa
a un primo
que no es
un primo no
bueno
que no están
en el mismo
en el mismo árbol
sino que tienes que
volver demasiado
demasiado arriba
como para que estén
en la misma
en la misma rama
entonces se puedan comunicar
así que
puede ser también
para eso
comunicación de componentes
o reflejar cambios
que un componente
tenga para el otro
Redax es más escalable
¿no?
¿cuál es la diferencia
entre Use Context
y Redax?
Y Jürgen dice
que Redax es más escalable
si es una app chica
anda por Use Context
la verdad
en mi opinión
es que
Redax
yo utilizaría
Use Context
para aplicaciones pequeñas
y Redax
la utilizaría
para aplicaciones
medianas
medianas
para aplicaciones
grandes
seguramente
no utilizaría
ninguna de las dos
porque
es verdad
que Use Context
puede ser que le cueste
escalar
aunque al final
lo puedes hacer
muy similar
a como escalaría
Redax
si utilizas
las buenas prácticas
y utilizas Redusers
y básicamente
te copias
Redax
pero utilizando
Use Context
lo que puede tener
impacto en la performance
eso sí
que habría que
solucionar
demasiado detalle
pero Redax
a lo grande
grande
al final
seguramente
pues tiene soluciones
mucho mejores
como las que utiliza
Facebook
que es Relay
o cosas similares
incluso
React Apollo
a la hora de no tener
un estado global
porque te quita mucho
la necesidad de tener
un estado global
porque te lo hace
gratis
así que
para grandes
grandes
eso
Relay
React Apollo
eso sería mi opinión
más que nada
para evitar
este tipo de
Redax
al final
bueno
¿cuánto tiempo
se hace este live?
cada semana
cada semana
a la misma hora
¿qué más?
¿qué más?
error lens
error link
son diferentes
bueno
vale
pues
dice
¿cómo hago para autorizar
los estados de cualquier componente?
ahora lo miramos
aunque no es de cualquier componente
¿vale?
¿ves buena práctica
mezclar hooks
con componentes clases?
claro
por supuesto
Christopher
o sea
está bien
está bien
no pasa nada
en el mismo componente
no puedes
porque los hooks
no se pueden utilizar
en componentes de clase
pero es normal
tener componentes
que sean clases
y que
otro componente
sea la función
no pasa nada
o sea
es lo bueno
que tiene React
¿vale?
¿qué más?
MobX
también
se puede usar
en app grandes
MobX
también me gusta más
que Redax
aunque
de verdad
creo que
Relay
para aplicaciones
realmente grandes
¿vale?
porque es que habría que entender
que hablamos de grandes
pero un Facebook
por ejemplo
bueno
pues vamos
vamos a seguir
¿vale?
entonces
entonces tenemos aquí
este detalle
tenemos el set state
pero aquí
esto sería para
para leer
el detalle
lo que queremos
es que cuando tenemos
la información
esta
la
realmente el contexto
se actualiza
porque si no
¿para qué queremos esto?
lo podemos leer
pero no lo podemos
actualizar
¿no?
entonces
lo que vamos a hacer
es pasar
cierta lógica
que tenemos
en el custom hook
solo cierta lógica
bueno
en realidad
tampoco tanta
nada
nada
lo que pasa
es que
esto necesitaremos
utilizarlo en el custom hook
vamos a ver
cómo es esto
entonces
teníamos aquí
el valor
que le estábamos pasando
podríamos dejarlo así
lo que pasa
es que esto
me huele a mi
la nariz
que va a dar problemas
de hecho
seguramente
lo voy a dejar así
pero estoy bastante seguro
que va a dar problemas
por un tema
que luego
es bastante interesante
y bueno
vale
entonces
custom hook
en el
contest provider
a ver
no encuentro
mi
custom
el custom hook
este
eso
usegif
lo que podemos hacer aquí
en el usegif
antes
lo que estamos haciendo
es utilizar
el setgifs
que era para actualizar
el estado local
de este hook
claro
esto aquí está bien
pero ya que estamos
utilizando este
usegif
de esta forma
lo que podríamos hacer
es que en lugar
de actualizar
el estado local
lo que actualizase
fuese directamente
el estado global
así que
lo bueno de los hooks
y los custom hooks
es que dentro de un hook
puedes utilizar otro hook
así que lo que vamos a hacer aquí
es importar
el hook
useContext
y aquí en useContext
lo que vamos a utilizar
es el contexto este
que es
gifsContext
y esto lo vamos a utilizar
de
context
gifContext
vale
ahora
en lugar de tener
este estado local
lo que vamos a hacer
es utilizar
mira vamos a hacer primero
que ahora estoy bastante seguro
que esto nos va a dar
un problema ya después
pero
esto además
va a ser interesante
vale
esto va a ser del useContext
el gifContext
vale
entonces
gif
setGif
y esto sería
simplemente
lo que deberíamos cambiar
claro
lo que sí que es verdad
es que
ahora
setGif
es una dependencia
por eso nos lo ha añadido aquí
porque setGif
ahora
viene del contexto
y por lo tanto
cada vez que cambie
el valor de setGif
este efecto
se va a ejecutar
y esto seguramente
no va a dar problema
entonces
vamos a volver para atrás
y vamos a ir
vamos a ver
si esto
nos va
nos va a guardar
la información
y todo esto
entonces
tenemos aquí el contexto
hacemos setGif
y aquí en gif
tenemos lo que tengamos
que tener
y lo devolvemos
vale
vamos a ver aquí
si yo busco aquí
por ejemplo
vamos a ver si esto
me está
bueno
funcionar está funcionando
porque la home ha funcionado
supongo
Avengers es lo mismo
que he buscado la última vez
Matrix
pues vemos que funciona correctamente
y si entro al detalle
podemos ver
que tengo
el array de list
el array de list
del que venía
o sea
que he guardado
cuando estaba en la búsqueda
como he llamado
a este setGif
a este setGif
a este setGif
este setGif
ya no es el del local state
sino que hemos llamado
setGif del contexto
entonces
el contexto
lo que hemos hecho
en el provider
vamos a ir al
give context
aquí en el provider
lo que hemos hecho
es que este provider
tenga un estado
de esta forma
este objeto
que teníamos
o este recurso
que lo había llamado
Andrés
o como le quería llamar
o esta referencia
o este baúl
el contexto
lo que hemos podido hacer
es cambiar el valor
que teníamos en el contexto
de esta forma
en give
ahora lo que tenemos
son los give
que hemos guardado
en este estado local
del provider
así que
estamos consiguiendo
tener un estado global
y lo estamos leyendo
en un sitio
totalmente distinto
ahora en el detalle
tenemos acceso a algo
que antes no teníamos acceso
y eso es lo realmente interesante
ahora en el detail
lo que
en el detail
que está aquí
lo que podríamos llegar a hacer
es básicamente
una vez que tenemos los give
y tenemos el parámetro
en los give
lo que podemos hacer
es decir
bueno pues
recupérame
de los give
me buscas
el give
que
vamos a ver
como son los objetos
id
que la id
sea igual
al que
tengo en el parámetro
que sea
el parámetro
es params
punto id
así que
ahora
en este give
console
log punto give
lo que pasa
es que esto
ahora veremos una cosa
que es bastante tricky
claro
porque cada vez que refresquemos
se va a perder
no estamos teniendo
este estado
no se está guardando
en ningún sitio
y de hecho
esto lo que
es interesante
es tener un fallback
de que si no lo tenemos
disponible
lo que hagamos
es pedirlo realmente
al servidor
llamar a la API
o lo que sea
así que lo que ahora
siempre tenemos que hacer
es navegar para atrás
volver para atrás
y ir para adelante
y entonces sí
tenemos aquí la información
ahora este give
que tenemos aquí
lo podemos
utilizar
nuestro componente
give
vale
que title
id url
o sea este es el componente
que ya
muestra un give
vale
vamos al detalle
vamos al detalle
y aquí
tendríamos
pues toda la información
del give
podemos hacerlo así
si os gusta
pues lo hacéis así
aquí importamos
give
desde
componentes
give
y
claro
no sale nada
pero si entramos aquí
pues ya tenemos
nuestro give
de esta forma
lo que hemos conseguido
por supuesto
la idea sería
que si entra
si ahora refrescamos
no sale
porque se desaparece
esa referencia
que tiene en memoria
react
para tener ese contexto
pum
desaparece
ya no está
podríamos hacer un montón de cosas
podríamos guardar
por ejemplo
en local storage
esa información
para tener como una caché
podríamos tener eso
y además
tener un fallback
que si no tiene la información
vaya a buscarla
al detalle
al detalle
a la API
pero esto lo que nos ha permitido
fácilmente
es tener un estado global
porque una información
que teníamos
en la parrilla de búsqueda
o en la home
incluso
yo estoy en la home
y ahora directamente
voy a un detalle
y tengo ya esa información
y de dónde ha salido
esa información
pues básicamente
de ese estado global
que hemos creado nosotros
así que
esta es un poquito
la magia
que tiene el contexto
seguramente
en este ejemplo
no sea la mejor práctica
del mundo
pero sí
que
esto lo que te permite
de alguna forma
es fácilmente
poder comunicar componentes
poder compartir
un objeto
que sea global
tener un estado global
y esto puede ser tan útil
con esto
pero como
para otras cosas
así que
vamos a ver
que me comentáis
por aquí
si en una aplicación
tengo muchas modales
la cual tengo que acceder
a ellos en diferentes componentes
que me conviene
use context o redax
por ejemplo
bautista
ese me parece un buen ejemplo
yo empezaría con redax
ay con redax
con use context
vale
yo empezaría con use context
y a lo mejor
incluso puedes utilizar
use context
para algunas cosas
y redax para otras
a mí
las modales
me parecen justamente
un caso muy claro
para utilizar use context
y no volverte loco
¿podrías tener tantos context
que parezcan un callback?
un callback hell
sí
lo podrías tener
pero hay formas
de solucionar eso
de hecho aquí
bueno
aquí ya tenemos
como un callback hell
y te puede pasar
¿no?
de tener un provider
un provider
un provider
pero bueno
lo que puedes hacer
al final
es un reducer
puedes reducir
puedes pasarle
por parámetro
puedes hacerte
como un high order
component
súper sencillo
que se vea
mucho más legible
y le pasas un array
de providers
y al final
pues te los inyecta
todos
sin necesidad
de hacerlo así
si tienes dos
como es este caso
pues lo haces así
y si empiezas a tener más
pues te puedes buscar
lo del reducer
a ver que más
que más
que más
que más
si no fuera
¿ves buena práctica?
no
esto ya lo he leído antes
próximo stream
suspense y lazy
vale
pues venga
le doy
me parece bien
suspense y lazy
si en una aplicación
nada
esto ya lo he leído
podrías tener también
podrías hacer un hook
que renderice el componente
que queda dentro de la modal
y solo tener uno
exacto
perfecto
ahí está
¿qué más?
¿qué más?
todos los componentes
reaccionan a ellos
tengo que con esto
vale
dice Alberto Jauregui
entiendo que con esto
estamos ahorrando
hacer más peticiones
para devolver algo
que ya tenemos
a ver
entonces
en realidad
si
lo estamos utilizando
para esto
pero lo puedes utilizar
para un montón de cosas
en este caso
si nos estamos ahorrando
¿por qué?
nos estamos ahorrando
esa llamada
porque es información
que ya tenemos
en la aplicación
¿no?
y no tiene sentido
como tal
volver a buscar
esa información
cuando ya la tenemos
piensa en este caso
que además me parece
muy interesante
está el caso
en el que
para tener una experiencia
súper rica
imagínate que este GIF
necesites todavía
más información
como por ejemplo
número de descargas
más estadísticas
información del creador
¿no?
necesitas más información
pero
como de guay es
que tú estés
en la parrilla de búsqueda
dices vale
este GIF
le das
y sea instantáneo
que ya ves
pues la página
del detalle
construida
¿no?
y mientras entras
sigues descargando
la información
que todavía no tienes
pues para eso
eso es un buen caso
de uso
es algo que se utiliza
mucho
creo que hace
por ejemplo
Twitter
Twitter creo que hace esto
que si estás en un tweet
pues tienes esa información
y cuando lo expandes
pues ves el mismo tweet
súper rápido
porque claro
esa información ya tienes
y luego descarga
sus conversaciones
los replies y tal
entonces
claro que sí
Daniel de la Cruz
de que
¿qué te da realmente Redax?
que no te dé un use context
y un use reducer
pues esa es una muy buena pregunta
y en mi opinión
realmente te da muy poco
a ver
sí que te da
por ejemplo
el hecho de evitar
re-renderizados
no deseados
el problema que hemos visto ahora
es que cualquier cambio
que ocurra
en el GIF
en el contexto del GIF
va a hacer
que se vuelvan a renderizar
los componentes
entonces
te obliga
si no te importa
los re-renderizados
no pasa nada
pero
te obliga
a que los contextos
sean más pequeños
¿no?
te has que dividir
los contextos
por objetos
que tengan sentido
aunque hay gente
pues que coge un contexto
y ahí tiene un objeto enorme
pero claro
no es una buena práctica
pero el tema
es que si lo separas bien
bueno
pues lo pueden minimizar
pero aún por más que lo minimices
es posible
que solo querías escuchar
una propiedad
de ese objeto
¿no?
que tenías
claro
si tú cambias cualquier cosa
al objeto
pues en este caso
va a volver a re-renderizar
el detalle
se podría llegar a solucionar
pero ya tendríamos que hacer
un trabajo
más manual
que eso
claro
Redax
lo tiene solucionado
de fábrica
digamos ¿no?
porque eso pues tienes los lectores
y luego tienes que decirle
no solo quiero que me inyectes
esta prop
entonces todo esto
ya lo tienes solucionado
por lo tanto
sí que es verdad
que hay algo
que sí que te da
pero considero
que hay veces
que puedes encontrar
soluciones intermedias
y que no necesitas
utilizar Redax
que
quieras o no
te obliga a tener
cierto boilerplate
y no es una librería
que esté dentro
del core de React
es Ismael Ramón
Barcones
ojalá hubiera podido
escuchar tu explicación
cuando aprendí a lo que es el contexto
ay pues me alegro un montón
que te haya
que te haya servido
que te haya parecido
que lo he explicado bien
porque creo que es un concepto
muy complejo
y que la gente se vuelve
muy loca
así que muchas gracias Isma
te mando
un abrazo además
Adri Navarro
grande
dice
JG
esa información que ya tenemos
en el contexto
¿es aplicable a SSR?
sí
en server site
funcionaría exactamente igual
¿cuál es el problema?
cuando desde server site
la quieres enviar
también al cliente
ahí tienes que hacer
un proceso
de enviarlo
como un string
dentro de tu HTML
que es algo que hace ya
Redax exactamente igual
pero se podría conseguir también
se podría hacer
que fuese universal
que funcionase
tanto en el servidor
como en el cliente
pero en el servidor funciona
no hay ningún tipo
de problema
y puedes utilizar el contexto
sin ningún tipo de problema
pero si lo que tienes
en el contexto del servidor
lo que pasa al cliente
ahí sí necesitas
trabajo manual
que es de lo mismo
que hace Redax
¿puedes exponer algún caso
de uso más
del use context
aparte del que has comentado
de Twitter?
me dice Mr. Alshu
en realidad es que hay un montón
o sea cualquier cosa
mira
se me ocurre otro
que sea
los colores
o el tema
de tu
el tema de tu
el tema de tu
aplicación
imagínate que tu aplicación
pues puedas tener
diferentes colores
de tu aplicación
que puedas ir cambiando
los selectores
de los colores
o que los colores
cambien
porque pase cualquier cosa
o yo que sé
o de
de eso
que le puedas cambiar
el color primario
pues hay un montón de páginas
que tienen una configuración
que tú puedes decir
vale
enseñanlo con este tema
o con el otro
pues al final
si tuvieses un sistema
de colores
por tokens
o por variables
esas variables
pueden venir del contexto
y ese contexto
se podría modificar
utilizando este sistema
por ejemplo
otro más
imagínate uno muy sencillo
y lo han comentado antes
el i18n
podríamos hacer un i18n
donde tú tienes ese objeto
en el contexto
con todas las traducciones
y ese contexto
ese objeto
podrías acceder
desde cualquiera
de tus componentes
sin necesidad
de tener que inyectarlo
además
cuando cambias
el idioma
pues pasa de inglés
a español
pues imagínate
ahí de repente
pues podrías cambiar
el estado
de ese contexto
y tener
otro objeto
que de repente
todos tus componentes
se volverían a renderizar
con la información correcta
que sería
un caso bastante
típico
la verdad es que
hay muchos casos
lo que sí que es importante
es no
no hacerlo mucho
¿vale?
evitar a toda costa
que
no llenar
y poner el contexto
en todos los sitios
¿vale?
porque
normalmente
ya cuando pones
en muchos sitios
es una mala práctica
así que hay que tener cuidado
¿vale?
¿Reacmemo
no solucionaría parte
de los render indeseados?
sí, Andreas
lo haría
pero por eso digo
que ya te requiere
hacer un trabajo
más manual
¿no?
ahí necesitas
afinar
ya tienes que afinar
manualmente
este es el tema
¿no?
que digo que
sí, podríamos hacerlo
en React Memo
podríamos ir haciendo
pero
claro
ya
entonces pierde
tanta
la gracia
bueno
se puede
lo importante
es que se puede
así que
si lo veis interesante
yo empezaría
con eso
totalmente
vale
¿qué más?
me encantaría saber
cómo mejorar
la performance
con React
gracias
mi dudé
grande
eso sí que me da
para vídeos
eso me da
para muchos vídeos
¿qué más?
¿qué más?
¿esto le gusta
o no le gusta
a Dan Abramov?
sí que le gusta
a Dan Abramov
de hecho
a Dan Abramov
lo que cada vez
le gusta menos
es Redux
y eso que era él
el que lo hizo
así que
imagínate
pues
¿qué más?
¿qué más?
use translation
sí
se podría hacer
un custom hook
de hecho
sobre esto
que hemos hecho
podríamos hacer
un custom hook
incluso
para no tener
que utilizar
el use context
¿sabes?
al final
y esto es muy sencillo
pero es bastante interesante
mira
con esto
vamos a terminar
y antes de terminar
os recuerdo
a todos los que estéis en chat
dadle like
al vídeo
que eso me ayuda
un montón
además veo que
hay dos personas
que le han dado dislike
¿por qué no les ha gustado?
vamos a buscarles
ahora mismo
¿dónde está esa gente?
seguro que es gente
que le gusta Redux
sí
seguro que es eso
vale
antes de
antes de terminar
vamos a hacer este
que no tengo nada
en contra de Redux
ahora la gente
no tengo nada
en contra de Redux
pero tiene un punto
en el que
en el que sí que tiene sentido
y hay que tener cuidado
con Redux
en mi opinión
vale
vamos a terminar
haciendo un custom hook
rápidamente
solo para que veáis
que en realidad
esto debe hacer
un use context
que te devolve el gif
esto es súper sencillo
de extraerlo
¿vale?
o sea
en lugar de
de tirar
de importar el contexto
y hacer un use context
normalmente
una buena práctica
sería
crear un custom hook
global
gifs
punto js
y en lugar
bueno
aquí teníamos dos cosas
una
que este custom hook
el use gif
en realidad
ya nos estaría dando
los gif
que vienen globales
o sea
que en lugar
de utilizar
este detalle
en lugar
de utilizar
en el detalle
el use context
podríamos utilizar
perfectamente
el contexto
este
el hook
que ya tenemos
y ya no funcionaría
perfectamente
pero solo para que lo veáis
y aunque sea
para que
para que entendamos
un poco
cómo funciona esto
de extraer algo
un custom hook
lo vamos a hacer otra vez
pero solo para que
lo veáis
funcionaría utilizar este
porque ya está
tirando
de exactamente lo mismo
pero es que
hacer un
un custom hook
que lea un contexto
al final
es muy fácil
y de esta forma
pues puedes evitarte
tener que mezclar cosas
y tal
o sea que
puedes tener
un use global context
al gif
gif
y que esto
te lea directamente
como hacemos
en el detalle
igual que en el detalle
pues estamos leyendo
el contexto así
y esto solo
te devuelva
la posibilidad
de leerlos
que esto puede ser
una buena práctica
el tener separado
cómo se lee
y cómo se actualiza
esto es una buena práctica
pero en este caso
pues podríamos hacer esto
tener el
use context aquí
tendríamos el contexto
y básicamente pues
que solo devolvese
los gif
y de esta forma
digamos que
ahora sí tenemos
un custom hook
que lo único que hace
sería devolvernos
los gif
y sin la oportunidad
esto ya lo he importado
perdón
vale
property gif
vale
y este use global gif
lo vamos al detalle
y en lugar de importar
el contexto
y en lugar de tener
el use context
lo que haríamos
es importar
el use global gif
desde los hooks
use global gif
y este use global gif
además
ya no tenemos que pasarle
ningún tipo de información
ni nada
o sea que sería así
esto
he hecho que sea función
a ver que
he petado algo ya
que he petado
en find
bueno claro
porque
a lo mejor he hecho aquí
que
use gif
a ver el detalle
detail
que he hecho
vale
es que esto ahora
no es un objeto
sino que directamente
tendría que ser así
ahora cuando buscamos
y le damos aquí
pues funciona perfectamente
lo interesante es eso
que hemos hecho
un custom hook
que lo único que hace
es devolver esta información
que teníamos
y ya está
y a mí esto
pues me parece muy interesante
creo que es una buena práctica
tener hooks
que solo sean de lectura
imaginemos
por ejemplo
una cosa que puede ser interesante
no es el caso
pero
podríamos tener
una forma
esto lo hace
real router
y está bastante guay
cuando vosotros veis esto de
los hooks
por ejemplo
use location
y el use router
tenéis el use location
use router
y todo esto
cuando utilizáis esto de
de router
o real router
o esto
vais a ver lo que está haciendo
lo que está haciendo
en realidad
sería
bueno vamos a olvidarnos
de lo de arriba
pero para que lo veamos
vale
estaría haciendo algo así
importar
el router context
de router context
y está haciendo
esto
está haciendo
un retón
de use context
router context
punto location
para que veáis
lo que está haciendo
en realidad
por dentro
real router
para tener
custom hooks
de cada uno
de router
y history
ala
ahí tenéis
os puedo asegurar
bueno
no me la voy a jugar
vale
no me la voy a jugar
pero os puedo asegurar
que esto
debe ser código
de producción
de real router
de la última versión
para tener
los custom hooks
que utilizamos
todo el mundo
o sea
algo tan sencillo
como esto
que al final
es eso
pues es tener
el use context
leer el contexto
y como el contexto
tiene el objeto
del router
ahí tiene la información
de la localización
bueno
location
el objeto router
y el objeto history
y te la está devolviendo así
¿qué pasa?
que tú luego
pues anda
que no es bonito
que hagas esto
y ya utilices el router
pero al final
está haciendo exactamente esto
así que
a veces creemos
que tienen las cosas
mucha magia
pero muy similar
a lo que hemos hecho aquí
al final
esto que hemos hecho aquí
sería exactamente lo mismo
use context
punto gif
solo accedemos al gif
y esto es lo que devolvemos
pues
ya tendríamos
una forma de leer
el contexto
super bonita
sin la posibilidad
de actualizarlo
por si no queremos
solo leyendo una cosa
tan concreto
del contexto
y de una forma
pues bastante más
más cómoda
a ver que me comentáis
que me comentáis
por aquí
¿puedes enseñar tus módulos
de visual?
sí, sí
vale
puedo enseñarlos
puedo enseñarlos
vamos a ver
editor config error lens
sling
git lens
ah bonito git lens
import cost
y one dark pro
creo que son los mejores
bueno
sbelt
version lens
¿por qué tengo dos de esto?
yo creo que uno sobra
pero ya está
no tengo más
me gusta tener poquitos
solo que tengo los buenos
como tiene que ser
espero que te haya servido
Jorge
¿qué más?
hay una expo
buenísima
sí
hay un artículo
buenísimo
de Kenzie Dots
que habla de buenas prácticas
para utilizar el contexto
que os recomiendo
mucho
que es Kenzie Dots
mira
si es que
no falla
este artículo es muy bueno
lo dejaré en los comentarios
porque
bueno
tiene un patrón
bastante interesante
a la hora de
de separar
el consumo
bueno
cómo actualizar ese estado
y cómo consumirlo
y puede estar bastante guay
así que
os lo
lo compartiré
que básicamente
es con la idea esa
¿no?
de básicamente
siempre
consumir el contexto
utilizando un hook
que tiene sentido
que es como habíamos dicho
¿cómo comparto los módulos
entre diferentes proyectos?
pues los publico en MPM
y ya está
me pregunta Omar MX
eh
desde aquí
os pido
que le deis
like al vídeo
que os suscribáis
si no estáis
que comentéis
pues que me digáis
que os parece
si no os ha parecido bien
pues nada
no comentéis
no hace falta
no es importante
supongo que la gente
que senta
que me he metido
con Redax
que no me he metido
con Redax
que en realidad
me gusta
solo que bueno
que lo sea
no esto con vosotros
sobre mi experiencia
eh
que me ha gustado mucho
estar aquí
que creo que ha salido
bastante bien
teniendo en cuenta
el tema
que me encanta
que participéis
y que estemos hablando
aquí de un montón de cosas
aunque a veces
me metéis ahí
frascas
unas preguntas
que no tienen nada
que ver con el tema
y me
y me volvéis loco
pero
pero de verdad
que me gusta muchísimo
pasar estos momentos
con vosotros
así que
nada ya
lo mismo
que estéis bien
que os cuidéis mucho
que nos vemos en el siguiente
voy a intentar
la semana que viene
paginación
lazy load
y suspense
vale
ya que os lo habéis pedido
me parece muy interesante
vamos a ir con ello
también crearemos
un custom hook
para
ya tengo la idea
de como lo vamos a hacer
me parece
me parece interesante
de como lo vamos a hacer
vamos a utilizar
también un custom hook
que llamaremos
use near screen
y creo que eso puede ser
el tema
y más adelante
pues
me gustaría hacer
algún login
algún register
tengo un amigo
que es un crack
con esto
que se llama
Daniel Lea Cruz
igual le engaño
a distancia
porque
ahora no podemos
estar muy cerca
Christopher García
gracias a ti
mi dudef
no gracias a ti
por estar
muchas gracias
sobre todo a los que repetís
ya os voy conociendo
que me parece súper guay
Nicolás
gracias
buen fin de dice Jorge
azul marino
ye
Roberto Suárez
son lo más loco
de Christopher García
si te entra
use callback
Roberto Suárez
suerte
azul marino
Alfonso Datix
muchas gracias
genio
muchas gracias a todos
por haberme acompañado
en una sesión más
nos vemos pronto
seguid en el canal
que este fin de semana
voy a subir un vídeo
muy interesante
sobre por qué uso
punto y coma
a ver si así
pues puedo convencer a alguno
sé que me voy a ganar
algún dislike
como en este vídeo
pero bueno
creo que
que es interesante
así que nada
os mando un abrazo enorme
a todos
nos vemos por las redes
cuidaos muchísimo
y ya sabes
like
like
like
coment
like
hasta luego
un abrazo a todos y a todas
hasta luego
distrenant
client
y ya sabes
todo
que
adiós
to
google
rock
y
,
y
y
y
y
y