Master class Custom hooks en React, ciclo de vida del componente, aumenta la performance 100%

Подписаться 57 тыс.

Просмотров 19 тыс.

50% 1

¡Buenas, buenas mi gente !
Voy a dar una master class sobre React custom hooks y ciclos de vida de componentes el 18 de Marzo a las 23 Horas España en el increible server de "Code Societey" por parte de Jhonny Barrios !!!
Es GRATIS y también lo transmitiré en directo por RU-vid, espero que les guste.
¡A por ello!
Link a repositorio: github.com/App...
Si quieres hacer una donación: streamelements...
#comunidad #canal #server #discord #programming #eldenring #podcast #discordserver #members #live #stream #gameplay #fromsoftware #clase #ReactJs #customHooks #hooks #lifecyle #componentes #framework #library
▬ Links de interés ▬▬▬▬▬▬▬▬▬▬
Link a Spotify: spoti.fi/3y281cY
Link a la comunidad: / discord
Link a la comunidad de Facebook: shorturl.at/jkmL6
Link a instagram: / gentlemanprogramming
Link a twitter: / g_programming
Link al libro "Cómo ser front-end sin fallar en el intento: Tus primeros pasos en la programación web": amzn.to/2ReBuzL

Наука

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 80

@christianmiguez1379 Год назад

No sabes lo que estoy disfrutando este domingo a la mañana, chupando unos mates y recontra enganchado con el contenido!! GRACIAS!! 🙌

@edgroj2904 3 месяца назад

Sos un crack!! te felicito por todo tus conocimientos y te agradecemos por compartirlos con la comunidad

@edgarvaldez2599 2 года назад

Muy buena explicación, con este vídeo aprendí la equivalencia de "observable.unsubscribe()", el cual se usa mucho en angular, en ReactJS

@GentlemanProgramming 2 года назад

Eso mismo !! 🤓

@coff3andprograming 5 месяцев назад

Para alguien que viene de Angular y que ya le agarrado cariño, al principio es un poco complicado soltarlo parabponerce a aprender otra cosa, pero gracias a tu contenido le estado metiendo con todo a react y vamos para delante ❤❤

@GentlemanProgramming 5 месяцев назад

Esooo vamos que la idea es que luego puedas aprender cualquier cosa, tu puedes !!!

@joseluistirella 5 месяцев назад

Me explotó la cabeza lo limpio que quedó ese código. Te felicito y gracias por compartir tu experiencia. Saludos.

@nicolasdebiaggi776 2 года назад

Fuera de joda, es una locura todo lo que explicas y como lo haces, hay que hacer un research grande para llegar a encontrar esta calidad. Hace días te vengo viendo y sigo aprendiendo. Te vas para arriba hermano, muy bueno

@GentlemanProgramming 2 года назад

Muchas muchas muchas gracias Nicolás !! Aprovecho mucho tus palabras 🥲

@JRTatto97 2 года назад

Crack mi hermano, que forma de explicar, no me aburrí, buena velocidad de explicación

@GentlemanProgramming 2 года назад

Gracias Junior !!! la voz como que se me muere un poco al final siempre pero hacemos lo que podemos jajaa

@LeoZeronljz Год назад

La verdad unos de los mejores creadores de contenido acerca de React los tips y recomendaciones de alto nivel Exitos

@ITALO070495 2 года назад

Buena explicación, me gusta que expliques con partes del código

@GentlemanProgramming 2 года назад

Yes ! estoy tratando de encontrar el balance para la teoría y la parte práctica todavia, muchas gracias !!!

@LeoocastStudios 2 года назад

Está muy bueno. Hice algo parecido en mi equipo pero en flutter, el nombre por el que opté fue: executeAsync. Es muy parecido a lo que hiciste pero le agregué otros 2 params, beforeCall y afterCall, para controlar algunas acciones para realizar antes y después de la llamada. Y un compañero lo extendió aún más con una prop de id para poder cancelar peticiones en cola. Lamentablemente vi tarde el anuncio del live y me hubiera gustado poder estar, me gustan mucho tus videos y la forma didáctica en que los presentas, te seguiré de cerca, saludos!

@GentlemanProgramming 2 года назад

Muchas gracias Leo !! En mi caso lo hago de esta manera ya que en mi project uso Redux ToolKit ya que quiero seleccionar librería por librería de forma específica y tratar de usar lo menos posible. Justo el tema de utilizar funciones genéricas y reutilizables es ver hasta dónde quieres aumentar la lógica ! Llega luego un punto donde se hace engorroso su uso.

@AGriffith 2 года назад

Uf buenísimo justo quería entender bien los custom hooks, estás rompiéndola con tu contenido! sigue así :)

@GentlemanProgramming 2 года назад

De nada y muchísimas gracias !!!

@bryancirelly8116 2 года назад

Muy bueno! es casi la explicacion de lo que hace react query por detras hecho a manito

@GentlemanProgramming 2 года назад

Muchas gracias !!! La verdad que fue una de mis charlas que más me han gustado dar :D

@leoprone1 11 месяцев назад

Gran clase! muchas gracias!

@Deus-lo-Vuilt Год назад

Gracias por el video Alan , estuve en el directo y fue buenisimo !

@LeiferMendez 2 года назад

Aprendiendo React con el mejor! 🙌🙌

@GentlemanProgramming 2 года назад

Vamoooo Leifeeeer

@fesd2501 2 года назад

Increible explicacion, inicie en react justo en la version 17 y se me hizo un poco entener las versiones anteriores ya que en la actual solo uso functional components.

@GentlemanProgramming 2 года назад

Yes ! Ya todo son hooks !

@leonss2356 Год назад

26:06 la doble request no es por el useEffect ni por el arreglo de dependencias (Dependency Array), es por el StrictMode de React que hace eso por temas de debugging. Sobre el dependency array: Darle un array vacío hace que se ejecute solo al montar el componente (componentDidMount) No darle array hace que se ejecute cuando se monta y en cada update (componentDidMount + componentDidUpdate) Mientras que darle un arreglo con dependencias hace que se ejecute al montarlo, y cuando se actualicen sus dependencias

@GentlemanProgramming Год назад

Yes ! Bien explicado :)

@brachintosh8337 2 года назад

Me volaste la peluca Gentleman ! Muchas gracias por la aclarar de manera simple y didáctica el uso de Hooks que son elementales en React. Que lindo cuando alguien sabe expresar de manera tan fluida el chino que yo veo a la hora de leer documentacion nueva que nunca usé.

@GentlemanProgramming 2 года назад

Jajajaa muchas gracias Brian !! Sos un crack

@matiastorres5993 2 года назад

excelente clase brother!! que gusto encontrar tu canal!

@relaxingmusic5928 2 года назад

Naaaa, sos el menor canal de programación por lejos, esta info con esa explicación vale millones xd Estás para montarte una academia, tenes mucha capacidad para enseñar Muy crack exitos y traenos mas contenido asi

@GentlemanProgramming 2 года назад

Gracias miles !!! El content seguirá llegando :D

@diego-dev4162 2 года назад

GENIAL!

@GentlemanProgramming 2 года назад

Muchas gracias Diego !!

@jonasromanespaillat9566 2 года назад

No sabes cuanto se agradeceria a la comunidad de Js esos archivos en Js

@GentlemanProgramming 2 года назад

Están en la description !! pero sí que los tengo que hacer una librería si o si, muchos me lo piden !!!

@elmilitar143 2 года назад

Saludos Gentleman es posible que hagas unos videos explicando lo que viene siendo lo que piden ya avanzado, y es el tema de los testing es una falencia siempre aprender lo que es la aprte practica y de desarollo, pero siempre olvidamos sosas como el testing.

@GentlemanProgramming 2 года назад

Yes ! Una especia de roadmap dices verdad ? Me interesa ese vídeo ;) y lo de testing ya lo tengo visto el cómo hacer el vídeo 😇

@christianjtr 2 года назад

Buenísima la explicación!!!! No sé si ya lo han comentado .... En el minuto 36:04 pudieras agregar el finally { setLoading(false) } .... :) ... Para ejemplificar un poco situaciones en las que quieres que se ejecuten cosas, haya fallado o no la petición ....

@GentlemanProgramming 2 года назад

Muy buen agregado ! Totalmente, si quieres que corte la ejecución del loading, con agregarlo en el finally ya estaría :D

@crhistianbetetanavarro1689 2 года назад

Sigo tu canal desde hace poco y me preguntaba si dispones de algún curso completo en alguna plataforma. Por otro lado, mis más sinceras felicitaciones por el aporte que haces a la comunidad. Tu contenido es impresionantemente bueno y sobretodo útil para ir mejorando en el mundo del desarrollo 🔥🔥🔥

@GentlemanProgramming 2 года назад

Que grande Christian !! Tengo un curso de Typescript en Platzi ! La verdad que estoy bastante orgullo de el ya que es casi 5 estrellas. Igualmente estoy tratando de hacer todo lo posible para generar cursos por a RU-vid ya que no quiero ganar dinero con esto, solo aportar a los que no pueden pagarse un curso todo mi apoyo y que estén cubiertos. Cuando empecé no había tanta información de manera tan accesible y nunca tuve la figura de mentor y me encanta cuando me toman a mi para ese puesto.

@chalvarenga96 2 года назад

@@GentlemanProgramming ¡Tremendo! No sabía que tenías un curso en Platzi, tengo mi suscripción anual y ahora lo busqué y tiene sus añitos pero, de igual forma, lo voy a terminar ya que tiene muy buena pinta. 😁

@GentlemanProgramming 2 года назад

@@chalvarenga96 se mantiene igualmente todo lo que enseño !!! No te lo pierdas :)

@facumino3231 Год назад

Excelente explicación! Vengo de Angular y aprendiendo React ahora.. Consulta, se podría hacer algo similar con Graphql en vez de rest?

@josecarballo7605 2 года назад

seria genial que expliques el tema de los interceptores de axios

@GentlemanProgramming 2 года назад

Lo tengo explicado en mi último mentoring ! Aunque voy a hacer un vídeo del mismo seguro seguro 😬

@rconr007 2 года назад

No me gusto nadita. ME ENCANTO!!! Muchas pero muchas gracias. La mismita cosa de toda la vida (te suena conocido? 😆). Que eres un genio maestro. Sigue brindandonos tus atributos. Felicidades!!! Bomba!!!

@GentlemanProgramming 2 года назад

ajjajaja Muchas gracias a tí por tan increíble comentario Agent 007 !!

@rconr007 2 года назад

@@GentlemanProgramming Ya sabes que eres mi idolo (Bomba). Me hacen reir tus frases. Es muy bueno el alegracer mientras trabaja. Y por eso es que tu eres mi idolo de la programacion. Muchas gracias!!!

@ricardomarin8019 2 года назад

Seria de lujo que hicieras un curso donde estructures un proyecto un poco más grande desde 0 y por ahi meter un poco de clases de typescript

@GentlemanProgramming 2 года назад

Estoy viendo porque con mis tiempos… pero estaría increíble :)

@chalvarenga96 2 года назад

Me pareció un video brutal. Tengo una duda, ¿la cancelación nativa de Axios sería equivalente al AbortController? En casi de que sí, ¿por qué no utilizaste directamente la calcelación de Axios? Saludos 🙌🏻

@GentlemanProgramming 2 года назад

Hola !!! Más que nada por que axios a partir de la versión 0.22.0 soporta de forma nativa el abort controller y sería la forma más “puritana” de hacer las cosas. Siempre trato de abstraerme lo más posible de librerías o frameworks para tener la solución más genérica y que pueda cubrir más de un flanco.

@chalvarenga96 2 года назад

@@GentlemanProgramming Interesante, gracias por tu respuesta. 😁

@josecamilorodriguezvera8029 Год назад

Hola Alan eres demasiado en la manera explicar cosas que para la mayoría de nosotros lo vemos complicado... tengo una inquietud no se si estoy equivocado pero te pregunto tus videos son para ya un grupo de personas que tienen un nivel superior que un junior?? es decir para una persona que empieza x primera vez en este mundo de la web no estaría preparada para tan valiosa información, que tienes en tu canal creo yo??

@GentlemanProgramming Год назад

No para nada ! Tengo contenido para todos los seniorities y modalidades !! Voy ordenando todo en las playlist del canal, desde más fácil a más difícil, estilo cursos

@Luisito_Silva 2 года назад

🙂❤👍

@GentlemanProgramming 2 года назад

🙂🙂❤❤👍👍

@ThePacmanPl4y 7 месяцев назад

Tengo una duda, por cierto gracias a esto aprendí lo importantes que son los ciclos de vida* En cuanto a esto me di cuenta que con las imágenes también debería aplicar no? Ya que por ejm una api que me de muchas imágenes con una llamada, osea una api de search y luego me entrega todas las urls. Cuando yo cambie de vista estas imágenes se seguirán cargando. Supongo que eso también es costoso para el servidor, pero también tiempo para el cliente ya que al dejar la vista aun se siguen cargando las imágenes anteriores provenientes de las url. Se me ocurre también controlarlas con fetch sin embargo también tendría que hacer algún sistema de cache personalizado. No se si me estoy complicando la vida o estoy por el camino correcto, lo puedo hacer pero si crees que hay alguna alternativa mas simple te agradecería que quizás me respondas. Pd. Ahora me gusta mas tu bigote jajjs.

@felixfigueroa 2 года назад

Alan por favor reconsidera hacer algo de Next.js con typescript y Redux...para mi la estas rompiendo loco con tu estilo y la forma de enseñar...🚀👊🔥desconozco si hay un discord o twich pero me gustaría sumarme.

@GentlemanProgramming 2 года назад

Jajajaj trato siempre de enseñar independientemente del framework ya que todos tienen las mismas bases, pero no niego que lo haga !! Fíjate en la descripción que tenemos discord :D

@leandromarcelo2340 2 года назад

Hola, che en el minuto 49:34 al lado del import de axios dice algo, para qué es? Qué hace? Para que lo utilizas? Lo recomendas?

@GentlemanProgramming 2 года назад

Es una extension que te dice el peso de cada import, esta bueno para no equivocarse e importar paquetes grandes ! marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

@calleb1991 2 года назад

no tienes un video donde pueda ver mas adetalles cuando creas esos custom hooks

@GentlemanProgramming 2 года назад

Hola ! Por ahora no, tienes en la descripción el Repositorio también del código por si quieres verlo e irte guiando con este mismo vídeo :)

@yagorodi 2 года назад

Muy bueno! una consulta, que font usas en el vscode? 🤔

@GentlemanProgramming 2 года назад

Uso dos ! Fira-code y jetbrains mono, los dos free !!

@Carmen_23 2 года назад

En react no debería utilizarse className en vez de clase? Podrías hacer un video sobre react router v6? Saludos desde Barcelona(estoy en un bootcamp aprendiendo programación fullstack

@GentlemanProgramming 2 года назад

Exacto ! En react usa className para las clases, y está dentro del roadmap de las cosas a enseñar :D