Adoptar de forma incremental los patrones modernos de React en una base de código heredada

Supongo que iba a preguntar rápidamente. Supongo que todos están en el canal de Discord. Probablemente puedas ver mi pantalla ahora, con suerte. Ahí es donde voy a publicar todo. Si quieres, sí, siéntete libre de clonar y ejecutar las instalaciones en el repositorio ahora, solo para ahorrar tiempo después. Quiero decir, habrá tiempo, pero, ya sabes, siempre lleva un par de minutos. Pero, sí, creo que podemos empezar, de hecho, porque son las 5 pasadas, creo. Espero que más o menos todos se hayan unido. Pero, sí, déjame presentar esto. Y, sí, si no puedes ver lo que estoy presentando o de lo que estoy hablando, no dudes en decirlo. Si no puedes ver en mi pantalla, o el código o cualquiera de esas cosas, avísame, lo voy a presentar en pantalla completa. Ahora no tengo dos monitores, no puedo decir exactamente. Pero, de todos modos, bienvenidos a todos a este masterclass sobre la adopción incremental de patrones modernos de React en una base de código heredada. Sí, es posible que te preguntes quién soy rápidamente, gracias a todos por presentarse también, eso es muy amable. ¿Quién soy yo? Entrenador de ingeniería de software, actualmente ingeniero principal en Sainsburys. Para aquellos de ustedes que han visitado el Reino Unido, probablemente conozcan Sainsbury's, un gran supermercado. Sí, he trabajado en muchas cosas diferentes, he sido el desarrollador principal en varios proyectos, en leen.js, mi lugar anterior donde estaba como socio. También he realizado muchos entrenamientos. Trabajo con React, Kurl Academy, fui el organizador de los boot camps que estábamos llevando a cabo en Portugal y Londres hace un par de años. Y realizamos entrenamientos para desarrolladores de todo tipo de lugares. Genial. Déjame ver

Obviamente, probablemente hayas visto bastantes componentes de orden superior, como Connect, que es uno muy famoso con Redux, o también con Router de React, Router es otro componente de orden superior muy conocido de las bibliotecas. Así que fue muy... todo este ecosistema de React adoptó mucho ese patrón también, como una forma de compartir lógica con estado o lógica de componentes, tal vez es una mejor manera de decirlo.

Y luego, sí, avanzando un poco más en el tiempo, llegamos a esta idea del patrón RenderProps que nos permitió hacer nuestra composición un poco más declarativa y esencialmente hacer nuestra composición en tiempo de renderizado. Entonces, la forma en que funciona, siguiendo con los componentes de orden superior, es que en realidad solo necesitas algunas dependencias, como cuando un componente se renderiza realmente. Y en React, tienes este modelo de composición donde puedes pasar hijos. Veremos ejemplos de código de esto más adelante, así que no te preocupes si piensas que suena un poco abstracto.

Pero puedes, ya sabes, puedes tener una función como hijo. Como puedes ver en este gráfico a la izquierda, es como si tuvieras un componente de React y dices, ok, mis hijos son una función, esa función puede ser invocada desde cualquier lugar por este padre con algunos argumentos, y luego en los parámetros aquí, puedes extraer lo que necesites y simplemente devolver más componentes. Y tienes, como, las cosas que necesitas en tiempo de renderizado, lo cual es genial. Y sí, esto fue algo que realmente ganó mucho impulso. Nuevamente, es un patrón que todavía está presente, y también es un patrón que todavía se usa bastante. Es realmente relevante. Por eso estoy hablando de todas estas cosas. Este todavía está muy presente, ya sabes, en el día a día, lo verás por ahí. Los componentes de orden superior un poco menos, veremos por qué en los ejemplos también.

Y finalmente, esta última evolución, que estoy seguro de que todos conocen porque ha pasado un par de años, los hooks surgieron. Y lo que los hooks de React nos permitieron hacer fue esencialmente hacer esta composición perpendicular al árbol. Me gusta mucho esta forma de pensarlo, porque realmente ayuda, de hecho, siempre a pensar en tus componentes, en toda tu aplicación realmente, como una estructura de árbol. Y de esa manera, puedes razonar sobre quién es el padre, quiénes son los hijos. Y, ya sabes, el cambio de estado o props en un padre es lo que hace que los hijos se vuelvan a renderizar. Así que siempre vale la pena pensar de esta manera, como en el árbol, como cuál es la jerarquía. Pero sí, esencialmente los hooks, lo que hacen es en lugar de tener que hacerlo verticalmente, que es lo que hacen los otros patrones, puedes hacerlo horizontalmente, porque simplemente puedes escribir una pieza de lógica de componente y luego simplemente puedes enganchar esa pieza de lógica de componente desde cualquier componente en cualquier lugar del árbol. Esa es la gran idea. Así que sí, espero que tenga sentido, pero veremos más.

Entonces, si estamos usando componentes funcionales y queremos, sí, reutilizar algún tipo de, en este caso, un efecto secundario, useDocumentTitle, entonces simplemente podemos usarlo. Como puedes ver en el lado izquierdo, una función aquí, llamándola useDocumentTitle. Entonces es un hook, recibe un título y luego simplemente ejecuta este efecto, ¿verdad? Entonces, el hook useEffect, todo lo que es un efecto secundario debe usar eso, y en este caso, obviamente, usar esta API del documento es un efecto secundario. Así que simplemente ejecútalo y luego, sí, dentro de cualquier componente dado, solo importaríamos useDocumentTitle y pasaríamos esa cadena que es el título que espera. Así de simple.

Pero luego, sí, probablemente estés pensando, ¿qué pasa si el hook devuelve algo? Bueno, sí, buena pregunta. Entonces, si el hook devuelve algo, siguiendo con ese mismo ejemplo aquí, puedes ver en la parte superior aquí un hook personalizado que recibe el título como argumento, y también devuelve una función de actualización y el recuento actual. Así que simplemente agregando un poco de estado a la ecuación aquí, dentro de este hook personalizado. Y sí, lo que va a hacer en ese useEffect es simplemente ejecutar el efecto allí y luego imprimir el recuento y el título, así que lo veríamos en la parte superior del documento. Y desde el hook, estamos devolviendo un objeto con dos cosas diferentes, como el recuento actual en sí, y también la función de actualización que es el setCounter, que definimos en la parte superior del useState. Y luego, sí, si queremos usar ese hook personalizado en un componente funcional, muy simple, sí, podría haber algún componente funcional llamado document.titleEffectFnComponent, y todo lo que tenemos que hacer es simplemente usar nuestra desestructuración de ES6 aquí para definir dos variables, count y setCount, porque sabemos que eso es lo que se devuelve de ese objeto, y luego pasar también nuestro argumento. Entonces, en este caso, también hemos pasado un objeto con, por ejemplo, el título, hola. Sí, espero que todo eso tenga sentido. Esto es bastante básico hasta ahora para los hooks, pero estamos avanzando. Así que, genial, supongo que, siguiendo con esto, ¿qué haces, sin embargo, cuando tienes un buen hook personalizado, como el que acabamos de ver, y piensas, oh, eso es genial, puedo cambiar mi título de documento. No estoy seguro de si querrías, pero podrías. Pero todos tus componentes son componentes de clase. Estás en este mundo donde es una base de código heredada. Sí, primero podrías decir, bueno, podría refactorizar todo a hooks, pero eso podría no ser viable por varias razones, ¿verdad? Porque tus componentes podrían ser realmente grandes y difíciles de refactorizar. Podría haber mucha lógica compleja. También podría estar muy bien probado, y no tienes tiempo para reescribir las pruebas. También podría ser simplemente una cuestión de tiempo, porque, ¿cuál es el beneficio relativo de la refactorización? Y eso es una de las cosas que tenemos que evaluar porque tenemos que, supongo, sopesarlo con la entrega. Si necesitas entregar nuevas características, entonces necesitas entregar nuevas características. Y obviamente puedes escribir cualquier cosa nueva utilizando la nueva sintaxis y todo, asumiendo que has actualizado tu versión de React, lo cual deberías hacer porque tiene una gran compatibilidad hacia atrás pero sí. Quiero decir, podrías tener esta situación. Ciertamente, donde trabajo, siendo una empresa de 160 años, nada de código heredado y, sí, a veces habrá como código heredado también. Que simplemente no ha sido posible en tal vez parte del código heredado y tal vez parte ha comenzado a moverse. Así que eso es lo que vamos a ver ahora. Entonces, ¿qué sucede, supongo que es la primera pregunta? Como cuando intentamos usar hooks en el componente de clase, tal vez algunos de ustedes lo hayan intentado, pero les diré, básicamente obtienes un error que dice, solo se puede llamar en un componente funcional. El mensaje de error se ve así. Sí, te dice cuál es el problema. Obviamente, este es uno de los requisitos de los hooks. Recomiendo, ya sabes, trabajar con hooks, en general, definitivamente leer eso porque hace que todos los errores que no puedes cometer tengan mucho más sentido. De hecho, hay enlaces en las diapositivas. Las diapositivas se compartirán al final, para que puedas hacer clic en cualquiera de los enlaces directamente. También los publicaré todos en el canal de Discord. Abriré algunos de ellos, pero probablemente no este, ya que es solo la documentación de React. Entonces, sí, cuando nos enfrentamos a esta situación, necesitamos una forma de avanzar que equilibre los factores de código con la entrega. Esa suele ser la razón por la que surge este tipo de cosas. Entonces, sí, lo que podríamos hacer entonces para comenzar a resolver esto es seguir el error. Identificar los efectos secundarios lógicos en nuestro hook personalizado que queremos reutilizar. Comenzaremos con eso.

Entonces, solo rápidamente sobre la estructura del código en términos de la estructura. Oops, no esa. Dentro de la carpeta src, básicamente los ejercicios están en diferentes carpetas. Así que puedes trabajar en la que necesites. Y luego, sí, quiero decir, el punto de entrada está aquí, index.js. El siguiente componente en el árbol es app.js. Y luego todos ellos son, como puedes ver, ejercicio uno hasta ejercicio contexto.

Y ahora estamos viendo este componente funcional aquí. Voy a mostrarte dentro del ejemplo, el componente funcional, y he tratado de nombrarlos para ayudar. Pero obviamente, en un proyecto real, probablemente no lo organizarías así, etc. Así que tendrás que suspender esta creencia y todo eso. Entonces sí, este ejemplo que estamos viendo ahora es el propio componente funcional. Así que es muy simple, ¿verdad? Solo estamos extrayendo las cosas que necesitamos. Así que si echamos un vistazo a useDocumentTitle, aquí está el hook en sí, lo mismo que acabamos de ver en las diapositivas. Y luego sí, dentro de un componente funcional, simplemente lo usas así, súper simple. Así que veamos si funciona, así que cambié esto a hola o algo así. Deberíamos ver que se actualiza, ahí tienes, se ejecutó el efecto, se actualizó, dice hola en la parte superior, maravilloso. Y sí, si vuelvo a cargar esta página también, simplemente restablecerá el recuento a cero porque esa pieza de estado no persistirá entre las representaciones. Así que sí, muy simple para el componente funcional. Veamos cómo lo haríamos dentro de nuestro componente de renderProps, que es lo que acabamos de ver. Así que ese es el componente funcional. Voy a comentarlo y hacer que este funcione. Entonces, en el componente de renderProps, esto ahora está, como puedes ver, déjame hacerlo más grande. Como puedes ver, esto está dentro de una clase. Así que ahora es esta situación en la que, sí, puede haber algunas cosas de clase aquí, alguna lógica, algunas cosas que no se pueden refactorizar. Y lo que no puedes hacer ahora es esto, ¿verdad? Como si intentara hacer este fragmento de código aquí, que es lo que estaba haciendo en el componente funcional, eso no va a funcionar. Verás ese error como, oh, tienes que estar dentro de un montón de componentes. Así que sí, tal como vimos en las diapositivas. Implementa este useTitleEffect, pasándole una prop del título que queremos que sea. Y luego podemos extraer el recuento y el setCount. Así que voy a cambiar esto para que puedas ver que funciona. Y con este, se ve un poco diferente. Acabo de extraer aquí, como puedes ver, el recuento allí. Y en la parte superior, fíjate aquí en el título del documento, que es lo que hace el hook. Es como cero y dice nuevo título, que es lo que pasaste. Y el contador de hecho funciona, y también estoy extrayendo allí el recuento. Así que sí, porque lo que estábamos hablando antes, tienes la función de actualización. Así que puedes llamarla aquí, y también tienes el recuento en sí, lo que significa que si quieres, puedes poner el recuento allí. Sí, espero que eso tenga sentido como ejemplo, pero puedes ver cómo lo haríamos con los renderProps. Genial, volvamos a las diapositivas. Y te hablaré sobre el componente de orden superior también y te mostraré el ejemplo. Pero por supuesto, como probablemente puedas imaginar, también podrás practicar esto. Como lo que acabamos de ver, podrás practicar con algo que tal vez sea un caso de uso más real. Porque puedes estar pensando, oh, esto del contador es un poco artificial. Eso es cierto, pero lo bueno es que es simple. Así que es fácil de entender. Genial, hablemos sobre el uso de componentes de orden superior en lugar de los renderProps.

Entonces, sí, nuevamente, el mismo hook que acabamos de ver antes, pero en su lugar vamos a usar un componente de orden superior. Entonces, como dijimos antes, un componente de orden superior es una función que toma un componente como argumento y devuelve otro componente. Así que es similar a la idea de las funciones de orden superior en JavaScript, que es una función que toma una función como argumento y potencialmente devuelve otra función. Supongo que por eso lo llamaron así. Sabes que hay esta cosa de las funciones de orden superior en JavaScript, que es una función que toma una función como argumento y potencialmente devuelve otra función. Supongo que por eso lo llamaron así. Pero de todos modos, es una idea similar, ya sabes, puedes hacer composiciones funcionales. Entonces, ¿qué está sucediendo aquí? Básicamente, lo que hacemos es encontrar uno, esto de with es una convención, probablemente lo hayas visto. No todos son with, ¿verdad? Como, quiero decir, connect es un componente de orden superior y se llama connect, pero muchos de ellos son como with, ya sabes, podrías tener como with internacionalización, obviamente with router es uno muy conocido. Así que sí, recomiendo hacer eso porque es lo más común para otras personas que lo están usando, pero absolutamente no hay razón para nombrarlo de ninguna manera en particular, es solo una función. Así que se espera que tome un componente como argumento, que es esta parte aquí si puedes ver mi ratón. Y luego dentro de eso, lo que queremos hacer es definir otro componente. Así que lo que estamos haciendo básicamente si piensas en esto en el árbol es que estamos introduciendo como un nuevo componente y la razón por la que lo estamos haciendo es porque queremos poner algo en sus props. Entonces, dentro, vamos a definir otro componente llamado el componente envuelto. Y lo que queremos hacer allí es esperar recibir una prop llamada título y luego también necesitamos propagar cualquier otra prop que esté recibiendo. Esta parte es bastante importante en realidad de cómo todos los componentes si estás escribiendo los tuyos propios. Si no haces eso, puntos suspensivos props como si no propagas cualquier otra que haya porque estás introduciendo un nuevo componente, en realidad vas a borrar todas las props que estaban allí antes. Así que eso es bastante clave. Para aquellos que han trabajado con componentes de alto nivel y los han escrito antes, sabrán a lo que me refiero. Pero sí, quiero decir, ciertamente, siéntete cuando estemos haciendo la actividad, juega con eso y verás de qué estoy hablando. Y luego, sí, dentro del componente envuelto, ahora es un componente funcional, así que podemos usar nuestro hook. Así que extraemos el recuento y el setCount, que son las dos cosas a las que queríamos acceder. Y luego el componente que se devuelve al final de esto tendrá estas props. Como vamos a tener una prop llamada recuento, una prop llamada setCount y vamos a pasar esas dos cosas que sacamos del hook. Y también pasaremos el título también.

Simplemente nos gusta hacer un poco de prop drilling allí y luego pasaremos cualquier otra prop. Y sí, de nuevo, simplemente querrás exportar esta cosa fuera de aquí como una exportación con nombre o algo así. Así que puedes usarlo en otro componente.

Entonces, en el otro lado, en un componente de clase que no podemos refactorizar. Ahora, cuando queremos obtener estas dependencias que vienen a través de props. Lo que hacemos, y estoy seguro de que todos ustedes han visto esto antes, es envolver el componente con el componente de orden superior, porque recuerden que es una función que toma un componente como argumento.

Entonces, esta es la función que hemos usado, el componente de orden superior useTitleEffect, y le pasamos este componente aquí. Y ahora lo que va a hacer es básicamente obtener algunas cosas nuevas en nuestras props porque eso es lo que hicimos. Así que ahora, si haces un console log de qué son estas props que llegan a este componente de clase, vas a tener un contador y un título, y también un setCount porque decidimos agregar esas cosas. Y sí, simplemente aparecerán en tus props de la misma manera que todo tipo de otras cosas como history, location y match aparecerán en tus props si usas el componente de orden superior withRouter en tu proyecto. Suponiendo que tienes un enrutador de nivel superior. Pero sí, echemos un vistazo a esto en acción también rápidamente. Déjame mostrarte.

Entonces, sí, aquí, vamos aquí y activamos el componente de orden superior. Te mostraré cómo funciona. Así que aquí tenemos este título y recuerda que eso es lo que se pasa ahora desde este nivel superior porque el componente de orden superior, esta cosa va a ser esencialmente el componente envuelto. Así que si entramos en ese componente de orden superior, déjame hacer esto para que puedas verlo mejor, en la parte inferior aquí, lo estamos envolviendo. Sí, lo hemos importado de ese useDocumentTitle. Lo estamos envolviendo. Eso es lo que acabamos de ver. Y ahora podemos deconstruir estos porque van a aparecer en nuestras props. Sí, si estás trabajando en una clase, por supuesto, no olvides el this, eso es muy divertido y moverte entre clases y componentes funcionales, cosas así. Y luego echemos un vistazo rápido a cómo implementamos eso. Así que dentro de nuestro hook personalizado, lo que hicimos es esto, que también acabamos de ver. Así es como lo definimos, toma componentes como argumento. Sí, se espera que reciba un título, como acabas de ver como una prop, y luego sí, vamos a tener el contador y el setCount, simplemente los pasamos todos de la misma manera. Y luego los exportamos todos desde aquí abajo. Y luego ahora, si vuelvo aquí, como puedes ver, es como si el título del documento fuera algo. Puedes ver eso en la parte superior de la pantalla. Y puedes ver aquí, también en este, solo para mayor claridad, también tengo el contador aquí. Y también, ¿cuál es el título del documento actual? Hago clic en él, sube y también puedes ver eso aquí arriba, en la parte superior de la pantalla. Así que sí, parece que también está funcionando. Lo que hemos hecho allí es básicamente, sí, solo tres formas diferentes ahora de reutilizar esta lógica del componente y ejecutar ese efecto secundario, todo a través del hook.

Genial, volvamos a las diapositivas. Por cierto, ese ejemplo será muy útil. Está en la carpeta de ejemplos. Al igual que la rama en la que estoy mirando es la rama principal, por supuesto, no es una especie de rama de solución o algo así, pero sí, tienes esos ejemplos. Así que definitivamente échales un vistazo cuando estés haciendo el ejercicio, porque te ayudará a ir en la dirección correcta.

Entonces sí, supongo que eso nos lleva a esta especie de pregunta millonaria, ¿a qué debería ir? Bueno, sí, como la mayoría de las cosas de la programación, depende. Supongo que el primer paso es, si puedes refactorizar tu componente en un componente funcional y usar hooks, entonces definitivamente deberías hacerlo. Si no crees que vaya a llevar mucho tiempo y puedes ver que puedes descomponerlo, sí, ve por eso porque hará que la base de código sea más mantenible a largo plazo. Esa es la mejor manera de hacerlo. Pero sí, si quieres reutilizar la lógica del componente, entonces necesitas crear un hook personalizado. La cosa es que es posible que no necesites reutilizar la lógica. Eso también es algo a tener en cuenta, a veces las personas tienden a saltar al siguiente paso. Como si todo fuera un paso de refactorización. Es como si necesitaras algún tipo de estado o algo dentro de un componente y es un componente funcional, entonces simplemente usa los hooks y ve cómo te va con eso primero. No sabes si necesitarás usar eso en diferentes componentes y diferentes partes del árbol. Así que no te adelantes a convertir todo en un hook personalizado. Es posible que no necesites hacerlo. Y si es lógica de JavaScript, recuerda esto, en realidad, a veces sucede, donde veo a los desarrolladores haciendo cosas con hooks o en el pasado, usando estos patrones avanzados de React, como contratar todos los componentes de render props para compartir solo lógica de JavaScript. Y es como, bueno, ya tenemos una forma de compartir lógica de JavaScript. Es solo lógica de componente. Tenlo en cuenta. Y por eso estaba haciendo esa pregunta al principio. Como, ¿cuáles son las circunstancias en las que necesitamos hacer esto? Así que vale la pena preguntarte eso, si lo estoy haciendo necesariamente o no. Porque es fácil pensar, oh, esa es la respuesta. Pero sí. Entonces, sí, si quieres reutilizar la lógica del componente, crea un hook personalizado, 100%, ve por ello. Sí. Y luego, por cierto, si quieres usar eso en diferentes proyectos, si has creado un hook personalizado, es muy, muy fácil simplemente publicarlo en NPM. Puedes publicarlo básicamente usando roll up o lo que prefieras. O también puedes publicarlo en los paquetes de GitHub. Eso es algo que hacemos con paquetes internos. Y luego también puedes usarlo en diferentes proyectos. Eso es muy genial. Y luego, sí, si tienes algunos componentes que son funcionales y quieres compartir eso, entonces sí, también deberás implementar una de estas cosas que acabamos de ver. Para ser amable, definitivamente enviaría esas dos cosas. Así que puedes, siempre haría una de estas. Si hago un hook personalizado para hacer algo, no sé, como un envoltorio para obtener datos o algo así, definitivamente lo enviaría con un render prop también. Porque incluso si en mi aplicación sé que tal vez es un proyecto nuevo, es agradable. Luego, otras personas pueden usarlo si no es el caso. Y solo puedes poner eso en tu readme, como aquí está cómo usarlo si estás en un componente en la nube. Es bastante simple. Y eso es lo que vas a hacer en el ejercicio, en uno con obtención de datos, que creo que es un muy buen ejemplo. Sí, creo que eso es todo para esta diapositiva.

Entonces sí, echemos un vistazo rápido al ejercicio. Solo te mostraré rápidamente en qué consiste el ejercicio. Y luego hacemos algunas preguntas ahora antes de que comiences. Y luego, cuando comiences, te pondré en las salas de grupos de trabajo y cosas así. Y eso será después de la pausa de descanso que viene a continuación. Pero echemos un vistazo rápido a en qué consiste el ejercicio. Cuando esta cosa se esté ejecutando, también he puesto todos los textos sobre lo que necesitas hacer. Eso también está en el readme del repositorio. Así que si has roto la aplicación y te preguntabas en qué estás trabajando, te recomiendo que simplemente mires el readme porque también está allí. Eso está aquí. Ese es el enlace que espero que todos hayan recibido. Está en Discord. Así que sí, el ejercicio uno es bastante simple. Lo que queremos hacer aquí es refactorizar este JSX de imagen aleatoria usando los hooks useData y useEffect, y esto es lo primero que dijimos que deberíamos hacer, si podemos simplemente refactorizar de un componente de clase a hooks, entonces deberíamos hacerlo. Si es un caso simple, así que esto debería ser bastante fácil. No te daré mucho tiempo para esto. Es el más trivial, pero creo que siempre debería ser nuestro primer paso. Así que vale la pena practicarlo. Solo debe ejecutarse en la primera renderización. Entonces, cuando recargues, deberías ver una nueva imagen. Así que cuando recargo esto, veo una nueva imagen. Ahí vamos. La API está funcionando. Permíteme mostrarte el código de esto ahora, que vas a refactorizar para que sea un hook. Entonces, si entramos en esta carpeta, cerramos el ejemplo, entramos en el ejercicio uno, aquí está el índice, puedes ver que este es un componente de imagen aleatoria. Eso es lo que se está renderizando debajo de las instrucciones. Y luego esta es la imagen aleatoria en sí. Así que en este, sí, tu única tarea realmente es deshacerte de esta sintaxis de clase.

Y sí, incluso he hecho algunas entradas para ti y cosas y cosas como que necesitas usar estado y usar ese efecto porque necesitarás ejecutar un efecto allí. Y deberías poder refactorizar esto rápidamente en hooks y debería funcionar exactamente de la misma manera. Sí, es bastante sencillo, para ser honesto. Pero sí, todo lo que está haciendo en caso de que te lo preguntes es simplemente acceder a esta API de Rick and Morty, que es divertida. Y luego obtener alguna respuesta y simplemente aleatorizarla y luego configurarla como una imagen aleatoria, eso es todo. Si estás pensando, oh, no hay manejo de errores y todo eso y manejo de carga. Sí, espera un momento porque llegaremos allí en el segundo ejercicio. Se supone que este es realmente trivial. Así que no quería poner más complicaciones en este ejercicio, pero en el siguiente, verás que se ha hecho algo por ti dentro del propio hook porque sí, ayuda con un ejercicio un poco más realista. Así que sí, esto es prácticamente todo para el primero y déjame mostrarte, bueno, aquí está el segundo ejercicio también.

Así que con el segundo ejercicio hay un par de partes en esto. La primera parte de ese ejercicio es simplemente refactorizar el JSX de los componentes funcionales en el ejercicio dos para implementar el hook use random image y mostrar la imagen con el componente de imagen. Ese componente de imagen ya es importante y todo donde solo necesitas pasarle la URL de la imagen, la propiedad SRC y sí, debería aparecer aquí. No será de ese tamaño. Probablemente será de este tamaño. Pero una vez que lo hayas hecho, debería funcionar bien. Y también hay una función ahí que deberías poder pasar e implementar como un botón. Y cuando hagas clic en él, queremos obtener una nueva imagen aleatoria. Así que es un poco más complejo que este, no al recargar, pero quiero tener un botón donde pueda obtener una nueva imagen aleatoria porque tal vez eso es lo que me han pedido. Así que déjame mostrarte rápidamente el ejercicio dos. Así que dentro de los componentes funcionales, este es el componente funcional aquí, que es la primera parte. Sí. Lo que necesitarás hacer es usar tu hook aquí. Quiero decir, este es un componente de función por lo que debería ser bastante sencillo. Ya he hecho la importación por ti. Y sí, aquí abajo puedes simplemente usar la imagen e implementar también el botón y si quieres, siéntete libre de eliminar el cuadro. Y sí, con todos estos, hay comentarios de código alrededor, definitivamente léelos si están ahí, pero siéntete libre de eliminarlos también. Y lo que he hecho para los tres también es que tu hook use random image ya está hecho. Así que eso es lo que mencioné hace un segundo que esto es un poco más de una versión más detallada. Obviamente se podrían hacer más refactorizaciones, pero sí, solo estoy tratando de equilibrar tener un ejemplo de un problema real y mantenerlo simple. Así que aquí, esta vez hacemos algunas cosas de carga. Tenemos algunos estados de carga y estado de error. Realmente no necesitas preocuparte por ninguna de esas cosas porque tu tarea principal es hacer esto, ¿verdad? Implementar estas diferentes cosas. Así que para la primera, todo lo que necesitas hacer es simplemente usar la exportación predeterminada, que es solo use random image. Solo necesitas mirar esto. Reflexionar un poco sobre ello, ver las cosas que se devuelven y ponerlo en marcha. Y en realidad, sí, estaba pensando en que todos ustedes implementaran también esa función de alternancia, pero al final decidí dejar eso así. Así que también he hecho eso por ti. Así que solo echa un vistazo, supongo, a lo que está sucediendo aquí. Pero esencialmente es lo mismo. Solo hemos implementado algunos estados de carga y nos hemos asegurado de que, como también manejamos los errores. Y eso es algo que definitivamente cuando estás haciendo como llamar a una API, como una API REST con un hook. Probablemente quieras hacer esto, ¿verdad? Porque a quien use este hook personalizado le gustaría cuando se está cargando, probablemente querrás mostrar un spinner y si hay un error, es posible que quieras mostrar alguna interfaz de retroalimentación. Así que por eso está todo eso ahí. Y esa alternancia solo te ayudará con la recarga. Pero si quieres, siéntete libre de cambiar el nombre de eso. Probablemente Re-fetch es un mejor nombre que alternancia. Y sí, eso es prácticamente todo para el ejercicio dos. Y luego, a partir de ahí, como probablemente puedas imaginar, las otras dos partes de este ejercicio son, en primer lugar, hacer eso, pero con un componente de render props. Así que lo que quieres hacer es mirar el ejemplo y luego mirar este hook e intentar hacerlo funcionar usando render props. Así que tendrás que hacer algo de codificación en esta zona aquí y luego lo mismo para el componente de orden superior. Y sí, tienes algunos comentarios de código aquí abajo para las diferentes tareas que debes hacer. Pero básicamente todos esos componentes ya se están renderizando. Así que puedes verlos aquí en la pantalla. Así que no necesitas preocuparte por comentar o descomentar componentes una vez que estén funcionando, una vez que los hagas funcionar, simplemente deberían funcionar. Así que si miras el que tiene render props, por ejemplo, ya he hecho las importaciones por ti. Incluso he importado un spinner y el botón, que puedes usar o no. Vas a necesitar importar ese componente que tenías. Y luego, ya sabes, aquí es donde vas a necesitar usar el retorno de tu hook y pasarle las imágenes que ves. Y luego el botón de recarga y cosas. Así que sí, espero que tenga sentido. Así que básicamente, muy similar a los ejemplos del ejercicio para estos ejercicios, se trata simplemente de, sí, ver cómo lo hicimos en el ejemplo e intentar hacer que eso funcione. Si quieres saltarte el ejercicio uno, puedes, supongo, pero solo te daré a todos como unos 15 minutos o algo así para el ejercicio uno, pero si quieres empezar con el ejercicio dos, siéntete libre. Después de 15 minutos, simplemente revisaremos el ejercicio uno porque ese espero que sea solo como un calentamiento. Sí, creo que eso es prácticamente todo para esta parte y hablaremos de esto más tarde. Así que supongo que mi pregunta es, ¿hay alguna pregunta en esta etapa? No.

¿No en este punto? No en este punto. Sí, supongo que había mucha información para asimilar allí. Muchas cosas rápidamente, sí. Pero definitivamente, sí, echa un vistazo. Esperemos que te guste ver el ejemplo. Haremos un repaso después del ejercicio y repasaremos todo también. Pero sí, si tienes alguna pregunta mientras lo haces, solo pregúntame.

El componente de renderizado es algo que entiendo más o menos, pero tal vez después del ejercicio, será más claro, y tal vez puedas repasar la solución con eso. Sí, absolutamente. Sí, esa es la idea. Mi gran recomendación con los ejercicios es que consultes el ejemplo, porque eso realmente te ayudará mucho con eso. Mira cómo lo estábamos haciendo allí, juega con el código. Y sí, genial. Bueno, te dejaré hacer el primero durante unos 15 minutos más o menos, y luego te mostraré la respuesta al primero. Y luego te daré unos 45 minutos más o menos para el segundo, porque hay varias partes. Y podemos hacer grupos de trabajo. Supongo que diría, sí, para este primero, porque son solo como 10 minutos. No haremos grupos de trabajo, y eso, sí, sí, son solo 10 o 15 minutos. Sigamos en el grupo principal. Así que sí, estaré aquí, así que siéntete libre de hacerme cualquier pregunta. Y te mostraré la respuesta al primero en, no sé, supongo que podemos decir a las 5pm en unos 10 minutos más o menos. Y luego seguiremos, genial. Pero cualquier pregunta ahora, siéntete libre de preguntar. Estaré aquí, por favor comienza. Solo espérame.

Hola Richard, tengo otra pregunta. En el ejemplo de la versión de la propiedad de renderizado, primero deconstruyes lo que devuelve el hook y luego construyes el objeto nuevamente cuando llamas a children. ¿Hay alguna razón en particular por la que no podrías pasar directamente lo que devuelve el hook a children? Sí, buena pregunta. La respuesta es no, definitivamente podrías hacer eso. Es solo que, personalmente, encuentro más fácil poner las cosas en un objeto y luego deconstruirlos en el otro lado. Porque luego, si necesitas agregar más cosas, es muy fácil agregar más cosas. Y tampoco importa el orden de los parámetros. Si lo piensas, el orden importaría si no hicieras eso. Si obtuvieras el orden incorrecto, eso marcaría una diferencia, pero de lo contrario, no. Sí, no estoy hablando de no convertirlo en un objeto nuevamente para children. Pero puedo ver dónde simplemente harías algo como props es use title effect y luego pasarías ese objeto props a la función children. Entonces, no cambiaría mucho. Es solo que no estás deconstruyendo y luego construyendo nuevamente. Y uno de los, tal vez necesitarías hacer esto porque aunque count, assert count no cambiaría entre actualizaciones, el objeto en su conjunto podría hacerlo, pero en realidad no estoy seguro de eso. Sí, eso es cierto. Quiero decir, sí, hay opciones aquí. No necesariamente tenemos que hacerlo de esta manera. Supongo que la razón por la que está así en el ejemplo es, bueno, principalmente por la capacidad de ampliación, supongo. Esa sería mi principal razón para hacerlo de esa manera. Pero sí, absolutamente, y otra cosa interesante también, si solo tienes dos cosas, como si lo piensas dentro de tu hook personalizado, también podrías tenerlos como un array si quisieras. Depende de ti lo que devuelva tu hook. Pero encuentro que nueve de cada diez veces mis hooks tienden a devolver objetos porque tiendes a agregar cosas con el tiempo. Dices: `Oh, ahora necesito saber esta cosa adicional`. `Ahora necesito ganar esto como, pero esto claramente es un objeto en lugar de un array`. Pero sí, en estos casos donde hay dos, hay un buen argumento para hacerlo así, `Oh, eso es bastante simple`. Gracias. De nada.

Sí. La razón principal por la que los principales hooks como useState, useEffect devuelven arrays es porque probablemente uses muchos useState en un componente, como podrías usar varios de ellos o puedes usar useReducer. Puedes usar todos estos hooks varias veces. Y si lo hicieran con un objeto, sería bastante verboso. Podrías tener useState y eso devolvería el estado y un setter. Entonces tendrías que cambiarle el nombre cada vez porque lo estás usando varias veces. Y si lo haces en un array, no tienes que hacer eso cada vez. Así que es más fácil de esa manera. Pero sí, tu hook definitivamente puede devolver lo que quieras. No hay reglas al respecto, en ese sentido. Sí, aparte de las reglas de los hooks, solo hay una regla más y es que tu hook debe comenzar con la palabra 'use'. Así es. Internamente, React realmente verifica si comienza con 'use' antes de convertirlo en un hook. Sí, absolutamente, y hablando de eso, publicaré las reglas de los hooks en el Discovery, solo como referencia, pero sí, buena idea. Eso está muy bien documentado en React. Y otra cosa interesante también, es la compatibilidad inversa. Porque a diferencia de Angular, no rompieron todo en algún momento. Tu sintaxis de clase seguirá funcionando. A veces puedes recibir algunas advertencias sobre métodos obsoletos y cosas así, pero puedes actualizar con confianza a la versión más reciente de React en un momento dado, lo cual es genial. Y eso es lo que nos da esta capacidad de adoptar incrementalmente cosas en lugar de un cambio radical, lo cual es genial. Sí, definitivamente, puedes actualizar de la versión 14 a la 17 sin hacer mucho. El problema principal serían tus bibliotecas, que probablemente se romperían en ese momento, pero React en sí sigue siendo prácticamente el mismo, sí. Exactamente. Sí, estoy de acuerdo. Lo único que a veces puede... Sí, supongo que diría que podría ralentizarte es, y esto es lo que sucede cuando se trata de frameworks versus bibliotecas, donde se trata de la convención versus la configuración. Cuanto más, ya sabes, si te atas a algo, no sé, digamos Next.js, lo que sea, eso está bien. Vas a lograr cosas, pero luego estás atado a eso. Y es posible que no actualicen una subbiblioteca tan rápido como te gustaría.

Eso sucedió con React hace bastante tiempo con la versión cuatro. Les llevó un tiempo hacerlo. Así que estarás atrapado usando una API antigua. Mientras que si lo haces de manera más básica, tienes más flexibilidad, pero luego, sí, depende de ti mantener todo en funcionamiento. Así que sí, sacrificas un poco de velocidad por más flexibilidad.

Sí. También depende mucho de lo que quieras del framework, ¿sabes? Porque a React en sí no le importa nada más que renderizar cosas. Así que si usas una API de Django o usas la nube como funciones en la nube o lo que sea, a React no le importa en absoluto. Mientras le des los datos, renderizará HTML. Y Next.js y otros frameworks como Blitz, creo, y lo que sea, son mucho más orientados porque tienes que usar sus herramientas, lo cual, como dijiste, te ahorra mucho tiempo, ya sabes, porque todo funciona de inmediato, todo está integrado entre sí. Si miras la división de código, por ejemplo, en Next.js funciona de inmediato. Si usas create React app o cualquier cosa que no esté tan integrada, tendrás dificultades para implementarla correctamente. Así que sí, definitivamente es un poco más como, ¿quieres que todo funcione de inmediato o quieres construir tu propia pila de esa manera? Ambas opciones están bien, en realidad. La única ventaja, creo, de usar cosas como Next.js, aparte de que es mucho más rápido, es que todo está documentado. Entonces, si tienes otro compañero de equipo que te ayuda, y si estás usando Next.js, ellos saben qué esperar, porque todo es igual. Mientras que si construyes tu propia pila, tendrás que enseñarles cómo funciona y les dirás todo lo que estás usando. Sí, definitivamente hay ventajas en ambas opciones.

Sí, estoy de acuerdo. Sí, respecto a las reglas de los hooks, creo que las olvido todos los días. Porque la regla de ESLint se encarga de eso. La lees y dices, bien, son algunas reglas a las que debo adherirme. Y luego lo olvidas, y está bien, porque ESLint lo soluciona por ti o simplemente bloquea toda tu aplicación hasta que lo soluciones tú mismo. Así que sí, definitivamente hay ayudas para eso. Sí, seguro. Es bueno. También son muy buenos los mensajes de error. Lo veremos más adelante en muchas partes de esta presentación sobre hooks personalizados cuando los estés construyendo, como, ¿cómo puedes brindar una buena experiencia del desarrollador? Como, ¿cómo puedes dar un mensaje de error relevante? Lo veremos en un momento. Sí. Definitivamente vale la pena hacerlo. Sí, incluso en producción, obtienes un mensaje de error muy pequeño, pero siempre agregan un enlace a la documentación con ese código específico y puedes abrirlo y luego explicar qué es. Sí. Y definitivamente, si tienes tus mapas de recursos configurados, creo que Create React app lo hace de forma predeterminada, te dicen qué componente está fallando. Así que solo tienes que mirar el error para ver qué está pasando. Sí, exactamente. Es genial. Sí, la experiencia del desarrollador es muy buena. Definitivamente, sí, he estado trabajando con React desde 2014 y sí, ha recorrido un largo camino en términos de cómo es, sí, así es. Incluso cosas como, quiero decir, en ese entonces no existía Create React app, incluso era, esta broma de como, para comenzar, como si fuera a sentir qué cosas de paquetes. Las cosas son geniales. En ese entonces tuve que usar un generador, creo que es uno de esos generadores y tenían un montón de estos preajustes. Y creo que me llevó más tiempo encontrar un preajuste que funcionara para mí que construir la aplicación, porque había cientos de ellos y podías construir tu propio webpack o algo y pasabas una semana aprendiendo webpack solo para romperlo y en la siguiente versión. Y luego agregabas un cargador y no funcionaba específicamente para tu proyecto. Así que volvía a fallar. Y definitivamente los mensajes de error, fue difícil, porque tu aplicación REP simplemente se rompía y le preguntabas a React, ¿qué está pasando? Y simplemente decía, no lo sé. Nadie sabía qué estaba pasando. Solo tenías que encontrarlo. Y ahora realmente te dice qué está mal. Así que eso es mucho mejor. Ah, sí. Sí, definitivamente. Genial. Espero que todos se hayan divertido con el primero. Permítanme mostrarles rápidamente la respuesta al primero, porque espero que haya sido bastante sencillo. Sí, aquí está la aplicación. Así que hice esa refactorización y puedo hacer, el contador todavía parece que funciona. Aún funciona en la parte superior de la pantalla, allí en nuestra pestaña. Permítanme mostrarles cómo se ve. Entonces, una de las cosas con esto, que no sé cuántos de ustedes hicieron esto, pero definitivamente recomiendo dejar el original cuando estés refactorizando de un componente de clase a un componente funcional. Definitivamente vale la pena dejarlo en lugar de eliminarlo por completo. Espero que la mayoría de ustedes lo hayan hecho. Pero sí, básicamente necesitábamos introducir algo de estado, ¿verdad?, con los hooks. Como imageURL, dijo imageURL. Necesitábamos ambos. Esta función prácticamente podía permanecer igual. Así que simplemente la dejé así para esto. Y luego, sí, solo necesitamos usar set imageURL en lugar de usar this.setimageURL o lo que fuera antes. Y dijimos que solo queremos que se ejecute una vez cuando el componente se monta. Y la forma de hacerlo es, en tu hook useEffect, puedes ejecutar el efecto secundario y simplemente pasarle un array vacío. Ese es el array de dependencias.

Por lo tanto, se ejecutará cada vez que algo en ese array de dependencias cambie. Pero en este caso, sí, solo queremos que se ejecute al montar. Así que cuando el componente, si recargo la página. Bueno, dicho esto, está funcionando. En realidad, parece que no está funcionando. Pero sí, en esencia. Debido a la imagen, porque tienes un componente que llama a la imagen y estás usando la imagen en sí. Si lo pones, tienes un componente o no. Al menos el anterior, lo tienes. Oh, sí, sí. No hizo un muy buen trabajo con mi. De compartir a react. ¿No es por el objeto que estás estableciendo con el setter para el estado? Porque ahora tienes que establecerlo directamente en la variable. Sí, exactamente. Esto es lo que sucede. También eso. Sí, he estado allí, lo he hecho. Por eso lo corté. Hagamos, probablemente sea character.imageURL o algo así. Solo la imagen. Sí, sí. Creo que ahora funciona, parece que sí. Oh, oh no, no está funcionando. ¿Solo la imagen? Gracias. Supongo que todos lo hicieron. Así que eso es genial. Más rápido que yo también. Sí, me estaba distrayendo. Pero sí, genial. ¿Tiene sentido para todos esas cosas? Espero que este haya sido bastante trivial de resolver. Pero sí, solo hay algunas cosas que cambiar. ¿Alguna pregunta antes de pasar al segundo?

Sí, Richard? Sí. ¿Puedes poner la función fetch random image, déjame ver, lo siento, lo hice un poco diferente a ti. Está bien, siempre y cuando funcione. Podrías poner todas estas cosas directamente en el useEffect si eso fuera todo esto. Sí, absolutamente. Sí, sí, sí. Sí, lo mismo. De acuerdo, gracias. Está bien. Quiero decir, esto es algo en lo que tomar una decisión. Quiero decir, en la parte dos, ahí es donde se complica un poco, ya verán, de hecho, eso es exactamente lo que hacemos aquí. Sí, pasando a la parte dos. Si miran nuestro JSX de imagen aleatoria de usuario aquí, sí, de hecho, lo hacemos aquí porque queremos, como, tener nuestro estado de carga funcionando. Y sí, básicamente solo definimos la función asíncrona dentro del useEffect en sí y luego la llamamos aquí en la parte inferior en el 28. Sí, es una forma más fácil de hacerlo. Pero sí, quiero decir, hay diferentes formas de hacer esto. Así que no hay una ortodoxia sobre cómo hacerlo. Lo mismo ocurre con tal vez algunos de ustedes están pensando en, como, sí, tener demasiado estado aquí podría probablemente manejar esto con, como, un useReducer, useReducer o algo así en su lugar. Absolutamente. Estoy de acuerdo. Pero sí, solo quería no hacer eso en este caso particular. Pero sí, una vez que eso comienza a suceder, eso es algo a lo que también puedes recurrir, solo para ayudarte a manejar el estado aquí dentro. Hacer que no te enredes. Genial. ¿Alguien tiene alguna pregunta sobre el ejercicio dos o el ejercicio uno, que acaban de terminar?

Solo tenía una pregunta breve sobre el ejercicio uno, ¿puedes abrir la consola? Solo, no sé, pensé que tal vez deberíamos verificar si no hay errores. Claro. Perfecto. Solo estoy acostumbrado a siempre verificar la consola desde mi lado, por eso preguntaba si era posible. Gracias. Oh, claro. Sí, no hay problema. Sí, sí. Genial. Bien. Muy bien. Así que en un segundo los pondré a todos en salas de grupos para que puedan intentarlo porque llevará un poco más de tiempo, pero supongo que iré pasando por cada una de esas salas por turno y veré cómo van. Probablemente algunos de ustedes ya hayan comenzado el ejercicio dos porque probablemente terminaron este, pero sí, si hay alguna otra pregunta sobre el propósito del ejercicio dos, supongo, sí, siéntanse libres de preguntar ahora. De lo contrario, pasaré y los ayudaré dentro del grupo. Supongo que no. Bueno, de todos modos, una vez que lo hagan funcionar, deberían poder tener este efecto que pueden ver ahora, algo así, donde hago clic para recargar y puedo obtener una nueva imagen. Muy útil. Genial, muy bien.

Así que dejaré de compartir por ahora y los pondré a todos en las salas de grupos. Hola a todos. Bienvenidos de vuelta. Esperaremos a que todos regresen. Creo que automáticamente serán transferidos aquí en un minuto. Sí, esa fue nuestra señal para regresar también. Recibimos la notificación. Tienen un minuto para regresar o los obligaremos. Así que, está bien, está bien, regresaré. Sí, exactamente, te empuja un poco. Ahí hay un poco de gestión de aula, ¿no? De parte de Zoom. Sí, sí, pero las salas de grupos son realmente útiles. Ni siquiera sabía que existían durante mucho tiempo. Es una función realmente buena, sí. Sí. Ayer descubrí que aparentemente hay una función de seminario web en Zoom, tampoco lo sabía. Así que, es bastante genial. Y puede manejar bastante. Quiero decir, tuvimos casi 500 personas en el seminario web de nuestra empresa, y estuvo perfectamente bien. No hubo problemas. Sí. Han hecho un buen trabajo, creo, al mantenerlo actualizado. Especialmente con todos los que se unieron a Zoom como empresa. Y sí, creo que lo han manejado bastante bien, para ser honesto. Quiero decir, han estado aquí por un tiempo, así que deberían. Pero aún así, es bueno. Definitivamente es mejor que MS Teams y otras cosas similares. Y Slack, el video, es simplemente horrible. Sí, es lo peor. Sí. Siempre que comienzo a compartir pantalla, Slack decide, ya sabes, simplemente romperse. Se cae. Sí, definitivamente, sí. ¿Puedo preguntar si hay alguna solución alternativa? Porque veo que Slack, para este monitoreo y control de comentarios de GitLab, no funciona, creo que es una gran herramienta para eso. No está diseñado para compartir pantalla o hacer reuniones, ¿verdad? No lo sé. Sí, no, tienes razón. Quiero decir, supongo que acaban de comenzar a hacerlo y no sé, donde trabajo tienen una versión video de Slack, pero simplemente falla cuando hay demasiada gente y suceden cosas, todavía están resolviendo eso. Pero tienen una buena integración con Zoom. Así que, en realidad, cuando hacemos una llamada en Slack, vamos a Zoom. Oh, genial. Sí, es una opción para obtenerlo. Y es mucho mejor, sí. Descubrimos que se puede integrar Zoom con Google Calendar. Entonces, en lugar de Google Meet, comienza a agregar enlaces de Zoom, porque eso también es mucho mejor. Pero cuando creas una reunión en Google, ¿usas Google Meet, que también está integrado? Sí, eso es lo predeterminado, ya sabes, tienes los enlaces de Meet en tus eventos del calendario. Pero hay una forma de obtener enlaces de Zoom allí. No estoy seguro de cómo, porque alguien lo hizo por nosotros. Pero debería ser posible, sí. Genial, genial. Bien, creo que todos han regresado ahora. Es difícil decirlo, pero de todos modos, ahora haremos un breve resumen de esto. Les mostraré algunas cosas y luego, sí, cualquier otra pregunta. Visité, creo, todos los grupos. Así que se ve bien, sé que la mayoría de ustedes lo ha hecho. Así que mantendremos esto bastante breve. Y luego, sí, probablemente tomaremos un descanso de cinco minutos y luego haremos la siguiente parte de la presentación. Así que déjenme compartir mi pantalla nuevamente. Bien, genial, si lo lograron, probablemente tengan algo como esto. Así fue nuestro primero, que simplemente se recarga al hacer clic. Lo mismo con el render props, y lo mismo con el componente High Roller. Es posible que también hayan visto ese spinner de carga parpadear allí. Eso fue un pequeño extra. Si ralentizas la red, puedes observar algo de acción del spinner de carga. Te mostraré a qué me refiero. Tal vez, oh, ahí está. Bueno, tal vez lo viste, tal vez no. Pero de todos modos, lo voy a desactivar. Fast3G, sin limitación de velocidad. Bien, ¿cómo lo hicimos en el código? Echemos un vistazo rápido a eso, o al menos cómo podrían haberlo hecho. No hay reglas estrictas y rápidas.

Había varias formas diferentes de hacer esto, pero comencemos aquí. Supongo que tiene sentido echar un vistazo a esto, el hook en sí. Así que sí, esto ya estaba configurado para ustedes, incluyendo esta función de interruptor. Tal vez hayan cambiado el nombre de eso. Sé que algunos de ustedes también jugaron con algunas otras refactorizaciones aquí donde experimentaron con mover esta función asincrónica y llamarla directamente. Eso es genial, definitivamente algo que también pueden hacer. Todo depende de cómo quieran hacerlo.

Entonces sí, expone esas cosas, ¿verdad? En cuanto a usarlo dentro de un componente funcional, debería ser bastante sencillo. Básicamente, lo estamos haciendo aquí en este. Tienes la imagen, tienes el botón. Solo estoy pasando la función de interruptor al botón y lo que hice fue simplemente importarlo. Era la exportación por defecto, ¿verdad? Así que solo lo importé aquí arriba. Hicimos la deconstrucción de los retornos del hook. Y luego, sí, también es muy bueno, al estar dentro de un componente funcional puedes hacer este tipo de cosas, puedes agregar un estado de carga, simplemente algunos retornos tempranos, lo mismo con los errores. Probablemente haría algo más allí también, solo para informar al usuario sobre lo que está sucediendo. Así que ese es el funcional, espero que tenga sentido, son los hooks estándar, muy limpios, muy buenos.

Echemos un vistazo a cómo podríamos hacerlo con los render props. Entonces, en este, necesitabas importar use random image en la parte superior. Veamos la implementación, en realidad primero eso, porque probablemente sea la forma de comenzar. Entonces, lo que hicimos en términos de enviar este fue, simplemente creamos un componente aquí, como un componente funcional, porque eso es lo que React quiere que hagamos, no puedes usar hooks fuera de una función, por lo tanto, componente funcional. Desestructuramos esa prop especial children, que está presente, que es quienquiera que sean mis hijos. Y luego, dentro de la función, extraemos esas cosas, que es lo mismo que haríamos dentro de un componente funcional, y luego decimos aquí en la línea 37, mira, voy a retornar, quienquiera que me pases como hijos, ¿verdad?, quienquiera que sean los hijos de este componente aquí, voy a asumir que es una función, y voy a invocar esa función con, ya sabes, estos argumentos. Ese es el trato, ¿verdad? Porque en React, ya sabes, puedes simplemente retornar los hijos, y simplemente retornará los hijos. Eso es lo que harías si quisieras, no sé, si quisiera tener algunos botones en la parte superior de cada pantalla, agregaría mis botones aquí, ya sabes, y luego retornaría los hijos, y luego todos los que sean hijos de este componente tendrían esos botones en la parte superior de la pantalla. Ese es el modelo de composición de React. Pero en este caso, queríamos implementar este patrón donde decimos, bien, los hijos van a ser una función. Entonces, una función que se puede invocar con algunos argumentos, que son nuestras dependencias, ¿verdad? Esto es lo que queremos. Esta es la lógica del componente que queremos compartir. Entonces, si vamos al componente de clase, los render props, ingresamos este componente en la parte superior, use random image, y luego aquí abajo, ¿dónde está? Ahí está. Donde lo usamos, como la cosa que siempre tenemos que decir con esto es como, quiénes son los hijos, ¿verdad? Esto es lo que acabo de decir ahora, como, esto es un hijo, como cualquier componente, quiero decir, esto, ya sabes, como un div, o lo que sea. Eso ahora es el hijo de use random image. Pero lo que dijimos, en este caso particular, y esta es la forma en que siempre escribo esto, y por qué prefiero el nombre, Children as a Function, es que dijimos que era una función, ¿verdad? Que se puede invocar. Por lo tanto, necesitas hacer esto, ser como, es JavaScript, y voy a empezar con algo muy simple, y decir como, es una función que se puede invocar, y eso es lo que retorna la función, como un retorno implícito en este caso. Y luego puedes comenzar a construir esto, y decir aquí, puedes comenzar a construir esto, y aquí, puedes comenzar a construir esto, y aquí, puedes comenzar a construir esto, y luego dices aquí, puedes comenzar a construir esto, y aquí, necesitamos algún tipo de retorno. Como mínimo, vas a necesitar hacer esto, esto, y pasar la URL de la imagen. Y eso debería funcionar según lo planeado, si no lo arruiné. Probablemente tenga algunos corchetes o algo en algún lugar que no le guste lo que estoy haciendo. No sé exactamente dónde. Creo que tienes un paréntesis extra, podría ser. Ah, gracias. Sí, eso es, sí. Entonces, si eso salió según lo planeado, eso debería funcionar en realidad, sí, y parece que sí, ¿verdad? Entonces, no hay botón, pero eso, de hecho, aún funciona. Y luego simplemente puedes seguir construyéndolo desde allí. Y así, en este caso, antes del retorno, es posible que desees manejar la carga, el error y el interruptor. Así que voy a retroceder un poco y detener mi Codificación en Vivo porque podríamos estar aquí todo el día si lo hago. Así que lo volveré a poner como el que hice antes. Entonces, es posible que desees hacer algo como esto, ya sabes, retornar el spinner si está cargando. Si hay un error, mostrar algún mensaje de error. De lo contrario, retornar estas cosas, como la imagen. Y aquí tenemos el botón dos y simplemente lo pasamos, ese interruptor, ¿verdad? Esa función de interruptor, que nos permite cambiarlo. Entonces, sí, volvemos a esto aquí. Ahora, mirando esto, puedo hacer clic en esto y se recarga. Y puedes ver que el spinner parpadea. No sé si puedes verlo en la captura de pantalla, pero el giro está funcionando. Genial. ¿Alguna pregunta sobre eso? Solo tomaré preguntas sobre esto ahora, supongo, porque tiene sentido ya que estábamos hablando sobre la implementación de los render props. Sé que es un poco, tienes que hacer clic y luego, tal vez hayas visto este patrón antes, por cierto, si alguno de ustedes ha usado Formic, todavía lo están usando. También hay algunos hooks, pero es muy común verlo. Sí. ¿Alguna pregunta sobre algo de lo que acabo de explicar? No parece que haya. Genial. No. Muy bien, genial. Quiero decir, creo que la mayoría de ustedes lo entendieron, lo cual es fantástico. Sí, genial. Vamos a terminar rápidamente con el otro también. Así que echemos un vistazo a los componentes de orden superior. Comencemos aquí nuevamente.

Entonces sí, solo para repasar la solución para esto. Recuerda que es una función que toma un componente como argumento y devuelve otro componente. Así que ese es nuestro componente que tomamos como argumento. Aquí definimos otro componente y luego retornamos este componente. Así que básicamente agregamos uno. Ves, retornamos ese componente envuelto que es lo que queremos al final, porque el componente envuelto es aquel al que hemos podido agregar nuevas props. Entonces, lo que hacemos aquí en el componente envuelto, es como una función dentro de una función, pero es JavaScript, así que podemos hacerlo. Extraemos las cosas de nuestro hook, que está en el mismo archivo. Estas son las cosas que queremos obtener en las props. Y luego, sí, en el componente interno, simplemente necesitamos pasar básicamente esas cosas que queremos. Y luego, sí, solo necesitamos propagar cualquier otra prop que nos pasen desde arriba. Porque de lo contrario, se borrarían si lo piensas. Porque si el componente envuelto, este tipo recibe algunas cosas, entonces no las vas a, no se mostrarán a menos que hagas esto y esto. Eso es algo que debes tener en cuenta al usar componentes de orden superior.

En realidad, hay otra cosa interesante. Si escribes estas cosas mucho, lo cual probablemente no hagas, para ser honesto en estos días pero hay otra consideración cuando la gente habla de estos patrones, que es que puedes tener conflictos de nombres. Y para ser honesto, eso es poco probable, en primer lugar, ten cuidado con el nombre de tus props pero es poco probable, pero generalmente lo que haces es cuando estás definiendo tu propio componente personalizado, es como poner el tuyo primero porque si hago esto, entonces ahora podría tener un conflicto de nombres con, no sé, alguna biblioteca de terceros que implementó este patrón o algo así. Entonces, sí, para estar seguro, pero también ten en cuenta que eso no resuelve realmente el problema. Eso es solo como, ser egoísta y poner los que quiero para asegurarme de que estarán allí. Así que esto siempre fue una de las críticas, supongo, de este patrón. Pero de todos modos, eso es un poco aparte. Así que esa es la idea general. Esto es, por supuesto, muy similar al ejemplo en esencia. Entonces, lo que hacemos es exportar esta cosa aquí como una exportación principal en el archivo. Y luego, si volvemos aquí y echamos un vistazo rápido al componente de clase, componente de orden superior. Sí, solo importamos esa función aquí. Lo primero que debes hacer, ¿verdad?, para que se muestre... Recuerda que es una función que toma un componente como argumento. Entonces, debes pasarle un componente como argumento. ¿Qué componente? Este, el que estamos usando. Porque aquí es donde está el componente al que quieres agregarlo en las props. Así que ahí es donde entra en juego esta sintaxis. Y luego, sí, ahora aparecerá en las props. Por lo tanto, puedes desestructurar estas cosas de las props lo cual es genial. Y luego puedes usarlas. Y en realidad esto es algo de lo que estaba discutiendo con algunos de ustedes en el grupo también es que para este caso en particular, tienes esta opción, ¿verdad? de qué patrón te gusta más. Así que suponiendo que tienes que usar... Realmente necesitas reutilizar esa lógica de componente dentro de un componente de clase. Tienes una especie de elección. Y de alguna manera, esto es más limpio, ¿verdad? Porque en el render, ahora puedes hacer cosas como si está cargando y si hay un error aquí y esto limpia un poco nuestro retorno. Como código, esto es mucho más limpio de leer. Esa es una de las críticas, supongo, del patrón de render props es que puede volverse... Se vuelve un poco desordenado aquí. Y imagina que tienes un montón de estos. También puede llevar a una especie de jerarquía forzada si tienes... Y luego tienes otro adicional dentro de este retorno y se vuelve un poco difícil de entender, supongo, pero en general, esta sigue siendo la forma preferida de hacerlo. En este caso particular, donde tienes carga y error, si estuvieras compartiendo alguna lógica de componente, que fuera solo, no sé, tal vez con estado, pero no tenía todas estas cosas que están sucediendo donde necesitabas los retornos tempranos, entonces sí, 100% iría por esto. Pero sí, es curioso razonar, solo piensa en ti mismo, ¿qué prefiero? Y también es algo que este envoltorio de imagen aleatoria que hemos escrito es esencialmente como un código reutilizable, ¿verdad? Pero la dirección que está tomando es esencialmente, puedes imaginar que podrías escribir tu propio envoltorio genérico de búsqueda aquí que simplemente usas en proyectos y solo usas uno simple. Y en realidad tuve exactamente ese caso de uso. Y solo escribimos uno genérico simple que usamos en diferentes lugares. Pero terminas escribiendo una biblioteca. Así que también después de cierto punto, necesitas cuestionarte si estoy volviendo a implementar algo que alguien más ya ha hecho. Pero en este caso particular, estamos accediendo a una API específica y queremos una cosa específica, que es reutilizar esta parte de la lógica también junto con las fechas de retorno de la API. Queremos que sea aleatorio. No es algo que obtengas directamente. Así que sí, podría ser un caso de uso. Genial. Creo que eso es probablemente todo por ahora, en su mayoría, creo que sí. ¿Alguna pregunta sobre algo de lo que acabo de decir antes de tomar un descanso de cinco minutos y luego continuaremos?

Tengo una pequeña pregunta. ¿Cuál es la razón por la que, si tienes un hook que devuelve algo, no puedes usar un componente funcional con ese hook dentro de un componente de clase? ¿Hay alguna razón para ello? ¿Entonces estás preguntando por qué no puedes usar un, por qué no puedes usar hooks dentro de componentes de clase? Ahora, por ejemplo, tengo un hook que quiero usar para una parte de una clase. Por ejemplo, hago un componente de función con ese hook y uso ese componente de función dentro de la clase. ¿Es eso posible? Déjame, espera, déjame compartir mi pantalla rápidamente de nuevo, así que si entiendo la pregunta, entonces, ¿dónde quieres hacer eso? Por ejemplo, si tienes un hook que crea una función de traducción que devuelve la función de traducción, pero tienes componentes de clase realmente antiguos con, por ejemplo, un botón que necesita ser traducido. ¿Puedes envolver el botón dentro de un componente funcional que use ese hook? Sí. Sí, absolutamente. Sí, puedes hacer eso. Puedes hacerlo absolutamente. Pero la cosa es, con esta regla, la forma de pensar en ello es algo así como ese ejemplo, supongo que vimos antes en esta diapositiva, es que si tu caso de uso es realmente simple, pero dónde está, solo estoy buscando esto, en un nivel básico, lo único que realmente necesitas hacer es envolver. Eso es lo que, como, si simplemente seguimos el error, como, eso es lo que React nos pide que hagamos, como, ya sabes, solo envuélvelo. Esa es la cosa. Sí. Así que puedes hacer eso sin problemas.

Sí. De acuerdo. Estaba un poco confundido porque era el caso en el que dijiste que si usas un valor de retorno de un hook, entonces puede que no sea sabio usar un componente funcional. Sí. Sí. Quiero decir, si, si devuelve un valor, es un caso diferente a cuando no devuelve un valor. Esos son los dos casos diferentes, supongo que esta es la diapositiva que estaba buscando. Sí. Entonces, como, sabes, en este caso particular, por ejemplo, ¿qué usas documentos? Realmente no devuelve nada. Aquí ves que está devolviendo null. Entonces, si solo quieres ejecutar un efecto secundario, es muy simple. Puedes pasar cosas a través de props para que veas solo necesita ser, si lo vas a usar en un componente de clase. La cosa es que el hook debe ser utilizado dentro de un componente funcional. Ese siempre es el caso. Esa es la lógica a seguir. Pero siempre razonaría de la siguiente manera, sí. La forma en que siempre razonaría sobre esto es, mi primera opción es pensar en refactorizar este componente de clase a un componente funcional. Si puedes hacer eso, entonces el problema está resuelto, luego solo usa el hook, es absolutamente la opción número uno. Pero luego, si no puedes, entonces puedes decir, oh, okay, bueno, entonces, ¿cuál es el siguiente paso? Bueno, sí, entonces puedes envolver la lógica del componente dentro de un componente funcional y luego usar ese componente funcional dentro de la clase. Y eso me permitirá hacer eso. Y luego simplemente vas construyendo a partir de ahí. Si tienes algún valor de retorno, entonces debes pensar cómo devolver cosas porque es posible que necesites acceder al valor de retorno del hook como aquí. Sí. Espero que eso responda la pregunta.

De acuerdo. Gracias. No hay problema. Genial. ¿Alguna otra pregunta antes de que simplemente... Supongo que el plan ahora es simplemente hacer un resumen rápido... Bueno, solo tomaremos cinco minutos porque creo que la mayoría de las personas ya terminaron con todo esto. Así que tomaremos cinco minutos y luego pasaremos a esta parte y eso les dará suficiente tiempo para hacer el ejercicio sobre el contexto también. Pero sí. ¿Alguna otra pregunta urgente? Increíble. Bien, genial. Nos vemos en cinco minutos. Genial. Sí, espero que todos hayan tenido un buen descanso y estén listos para la siguiente parte. Creo que sí. Aunque creo que algunas personas se unieron a mitad de camino en esta parte, espero que todo haya tenido sentido para aquellos que lo hicieron. Traté de asignar a las personas a las diferentes salas de trabajo a medida que avanzábamos, pero espero que eso haya tenido sentido para aquellos que se unieron a mitad de camino. Y si te uniste recientemente, entonces bienvenido. Ahora estamos en la segunda parte, pero la grabación estará disponible después. Así que siéntete libre de volver y revisarla tan pronto como se envíe por correo electrónico, eso explicará todo. Y sí, avísame cómo te va con los ejercicios. Genial, voy a comenzar. Oh, hay una persona más. Voy a comenzar a presentar la segunda parte. Entonces, en términos de tiempo, supongo que fue entre tres y cuatro horas. Así que sí, probablemente, terminaremos de presentar esta parte en unos 30 minutos y luego el resto del tiempo lo tendremos para el ejercicio e intentaré hacer un resumen. Así que trataremos de terminar alrededor de las 7:30, 7:45. Pero sí, supongo que tenemos hasta las ocho en términos de plazos estrictos, pero está bien. Sí, bien, voy a compartir mi pantalla nuevamente rápidamente. Hablemos sobre el contexto. Tomen un descanso. Bien, genial. Entonces sí, pasemos a un tema un poco nuevo. Que es como redux. Dijimos, supongo, al principio que íbamos a hablar un poco sobre esto. Creo que es relevante porque, ya sabes, cuando trabajas en una base de código heredada eso es definitivamente algo que, sí, que necesitas manejar. Entonces, lo siento, acabo de admitir a una persona más. Me da todo tipo de ruidos y cosas. Así que recapitulemos rápidamente qué está sucediendo con redux. Supongo que la pregunta, la pregunta para todos ustedes, si alguien quiere responder, es como, ¿cuál es el principal problema que redux está tratando de resolver? Me interesa saber qué piensan al respecto. Pero, para ser honesto, creo que se puede reducir a una sola cosa. ¿Pero cuál es? ¿Cuál fue el problema que redux resuelve para nosotros al trabajar con React? ¿Menos prop drilling? Data, sí. Sí, estoy de acuerdo, menos prop drilling. ¿Algo más? Compartir data. Compartir data, sí, bien. Estado global, estado disponible globalmente. Sí, exactamente. Sí, creo que todas estas son respuestas muy buenas para llegar a eso. Básicamente, supongo que la forma en que lo veo es que realmente solo hace una cosa, que es esto. El problema de almacenar el estado en diferentes componentes. Eso es lo que redux nos ayuda a resolver. Y lo hace al introducir un estado global, ¿verdad? Y esto es algo que creo que es interesante solo para señalar, a menudo, sí, a menudo cuando hacíamos talleres en empresas como React.js Academy y también en boot camps y cosas así, a menudo la gente decía, cuando les decía, oh, comienza una aplicación React. Ellos decían, bueno, voy a agregar redux de inmediato, ya sabes. De inmediato. Siempre les digo a las personas, como mira, redux debería ser un paso de refactorización porque está resolviendo un problema en particular. Y es posible que no tengas ese problema inicialmente. Si tu aplicación es muy pequeña y no tienes un problema con el estado almacenado en diferentes componentes, entonces no tienes el problema, ¿verdad? Porque, ya sabes, si miramos estas imágenes aquí, ¿verdad?, esto es un árbol de componentes. Es una estructura de árbol y hay jerarquía. Y el problema que tienes es donde esencialmente en React diferentes componentes almacenan partes del estado, y se vuelve muy difícil razonar sobre eso con el tiempo a medida que la aplicación crece. Porque es como, oh, ¿quién es responsable de qué? ¿Quién es responsable de actualizar qué? Tienes devoluciones de llamada, que se pasan hacia abajo. Recuerda, hay un flujo de datos unidireccional. No hay, ya sabes, el estado no se mueve hacia arriba en este árbol. Es solo que puedes pasar una devolución de llamada y luego eso podría desencadenar un cambio de estado en un componente lo que luego desencadenaría una nueva representación en todos sus hijos, ¿verdad? Lo cual es lo que puedes ver con estas flechas aquí. Entonces es como, esto podría haber pasado algo hacia abajo y luego, ya sabes, este ahora con esta nueva representación todos los hijos se volverán a representar. Entonces, así es como funciona. Y esto se convierte en un problema de escala. Y siempre uno de los desafíos al explicar Redux en general y el problema que resuelve es como, no tienes ese problema cuando es pequeño. Así que es realmente difícil porque si quieres, simplemente, comprenderlo y enseñarlo, quieres usar ejemplos simples. Pero los ejemplos simples significan que realmente no necesitas Redux. Así que es un poco complicado en ese sentido.

De todos modos, es algo que vale la pena pensar. Pero esa es realmente la gran idea con Redux es que en lugar de esta cosa de diferentes componentes, gestionando estos diferentes fragmentos de estado, como, vamos a tomar todo eso y ponerlo en un solo lugar como esta única tienda. Y luego, ya sabes, los componentes pueden suscribirse a esos cambios si lo desean. Si necesitan ser notificados al respecto, pueden hacerlo. Y también pueden enviar algunas cosas para modificar ese fragmento de estado global de una manera que no cause mutaciones sin, ya sabes, no quiero explicar todo el asunto de Redux, pero esa es básicamente la idea, esa es la gran idea. Y esto fue bastante poderoso porque ayudó a construir esto es una cosa de escalabilidad. Y es realmente bueno y React Redux, realmente les gusta la biblioteca, que fue ByteInsurance, fue bastante lejos. Y estoy seguro de que muchos de ustedes han visto que esto se ha implementado en bases de código de manera bastante extensa. Entonces sí, fue bastante exitoso como un patrón. Supongo que diría que en algunos casos probablemente se fue un poco demasiado lejos y se implementó donde no era necesario. Así que siempre vale la pena pensar en estas diferentes cosas como un paso de refactorización porque en React, es una biblioteca, ya sabes, no es un marco, tiene un ecosistema y tomamos decisiones sobre estas cosas. Entonces sí, siempre vale la pena considerarlo.

De todos modos, hablemos rápidamente sobre cómo Redux funciona con React, porque es relevante para lo que vamos a ver en un segundo. Básicamente, la forma en que funcionaba era con el patrón de componente de alto nivel, como originalmente, eso es lo que hace connect. Así que solo para recordarnos, estábamos viéndolo, supongo, pero es un componente que toma un componente, lo siento, es una función que toma un componente como argumento, creo que tengo un error tipográfico en mi diapositiva, y devuelve otro componente. En este caso, eso se llama, se llamaba connect, ¿verdad? Esa función se llamaba connect y eso es lo que proporcionaba la biblioteca React Redux. Y solo devolvía una función adicional. ¿Qué quiero decir con eso? Ese es solo el caso de que, si miras aquí, esencialmente puedes hacer esto, porque las funciones son ciudadanos de primera clase en JavaScript, puedes escribir funciones que devuelven otras funciones. Eso es lo que puedes hacer. Por lo tanto, puedes decir, hey, connect, voy a ser una función que devuelve, como ves la función de flecha aquí, una devolución implícita de otra función, y esa segunda función es la que pasa los componentes. Los argumentos del primero van a ser una configuración. Luego simplemente haces tu cosa. Simplemente haces la cosa que estábamos viendo, con el componente Wraps, haces algo con tu configuración si es necesario y obtienes algunas nuevas props para pasar. Esto, esencialmente, esta idea de descomponerlo y en lugar de pasarlo todo de una vez, se conoce como currificación. Probablemente hayas oído hablar de eso antes, pero sin entrar demasiado en lo que está sucediendo con JavaScript aquí, así es como se ve la función. Esta es la parte, supongo que para entender, es que terminarías, cuando implementas el connect, tienes connect, y luego esa configuración, pasas dos argumentos. Pasas mapStateToProp, mapDispatchToProp. Luego, la segunda función es el componente de orden superior, que se invoca con tu componente. Sé que fue un poco rápido, pero solo estoy tratando de demostrar que esto no es algo nuevo. Eso es literalmente lo que está sucediendo bajo el capó. No hay mucho más que eso. Hay una cosa adicional, de la que hablaré en un segundo, que es la otra parte de hacer que funcione. A menudo terminamos con fragmentos de código que se ven así, un poco como una captura de pantalla antigua. Terminas con este tipo de cosas, mapea el estado a las props, mapea el despacho a las props. Es posible que también tengas algo con el enrutador. Tienes otros componentes de orden superior y puedes componer estas cosas juntas, pero se vuelve un poco desordenado al final. Finalmente, tienes ese componente de contenedor de registro allí y ese es el que ahora mostrará algunas cosas en sus props. Como va a tener esas, va a tener esta acción de inicio de sesión despachada. También va a tener las cosas del enrutador, que son history, match y location. Y luego esta es la segunda parte. En un nivel superior en nuestra estructura de componentes, probablemente en algún lugar cerca de la parte superior. Como, por debajo del punto de entrada, pero como en algún lugar bastante alto. También habrá un componente proveedor. ¿Qué está haciendo eso? ¿Alguien lo sabe? De memoria, ¿qué hace ese componente proveedor? No, pero nadie quiere intentarlo. Usando la API de contexto, supongo. Sí, muy bien. De acuerdo, y está configurando el contexto para el resto de las aplicaciones, para los componentes que se renderizan desde dentro de ellos. Exactamente, sí. En realidad, el proveedor es, sí, exactamente, bien, muy bien. Básicamente, solo coloca esas cosas en el contexto. Y, por lo tanto, lo que el hook está haciendo es simplemente sacarlo, está diciendo si hay algo en el contexto y lo está obteniendo del contexto para ti. Eso es lo que está sucediendo dentro del componente connect o el componente. Sí, me estoy adelantando a mis diapositivas, pero ese era el trabajo de connect. Simplemente obtén el estado del contexto e inyecta ese estado mediante props. Entonces, esto no es muy diferente de lo que estábamos haciendo, solo que no estamos haciendo la parte del contexto. Entonces, primero que nada, antes de profundizar un poco más en el contexto y por qué querrías usarlo, etc., hablemos de React Redux y qué podrías hacer si te encuentras en una situación en la que ya tienes Redux y ya lo tienes, ya sabes, todo está configurado y funcionando y todo lo demás. Diría que lo primero que probablemente querrías hacer es simplemente usar los hooks, ¿verdad? Porque ahora React Redux también tiene sus propios hooks. Nuevamente, si puedes, refactoriza tu componente para que sea un componente funcional y simplemente usa los hooks de Redux, porque, ya sabes, no necesitas necesariamente eliminar todo Redux y cosas así. Solo déjalo, solo usa los hooks. Eso limpiará tu código de inmediato. Una de las cosas que he visto bastante es que a menudo ni siquiera tienes esto. Luego, si puedes ver en mi ratón, como con el connect, a menudo ni siquiera tienes eso en el mismo archivo. Suelen tener otro archivo de índice donde se coloca todo esto, ya sabes, puede haber un mapeo masivo del estado a las props y del despacho a las props, por lo que se está abstrayendo a otro archivo. Como siempre digo, si incluso puedes deshacerte de esos archivos de índice, puedes deshacerte de mucho relleno esencialmente simplemente refactorizándolo al componente funcional. Y si puedes, solo usa estas cosas aquí arriba. Puedes terminar con más cosas, ya sabes, dentro de tu componente funcional, pero definitivamente te beneficiarás al eliminar una capa completa de abstracción, que ya no es necesaria. Entonces, sí, ese sería el primer protocolo. Diría que sí, echa un vistazo a los hooks de React Redux y úsalos. Pondré un enlace a la documentación al respecto. Lo que es posible que hayas escuchado es que, ya sabes, hay este contexto, ¿verdad? Y cuando, hay algo que sucedió con el contexto. Para aquellos de ustedes que han estado usando React durante un tiempo, sabrán de qué estoy hablando. Pero cuando miraste la documentación, al principio era como, había este gran letrero rojo que decía, oh, no deberías usar el contexto. Como en un momento, dijeron que siempre era experimental, podría desaparecer y todo lo demás. Luego pasó de rojo a amarillo, como, oh, realmente no deberías usar esto. Y ahora simplemente está ahí, como, y ¿por qué fue eso? Bueno, esencialmente es algo global. Y la razón por la que había todos estos letreros rojos y amarillos por todas partes durante varios años hasta hace poco es que, ya sabes, iba un poco en contra del ethos de React donde, ya sabes, tienes este flujo de datos unidireccional y todo se pasa a través de props, como esta cosa de introducir estado global podría volverse un poco complicado rápidamente porque donde no se necesita. Pero, por supuesto, todas estas otras bibliotecas, ya sabes, el enrutador, React Router, como lo usaron. Obviamente, usan el contexto, lo mismo con React Redux, lo que acabamos de hablar, los clásicos muy clásicos. Pero lo necesitas porque tienes algo que es global y necesitas acceder a él en cualquier nivel del árbol. Entonces, en pocas palabras, el contexto esencialmente está ahí como una solución cuando tienes algo que es un poco global.

Pero la idea es que no es completamente global porque, como muchos de ustedes probablemente piensan, las cosas globales son un poco problemáticas. La idea con el contexto y React es que debes pedirlo explícitamente. Entonces debes decir, `hey, ¿existe esta cosa en el contexto?`. Si es así, dámela. No está ahí por sí solo. No aparecerá automáticamente. Pero sí, lo que debes preguntarte antes de siquiera pensar en implementar algo relacionado con el contexto es si necesitamos transmitir un cambio de estado a múltiples componentes anidados. Esta es la gran pregunta. Y la respuesta bien podría ser no a esa pregunta. ¿Necesitas que sepan sobre este estado que está cambiando en todas partes? Posiblemente, pero posiblemente no. Hay diferentes casos de uso para eso. Pero realmente te recomendaría que te lo preguntes más de una vez porque es muy fácil caer en la trampa de `oh, simplemente usaré la API de contexto`. Y es posible que en realidad no hayas necesitado hacer eso si no había algo que cambiara y luego necesitaras captar ese cambio en varios lugares. Si ese no es tu caso, intenta no usarlo. Simplemente usa Custom Hook por sí solo. Normalmente es más que suficiente. Y sí, si ya tenemos Redux, que es una solución de estado global, la siguiente pregunta que deberíamos hacernos es si este estado necesita estar en la tienda global. Y aquí es donde, al refactorizar a patrones modernos, puedes implementar tu propio estado global, ¿verdad? Si dices que un estado necesita ser global y no tienes Redux, simplemente puedes hacerlo y te lo mostraré en un segundo. Básicamente, obtenemos un estado de contador global y ese es un ejemplo muy simple, pero puedes hacer eso y dentro de ese contexto puedes usar el useReducer y esencialmente recrear una solución similar a Redux en miniatura sin problemas. Así que Redux ya hace ese trabajo, pero lo que puedes hacer si tienes una gran aplicación que ya está usando Redux es simplemente cuestionarte si esto necesita estar en la tienda global. Sí o no. Porque hubo un poco de dogmatismo con Redux, donde todo va en la tienda, pero en esta etapa debemos preguntarnos, especialmente con los nuevos patrones que tenemos y las diferentes opciones que tenemos, ¿todo necesita ir en esa tienda? ¿Es necesario en este caso particular? Y por eso creo que se volvió un poco engorroso, solo pienso en cosas como Redux Forms para cualquiera que lo haya usado. Es como `oh, eso es un poco excesivo` tener cada pulsación de tecla y todo pasando por ahí. Entonces, aquí hay algunas cosas en las que pensar. Sigamos adelante y veamos algunos ejemplos de código más y luego te mostraré el ejercicio para el contexto.

Entonces, volviendo a este connect, como dijimos, era simplemente para obtener algún tipo de estado del contexto e inyectarlo a través de props. Sí, ahora podemos hacer lo mismo con hooks, básicamente. Si quieres crear un fragmento de estado global con contexto, esta es la forma que recomendaría hacerlo. Solo quiero mencionar que hay más de una forma de hacerlo, así que no hay una única forma. Si miras la documentación de React sobre cómo usar el contexto, no hay una sola forma clara, hay muchas formas diferentes de hacerlo. No es algo definitivo, pero esta es una forma que encontré bastante buena. Espero que estés de acuerdo.

Entonces, primero, crea tu contexto de contador en la parte superior, y luego necesitamos crear un proveedor, ¿verdad? Porque estamos tratando de poner algo en el contexto global. Luego tenemos un fragmento de estado que queremos gestionar, como el contador y el establecimiento del contador. Así que simplemente lo establecemos en cero como estado inicial. Y luego, la forma en que funciona la API es que haces un proveedor del contexto del contador y colocas algunas cosas en esa propiedad de valor. Y lo que voy a poner ahí es el contador y el establecimiento del contador. Y luego simplemente digo, de acuerdo, hijos, ¿verdad? Así que cualquier hijo que esté alrededor, nuevamente, esa propiedad especial para el modelo de composición de React, simplemente renderiza los hijos, sean lo que sean. No son hijos como una función, sino simplemente hijos. Así que asumo aquí que son componentes normales, como no son funciones ni nada por el estilo. Lo que puedes hacer.

Entonces, una cosa que podrías hacer es, donde lo necesites, recuerda lo que estaba diciendo antes acerca de que puedes simplemente extraer cosas, debes pedir explícitamente. Podrías ir a cualquier componente que necesite este contador y podrías usar el 'useContext' de React. Y también necesitarías exportar esto, importarlo, haces 'useContext', contexto del contador, y luego puedes acceder a estos valores. Pero probablemente haya una forma más elegante de hacerlo, que es simplemente crear un hook que obtenga el valor del contexto. Porque esto es lo que estábamos hablando antes. Básicamente, esto es lo que estaba sucediendo antes, simplemente estaban extrayendo cosas del contexto, eso es lo que estaban haciendo y luego lo inyectaban a través de props. Sabemos por el ejercicio que acabamos de hacer que también podemos hacer eso con hooks. Así que recomendaría seguir este enfoque en el mismo archivo, define un hook personalizado llamado 'useCounter'. Y todo lo que hace es hacer lo que estabas haciendo en el componente, lo que estaba hablando antes, 'useContext', contexto del contador. Así que estás en el mismo lugar y luego simplemente lo devuelves. Eso es todo lo que hace este hook, simplemente devuelve lo que está en el contexto. Así que serán esas dos cosas. Y eso también te dará la oportunidad aquí de crear una API un poco mejor para las personas que lo están utilizando, porque si el contexto es 'undefined', eso significa que no se molestaron en implementar este proveedor. Básicamente, eso es lo que está sucediendo. En ese caso, podríamos lanzar un error útil y decir algo como 'hey, el estado del contador debe usarse dentro de un proveedor de contador'. Y este es el tipo de cosas que esperarías ver en las bibliotecas también. Es como cualquier biblioteca que implemente un proveedor, te dará un error como este. Así que sí, ¿por qué no hacer lo mismo? Sé amable. No tenemos que hacerlo. Va a funcionar sin eso, ¿verdad? Pero creo que es una buena idea. Entonces, ¿cómo se ve esto? Necesitas implementar tu proveedor en el nivel raíz o al menos bastante alto en el árbol. Eso es algo en lo que debes pensar. A veces puedes simplemente envolverlos y poner todos los proveedores allí. Hay un pequeño detalle aquí, que con todos estos proveedores, podrías estar pensando, oh, ¿realmente importa? Bueno, en cierto modo. Supongo que lo que diría es que los que cambian con menos frecuencia deberían estar más abajo en el árbol, ¿verdad? Porque recuerda esta cosa de desencadenar nuevas representaciones, pero esto es una especie de implicación de rendimiento. Esto es muy, sí, tienes que profundizar bastante para llegar a esa etapa, pero esencialmente funcionará donde coloques los proveedores. Pero de todos modos, puedes ver que tengo este proveedor de Chakra porque es la biblioteca de componentes que estoy usando en esta aplicación. Pero sí, simplemente implementé mi proveedor de contador, simplemente envolví la aplicación con eso, así que ahora estoy obteniendo algunas cosas en el contexto. Y luego solo necesitamos usar el hook en cualquier componente para acceder a eso. Importo mi 'useCounter' desde el archivo de contexto del contador y luego dentro de este componente funcional ahora puedo simplemente decir, hey, quiero el contador y quiero establecer el contador y se devolverán desde ese hook 'useCounter' y eso es todo. Y creo que la API para eso es muy simple. Entonces, antes de ver algo de código que también ejecutaremos en el editor, hablemos de esto rápidamente. Podrías estar pensando, bueno, es muchas opciones, ¿qué debo hacer? Sí, eso sucede, pero supongo que somos desarrolladores y estamos pagados para tomar decisiones, así que tenemos algunas opciones diferentes, pero la forma en que sugiero pensar en esto es que si puedes refactorizar un componente en un componente funcional utilizando hooks, siempre hazlo. Si tienes Redux, entonces el primer protocolo es utilizar los hooks de Redux, como hacer esa refactorización e intentar usar los hooks de Redux y descomponerlo. Si tienes React Router, lo mismo, utiliza sus hooks. Ahora, la mayoría de estas bibliotecas, si estás trabajando con una base de código heredada, la mayoría de las bibliotecas que están causando este efecto de envoltura con componentes de alto nivel, tienen una implementación de hooks, eso es lo que hacen, así que, sabes, nueve de cada diez veces, podemos hacer eso. Lo que sugeriría cuando hagas las refactorizaciones es tratar de identificar primero en la base de código cuáles son los objetivos fáciles, como lo que está al alcance de la mano y ve por esos, no vayas por los más complicados primero, eso te causará dolores de cabeza y hacer esos te ayudará a razonar sobre los demás. Y, ya sabes, siempre puedes implementar algunas de las estrategias que vimos antes también. Ahora sabes cómo, si absolutamente debes seguir utilizando un componente de clase en algunos casos, como con cualquiera de estas cosas, si necesitas introducir un nuevo fragmento de estado global y no quieres ponerlo en Redux, y no quieres pasar por todo eso porque estás tratando de alejarte de eso o lo has reconsiderado, entonces sí, lo que recomendaría es considerar el uso de contextos y luego utilizar un hook para exponerlo. Como lo que acabamos de ver. Y este es el tipo de enfoque que, supongo, la mayoría de las personas utilizan en la mayoría de las aplicaciones nuevas, me sorprendería si las personas fueran a Redux, las personas lo hacen, está bien. Es una solución de gestión de estado global. No hay nada de malo en hacer eso. Pero la mayoría de las veces no es lo que veo cuando alguien hace una aplicación nueva, es como si necesitan algún estado global, utilizarán un patrón que es muy popular, como lo que estaba hablando antes. Simplemente utilizan el contexto como estaba diciendo, pero solo tienen uno esencialmente, como un tipo de reductor global utilizando el hook 'useReducer' en su lugar. Y simplemente lo gestionan todo allí. Así que solo dentro de React porque tienes las mismas herramientas dentro de React, así que podemos hacer eso. Eso es algo que es muy popular hacer. Obviamente, si estás utilizando muchas de tus cuestiones de gestión de estado pueden provenir de cosas relacionadas con datos dinámicos y cosas de API. Entonces, si estás utilizando una API de GraphQL, Apollo Client se encarga de muchas de tus cuestiones de gestión de estado. Nuevamente, tienen sus propios hooks y también implementan una caché, que también actúa como una especie de almacén global. Y si tienes eso, definitivamente recomendaría leer sobre cómo Apollo Client lo hace, cómo utilizar su caché y la API de caché porque ya tienes esencialmente una tienda de Redux allí. Está haciendo exactamente lo mismo. Es como un almacenamiento global, está en el medio. Así que sí, hay muchas cosas diferentes en las que pensar aquí. Depende de tu caso, pero lo que diría es que sí, piénsalo, piensa en cómo quieres refactorizar. Y si vas a tener un fragmento de estado global en tu aplicación que no necesita estar en tu tienda actual de Redux, si ese es tu caso, entonces sí, utiliza este enfoque. Y si estás haciendo una aplicación nueva y necesitas un estado global, comenzaría al 100% con esto.

Esa sería mi recomendación. Quiero decir, como dije, hay muchas formas diferentes de hacerlo. Sí, podríamos discutir esto más, pero seguiré adelante. Así que sí, son solo mis recomendaciones, supongo, basadas en mi experiencia. Pero sí, veamos esto en acción un poco y también hagamos el ejercicio. Sí, no hay muchas más diapositivas. Permíteme mostrarte rápidamente, tengo que mover esto hacia abajo porque sigue apareciendo. ¿Cuál es este ejercicio con el contexto que vas a hacer? Básicamente, está aquí abajo. Un muy buen ejemplo relevante, supongo, de cuando definitivamente necesitarías usar contexto es cuando tienes algo como temas, ¿verdad? Donde tienes un modo claro y un modo oscuro. Porque necesitas transmitir eso a muchos componentes, ¿verdad? Y podrían estar en diferentes lugares del árbol. Es un muy buen ejemplo. Creo que incluso en la documentación de React, hablan de esto como un ejemplo de algo donde necesitarías hacerlo. Así que nuevamente, hola a todos. Me reuniré aquí solo por unos minutos. Solo un resumen rápido y cualquier pregunta sobre esto. Parece que fue bastante bien para la mayoría de las personas, aunque. Espero que lo hayas logrado. Ahora voy a mostrarte a todos una solución potencial para esto. Hablaré sobre algunas cosas, solo esperaré a que todos regresen de sus salas en 20 segundos. Aquí tienes una cuenta regresiva agradable. Genial, bien. Creo que todos los que han regresado ya han regresado. Echemos un vistazo rápido a esto y luego los dejaré continuar con sus tardes o mañanas o cualquier hora que sea para ustedes. Echemos un vistazo rápido a cómo podríamos haber resuelto esto. Todos pueden ver mi pantalla nuevamente, espero que sí. Entonces, sí, lo que queríamos lograr, si lo hiciste funcionar, probablemente algo como esto es la idea. Veamos el código y cómo podríamos haberlo hecho. Si echamos un vistazo al proveedor de temas en sí, básicamente solo necesitábamos gestionar este fragmento de estado. Entonces, esta cadena 'dark' o 'light', eran solo dos, y eso es lo que queríamos alternar básicamente. Entonces, lo único que realmente necesitábamos hacer era exponer una función en el contexto, que permitiera alternar este tema. Así es como elegí hacerlo, algunos de los tuyos se ven un poco diferentes, pero en esencia lo que hacemos es simplemente llamar a nuestro setter desde el estado allí. Si es 'dark', cambiamos a 'light', de lo contrario, podemos cambiar a 'dark'. Entonces, lo que hacemos es decir, está bien, esta función aquí, simplemente la voy a poner en el contexto en este proveedor del contexto del tema. Y luego ese proveedor de estilo, eso es lo que viene de styled-components y simplemente nos estamos conectando a eso. Esa cosa toma cualquier tema que tengas como una propiedad, pero ahora hemos querido tener esta cosa dinámica aquí. Entonces, todo lo que estamos haciendo es, sí, en lugar de que sea así, quiero que sea lo que está aquí. Y eso significa que cuando se cambie, esto cambiará, esto cambiará y luego esto cambiará. Y luego, sí, en cuanto al hook, lo sacamos exactamente igual que en el ejemplo, ¿verdad? Simplemente usas tu contexto, que se definió en el mismo archivo. Lo definimos allí arriba en la línea cinco en la parte superior y luego simplemente devuelves lo que está en él. Y en este caso, lo que está en el contexto para aquellos a los que el hook está alcanzando es solo esto, ¿verdad? Pero la razón por la que está en un objeto es que podrías comenzar, no sé, a agregar más cosas porque puedes agregar más cosas a tu contexto. Así que creo que siempre es, sí, es una de esas cosas que realmente me gusta hacer, es como meter cosas en objetos y luego desestructurarlos en el otro lado porque lo hace realmente, realmente extensible y cosas así. Entonces, ¿cómo lo consumimos en el otro lado, cómo lo consumimos? En la aplicación temática, bastante simple, en realidad. Sí, sabemos que eso está ahí. Simplemente invoco useTheme, ese hook devuelve esa función y solo necesito desestructurarla y ya está. Y luego simplemente se pasa al botón onClick, así de simple. Y, por supuesto, la otra cosa que debes recordar con esto es que habrías necesitado envolverlo porque si no lo haces, obtendrás este error. Pero eso fue algo de lo que queríamos hablar. Esto es ahora como una mejor experiencia de desarrollo, ¿no es así, si uso esto? Como useTheme debe usarse dentro de un proveedor de temas. Entonces, si alguna vez has usado alguno de estos proveedores de otras bibliotecas, siempre harán eso. Es lo mismo con el connect y el with wrap. Como todas estas cosas. Hacen este tipo de cosas donde te brindan un buen manejo de errores para los hooks y es como, sí, necesitas un proveedor de nivel superior porque con los hooks que usa React Router, por ejemplo, tienes el mismo patrón. Es como un proveedor de nivel superior. Bueno, se llama enrutador pero es un proveedor. Y luego usas el hook useLocation, por ejemplo, dentro de un componente, es lo mismo. Y si no tienes el enrutador, te mostrará un error muy similar.

Lo que han hecho, para ser claros, es lo mismo que estábamos haciendo ahora mismo, que es el proveedor en sí mismo, van a exponer, ya sabes, están exponiendo en la biblioteca algunos hooks y esos hooks tendrán lógica como esta, que te permite saber, como, eh, tienes que usarlo dentro del proveedor. Así que sí, esa es prácticamente la solución para esto. Espero que tenga sentido y puedas verlo, mm, sigue dando error. Ya no. Espero que eso haya sido bastante sencillo. Un poco más complejo, supongo, que el último. Pero nuevamente, creo que el punto que quiero destacar con esto es que, siempre intenta, siempre trata de hacer refactorizaciones, como hacer cosas en etapas, trata de cuestionar realmente, ¿puedo hacer esto con un hook personalizado? Si es un efecto secundario, como usar el almacenamiento local o algo así, o como el usuario, puedes hacerlo absolutamente con un hook. Si tiene un poco de estado, la respuesta es como, tal vez como el ejemplo que di antes, donde tal vez tengas un modal que es un modal, ¿verdad?, en toda tu aplicación, entonces es como, bueno, entonces podemos simplemente usar el hook personalizado y gestionar ese poco de estado allí. Pero si se trata de algo como un tema donde necesito acceder a esto, ya sabes, potencialmente en varios componentes porque aquí, ya sabes, lo necesito, ¿verdad?, porque este envoltorio está obteniendo cosas del tema, está tomando el fondo, el primer plano de allí, y tal vez en muchos lugares lo necesito, que suele ser el caso con los temas, entonces ahí es donde debes pensar, oh, el contexto. Lo mismo con el contador. Si necesitas un contador global y dices, oh, necesito saber qué es eso en mi encabezado, y también necesito saber dónde está en algún componente anidado, ya sabes, en la página diferente, lo que sea, entonces sí, podría ser que puedas ponerlo en el contexto, pero siempre hazlo en esos pasos y ten cuidado cuando recurras al contexto porque estás introduciendo algo global y vendrá con algunas complejidades y ten cuidado de no intentar gestionar la misma pieza de estado en dos lugares. Eso realmente será confuso, así que. Genial, sí. ¿Alguna pregunta sobre-? Tengo una pregunta.

Yeah. I kind of had it working, and then I got an error. I put it in the chat, and I have the same code as you. Maybe it's in the app.js? In which one? App.js, this one? App.js, what line do you, or you have the functional component and the render component. You have the line 24. You have to have it a comment out line 24 and then run it. Should still work, I guess. Yeah. It should still work. Because that's these components that are in the example. So I should be able to just get rid of all of those, right? Because essentially, those are the example components, those are the ones that are showing up here. But it shouldn't, should be fine.

So that theme, that component, that's the top level one here, it's this one. And that's where you've got your toggle theme and your use theme. Oh, I probably didn't add that one to the.... Okay. I see, I didn't add, go to APPJSX one more time. So you could either, you've got to either add it there or right at the top level right here, what we talked about. Like, you've got to have that provider, otherwise that would flash the error we saw before. But another place you could add that, lower down in the tree, is actually in APPJSX, because you don't actually need it right up there. You could have it here, just depends where, which of the components that need access to that piece of context.

Okay, thank you. No worries, cool. Any other questions about this? Yes, I have a question, which is, if you were to have a rule of thumb as to how down the context could be placed within an app, what would you say? For example, imagine that instead of wanting, or instead of needing to style the entire app, you just wanted to style example one, for example. Would it be okay just to wrap one of the components with the context, or is it weird? Yeah, no, really good question, I think. I mean, so the thing is, with these providers, is they are often at the top level because of the nature of them being legal, but yeah, that is something you can kind of question. If here, you sort of, yeah, you go into app and you say, well, I only really care about it being on the context here, there's no reason why not to introduce it here, and actually there's a small... That's actually kind of a bit of a performance enhancement, because remember when components re-render, they'll re-render all their children as well? Now this isn't really a big implication until you're like really running something at scale, but it's just something to bear in mind, so generally speaking, even with providers like at the top level, the thing that's worth thinking about is like which thing is changing the most? So the outermost one is probably something like your roots, which is the racked router, because you don't tend to change that that much, and then it goes down from there. But yeah, you're absolutely right. When you're doing a custom, something that's a custom bit of context, you really can question that and move it further down the tree. That'll do two things, one it will clean this up, and second it will help out with unnecessary re-renders, because if something changes in here, it's gonna re-render all of the children, which is like this, but maybe it's also a bunch of other stuff, and you can look all of those and benchmark it and you'll see what I'm talking about. But yeah, really good question. I mean, I would consider doing that further down here. Another thing in the same vein that I was discussing with a couple of you in your little group is if you end up with a bunch of these, there's sort of different ways that you can tidy it. One of the things that you could do is sort of like create one more file which is called providers, and then you just put them all and then you just put children underneath and then you can just put in this top level like one. But the other sort of thing you can do is really think about yeah, if they're custom ones, do I need this many, could I do it in one? So if for example, encounter provider and then you end up with theme provider two and other providers for other bits of global state, you could start to say like hmm, couldn't I just like, is my application simple enough but like all of the state I need to keep track of, can't I just keep track of it in this one place? And then if that's your case, you would end up with a bunch of lines like six. So you might wanna like reach for the use-reduce-the-hook, manage that complex bit of state and just put that onto the context if that makes sense. That's another thing that I've kind of advocated for I guess because most of the time, you're not gonna have that much global state even in a Greenfield application because it's probably gonna be managed for you elsewhere. I saw a few of you looking at the, what's it called, the use-query. Like that's managing API stuff for you. If you have Apollo Client going on, that's also managing the API stuff for you. That's where a lot of state management complexity tends to creep in. So then it's sort of like what's left. Well, first question, can I do it on a hook. And if it's a side effect, you can. And then if you need something dynamic and I need to be able to set it and all that stuff, then yeah, you can reach for context, implement some custom context like we've been doing here. And hopefully you can keep it all quite neat. Yeah, hopefully all of that makes sense. What's the big guess? Cool. It's the tricky one, isn't it, because always when we're talking about, it's like a problem where these patterns are problems that you have as an app grows. They're not problems that you may initially have, and it's that thing of like, oh, when do I reach for this? And for example, with states, we already know, okay, try to collocate states as much as possible. So that's the rule of thumb. So maybe there would be something similar for the contexts. Yeah, exactly. I mean, all they're doing is, what we were talking about is there's a bit of state that's managed here. So if you say, what else is global state that I need to manage like here, and manage it here and put it like on this context, you know, there are sort of techniques you can do as well. There are other things to consider here as well, where it's like you might want to create more than one context, like one context for the set count and one for the count just so that you can create two hooks. And why would you do that? Well, you might not necessarily, where you use it, need both of these. You just need one, and it just makes the API a bit nicer. So there's some things like that as well that are worth considering. There's a really good article about this sort of approach to using context that Kelsey Doz wrote as well. I will post it, it's linked in the slides as well, but I will post it just now in the discord channel. I think it's this one actually. Yeah, this article's really good on this same topic. I was doing it a while ago, but you'll see it's sort of a similar idea to what we were looking at here. But yeah, I'll post it in our discord channel so you can read at leisure. Cool, thank you very much, Richard. Cool yeah, I think that probably wraps it up, but yeah. Can I show you my screen at the end? I couldn't get it to work and I have the same code. If it's okay with you? Yeah, yeah, sure.

Si está bien para ti? Sí, sí, claro. Este es el error que estoy obteniendo. Y... No se devolvió nada en la renderización, usa una imagen aleatoria. Okay, veo el código. Okay, y el código es, así que este es el proveedor SIM. Sí. Eso se ve bien. Sí, esto se ve bien. Es lo mismo que básicamente tú. Y luego si voy a la aplicación STIM, sí, veamos ahí, ¿puedo ver algún index.js también? Se ve bien. Si vuelves al proveedor FEMA de nuevo. Sí. Ese es el usuario predeterminado de Expo. Sí, se ve bien para mí. No lo he visto todavía. Si alguien más lo ve, supongo que lo gritaré. Parece que hay un error. ¿Puedo ver el error de nuevo? Tal vez venga de otro lugar. Sí, tal vez el error esté en otro lugar. No se devolvió nada de mi error. Oh, pero es un error que viene de use random image. Sí. Bueno, supongo que no tiene nada que ver con nuestro tema. Así que si simplemente vas a app.jsx. Creo que viene de otro lugar, básicamente. Si comentas la línea 25 también. Y luego comenta la línea 30 y la línea 34. Sí, okay, ahora debería funcionar. Sí. Okay, entonces el problema está en esos archivos. Está en otro lugar. No estoy seguro de cuál, si tuviera que adivinar, probablemente esté en algún lugar del ejercicio dos dentro de tu componente de render props porque vi que el nombre era con la U mayúscula. Pero quiero decir, sí, estará en uno de esos en lugar de este. Okay, gracias. Lo siento por eso. Muchas gracias. Genial, supongo. Sí, si no hay más preguntas, dejaré que todos continúen con su tarde. Muchas gracias por unirse. Muy buen trabajo. Sí, por favor siéntete libre de marcar el repositorio con estrella, completar el formulario de retroalimentación. Di cosas bonitas si te gustó. Espero verlos a todos en el próximo. Estaré disponible durante el resto de la conferencia, voy a revisar esas cosas. Así que siéntete libre de enviarme un mensaje en Discord o contactarme, estoy aquí, sí. Genial. Lo haré, lo haré. Para el resto de las personas, ¿ven el canal en Discord, verdad? Porque no lo tengo en mi canal. Probablemente necesites pedirle a Clara o Daria que te agreguen a los canales, supongo. Sí. Es un canal llamado hashtag April7-modern-React-patterns. Sí, pero quiero decir, estoy incluido en algunos de los canales pero no en ese, algunos de los talleres. Sí, yo también. Sí, yo también. Quiero decir, el próximo trabajo de desarrollador, probablemente sea un seminario diferente que tuvo lugar al mismo tiempo. Pero nos confundimos, así que no lo estamos viendo... ¿Puedes tal vez publicar un enlace al documento, las diapositivas en el chat de Zoom? Porque para cuando nos agreguen, podríamos perderlo. Sí, lo haré. Déjame solo, si puedo, lo pondré... Tal vez puedas encontrar el camino allí con este enlace también. Veamos, siguiéndolo. No. Okay, quiero decir... Para mí dice que no se pudo cargar el mensaje. Así que para mí fue, no pude cargar los mensajes. Por favor, inténtalo de nuevo. Sí. Así que no estamos incluidos en el canal, supongo.

Déjame ver si puedo. Incluso si intentas intentar de nuevo. Intenta de nuevo. Intenta de nuevo, no tiene sentido. Está bien. Porque está bloqueado y nosotros no. Sí, no hay problema.

Espera un momento, este enlace debería funcionar para un enlace a las diapositivas. De acuerdo, genial, gracias. Sí, es Google Docs, así que no hay problema. Gracias.

Supongo que ahora recibirás un correo electrónico de nosotros, para acceder. Espera un momento, déjame... Los 20 de nosotros.

Sí, quiero decir, todo estará publicado en... Espera, cualquiera con este enlace puede ver, aquí vamos, espera, déjame obtener otro enlace. O tal vez Richard, no sé si la organización nos enviará otro correo electrónico con la grabación y también las diapositivas y toda la información de Github y todas esas cosas, tal vez? Sí, todo está en Discord.

La cosa con Discord es que a diferencia de este chat aquí, se graba, por eso si puedes acceder al canal de Discord, se mantiene esencialmente. Pero creo que cuando termine esta llamada, perderemos este chat. Entonces, ¿debería funcionar ese segundo enlace que acabo de enviar? Estaba jugando con el...

De acuerdo, así que creo que publiqué en el canal de solución de problemas y Daria Xavala me está diciendo que le envíe un mensaje directo con mi número de pedido. Así que creo que les faltan personas que hicieron pedidos y... Pero sí, de todos modos, ese enlace que está en nuestro chat ahora definitivamente está funcionando porque lo he abierto para cualquiera con el enlace. Así que para aquellos que están aquí, sí, deberían poder ver eso y ahora lo publicaré en el canal de Discord también. Así que... Gracias, Richard. No te preocupes. Muchas gracias. Sí, gracias. ¡Salud! Igualmente. Que tengas un buen día. Genial. Gracias a todos. Adiós. Adiós. Gracias. Gracias. ¡Salud! Muchas gracias. Adiós.