Тёмный

useEffect explicado al detalle - Con 3 mini Apps - React 

Luis Cabrera
Подписаться 7 тыс.
Просмотров 35 тыс.
50% 1

El useEffect de los Hooks más importantes y usados en React y dominarlo al 100% nos permitira crear gran interactividad 🔥 Aprenderemos:
✅ Como usarlo
✅ Ciclo de vida
✅ Efecto - Sin dependencias
✅ Efecto - Arreglo vacío
✅ Efecto - Una dependencia
✅ Efecto - Múltiples dependencias
✅ Efecto - Cleanup (return)
Recursos
⭐⭐ (Importante) API utilizada
jsonplaceholder.typicode.com/
⭐ Repositorio de GitHub del proyecto
github.com/luismcabrera/useEf...
⭐ Extensiones VSCode utilizadas
- ES7 React/Redux/GraphQL/React-Native snippets
- Prettier (Formatear código)
Aprende y practica más con
🚀 useState explicado al detalle - Con 5 mini Apps - React
• useState explicado al ...
🚀 APP Perritos API y Manejo de errores
• React App ✅ DOG API - ...
🚀 APP con Bracking Bad API
• React App ✅ Breaking B...
🚀 Primera APP con React
- Lista de tareas con LocalStorage y despligue a Netlify
• ReactJS con Hooks ✅ ...

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

 

8 сен 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 152   
@angelodonde
@angelodonde Год назад
Vaya, que forma de compartir, al grano, sin paja y directo a los chacos.
@leonardosanchez1957
@leonardosanchez1957 Год назад
Hola Luis Cabrera, quería comentarte que subí un post en LinkedIn recomendando tu video, no pude encontrar tu usuario y no pude nombrarte, gente como vos con el afán de compartir conocimiento como vos hace falta en todo ámbito, pero encontrar este video en nuestro rubro es oro, encontrar a alguien que explique con lujo de detalle y que vaya de menos a más, en nombre de muchos dev autodidactas o inclusive devs que se encuentran cursando sus estudios universitarios como yo, te agradecemos de todo corazón. Saludos desde Tandil, Argentina.
@LuisCabrera
@LuisCabrera Год назад
Muchas gracias por tomarte el tiempo Leonardo :)
@adriandiaz8024
@adriandiaz8024 3 года назад
Mi meta de pandemia ha sido aprender react, y he consumido cientos de horas de turoriales en RU-vid y no había encontrado ejercicios más claros y entendíbles como los de este canal , este comentario es para dar una gran felicitación por el contenido, e impulsando a que continúe compartiendo conocimiento 👏
@LuisCabrera
@LuisCabrera 3 года назад
Mil gracias amigo :) me alegra que pueda ser de utilidad y si cada que pueda iré subiendo más
@samirmuhana
@samirmuhana 3 года назад
Estamos iguales Adrián vamos con react
@jamesmoose7196
@jamesmoose7196 2 года назад
El canal de bluuweb también es muy bueno creo que estos canales son de los mejores que eh visto para aprender 👀✨ estoy muy agradecido con las personas que dedican tiempo a compartir su conocimiento
@josevictorvillalucero1391
@josevictorvillalucero1391 2 года назад
apoyo el comentario del hombre.. de todos los tutoriales, este ha sido el mas certero.
@germanpinto883
@germanpinto883 Год назад
no entiendo como este pana no tiene un millón de suscriptores
@coff3andprograming
@coff3andprograming 2 месяца назад
El nombre es fácil de olvidar y los algoritmos de youtube no lo ponen, algo que le hubiera ayudado al pana es tener un nombre que sea fácil de relacionarlo con código o con programación
@marcosMartinez-wm7bd
@marcosMartinez-wm7bd 2 года назад
Recién voy por el minuto 10 y ya lo entendí!!!!! Pero que buen video!!!!!!
@quinojuan2
@quinojuan2 Год назад
Merece ser visto mas de una vez para comprenderlo bien. Buen trabajo. Sigue así
@hugobarboza9144
@hugobarboza9144 2 года назад
Este video es Oro puro Luis!! Muchas gracias por tu generosidad al compartir tu tiempo y estos conocimientos.
@ultrasoftware9077
@ultrasoftware9077 2 месяца назад
Hola luis , felicitaciones eres el mejor para enseñar , gracias por tu tiempo.
@gonzalo2791
@gonzalo2791 Год назад
amigo, es increible tu habilidad para explicar. se me esta haciendo super facil entender todo sos un genio
@matiespinoza
@matiespinoza Год назад
Eres un genio para explicar! Brutal la explicación y todas las buenas prácticas del final! Recomendado por 1000%
@juliollina
@juliollina Год назад
🤘brutal esto es una catedra.....💣💥 Maestro
@cordoobez
@cordoobez 2 года назад
Excelente explicación!!!! Te felicito porque ayudas a muchas personas, incluyéndome
@donparyman
@donparyman Год назад
Eres un capo tio, mira que he visto tutoriales pero asi explicado mis dieses
@arnoldcoto2065
@arnoldcoto2065 10 месяцев назад
Excelente explicacion, la mejor que he encontrado
@lestherjosue1729
@lestherjosue1729 2 года назад
No he terminado de ver el video y ya te ganaste un suscriptor.
@hmujicadev7623
@hmujicadev7623 2 года назад
Hola Luis Cabrera GRACIAS por los vídeos están perfectos para saber el porque de todo, explicas muy bien.... gracias por dedicar tiempo en enseñar
@HAleprimo10
@HAleprimo10 Год назад
Luchoooo, ud es un magistral maestro! *.* por eso se ganó mi susccripción y mi "like"!! Siga en esas, parce! :D
@richardcarmonaestrada5920
@richardcarmonaestrada5920 2 года назад
Hice una serie de chapuzas para obtener un comportamiento similar a los ejemplos del video por no entender muy bien este hook , ahora toca refactorizar mi código será costoso pero dormiré tranquilo , gracias Luis tienes un talento al explicar sigue adelante
@luisfernandomontoya181
@luisfernandomontoya181 2 года назад
Increíble vídeo, excelente contenido. Muchas gracias por compartirlo!🙏🙏🙏
@martinandonegui7256
@martinandonegui7256 Год назад
Qué agradable video, el timing justo. Gracias
@eduardoflorez6075
@eduardoflorez6075 2 года назад
WoW como puede explicar tan bien?, Excelente video 👌
@mariacamilamontealegremerc5892
@mariacamilamontealegremerc5892 2 года назад
ESPECTACULAR!
@josephlojan827
@josephlojan827 2 года назад
Maestro maestro maestro
@enriquemarin8842
@enriquemarin8842 2 года назад
Ya te lo han dicho, pero no importa repetirlo: es el videotutorial más claro de RU-vid sobre React js (y sobre el useEffect, en particular). Está magníficamente bien explicado y apoyado con claros ejemplos. Ni siquiera en la documentación se aclara tan bien estos temas. Enhorabuena por tu trabajo, Luis.👌👍😃
@martingalenda877
@martingalenda877 2 года назад
Coincido, despues de ver seis canales distintos. Este sin duda fue el que mejor lo explicó. Like por eso!!!
@aspxsosa
@aspxsosa 2 года назад
Mas claro? el agua.. excelente explicacion amigo.. gracias!
@ultrasoftware9077
@ultrasoftware9077 2 месяца назад
un comentario acerca de usecallback , que es un poco confuso, el use callback guarda en cahe la funcion y el resultado si no cambian sus parametros. Luis es el mejor que he visto en este tema y su forma de enseñar es 100% entendible. MIl gracias
@VictorSamuelMosqueraArtamonov
Que bien hecho este tutorial, gracias por compartir.
@jorgeperez8914
@jorgeperez8914 11 месяцев назад
Muchas gracias por la excelente explicación!!!
@chobechuka2038
@chobechuka2038 2 года назад
Gracias por este genial tutorial. Ha aclarado todas mis dudas.
@ivanpatroclo4310
@ivanpatroclo4310 3 года назад
Luis Cabrera, es usted re-capo, realmente una explicación brutal, muchas gracias. Por favor, siga haciendo estos vídeos tan didácticos.
@raxabi8649
@raxabi8649 2 года назад
Eres una maquina, muchas gracias por compartir tu conocimiento, lo explicas excelente :D
@agustingomez7137
@agustingomez7137 3 года назад
Tras un tiempo intentando comprender bien este Hook eres el primero de una larga lista que ha sabido explicármelo a la perfección!!! Mis felicitaciones! Aquí tienes un nuevo seguidor!!! 👏👏👏👏
@arturoperezgonzalez5221
@arturoperezgonzalez5221 2 года назад
Van 2 videos que veo de Luis Y he de decir que este es el mejor canal para aprender React.
@juanlopez-mc2wp
@juanlopez-mc2wp Год назад
que excelente ejemplo lo felicito.
@ronaldos3738
@ronaldos3738 Год назад
Excelente, gracias amigo, muy bien explicado
@davidwilsoncruz9258
@davidwilsoncruz9258 2 года назад
deberia verte el mundo, vas hasta lo mas profundo de useeffect, es como que aplicas el metodo ingenieria, el por que de todo, ojala todas las asignaturas se expliquen asi, sos un genio
@alesofton
@alesofton 3 года назад
que buenos los videos y practicos... sigue asi.!!!!
@Luisito_Silva
@Luisito_Silva 3 года назад
Excelente explicación Amigo...!!!
@matespinosa09
@matespinosa09 3 года назад
Te ganaste un seguidor Hermano, muy clarito
@acceso02
@acceso02 Год назад
Muy clara la explicacion! Muchas gracias!
@Noisetribe
@Noisetribe Год назад
la mejor explicación!!
@kramElorat
@kramElorat Год назад
Excelente explicación tienes un like y una nueva suscripción.
@davidcanalespaez6325
@davidcanalespaez6325 Год назад
Maestro, tienes un don, estaba muy enredado sobre todo con la función de clean up(). Gracias.
2 года назад
Muchas Gracias; excelente explicación!!
@armandoperezbringas9049
@armandoperezbringas9049 2 года назад
Eres un dios del conocimiento y la transmisión del mismo. Tienes un nuevo suscriptor y alumno, ojalá subas más videos. Este curso es oro, gracias por compartir lo que sabes. Saludos!
@williamfabiangonzalezcobo4540
@williamfabiangonzalezcobo4540 2 года назад
excelente bro muchas gracias empece con react y venia de Angular y es muy diferente no entiendo como decian que los dos se parecian jajaaj
@davidwilsoncruz9258
@davidwilsoncruz9258 2 года назад
genio amo estos videso bien al detalle ;)
@MrZextor
@MrZextor 3 года назад
Que crack!!!, he aprendido mil veces mejor con los videos, por favor sigue así...
@mauricioantoni1
@mauricioantoni1 2 года назад
´Luis, felicitaciones. De verdad te mereces ser llamado MAESTRO. La manera tan pedagógica y el nivel de detalle que manejas, hace que conceptos complejos sean muy claros y muy fáciles de aprender. Este curso ha sido maravilloso para mi y para avanzar rápidamente en el aprendizaje de REACT. Muchísimas gracias por tu aporte.
@cuberos7430
@cuberos7430 3 года назад
Excelente Explicacion.Mg 👍
@jorgeherrera6895
@jorgeherrera6895 2 года назад
Excelente
@flv_5035
@flv_5035 2 года назад
Excelente! Gracias !!
@ulisescruzgonzalez2677
@ulisescruzgonzalez2677 3 года назад
Muy buen video , me sirvio bastante, sigue adelante. , muchas gracias
@josegonzalez-jg1kj
@josegonzalez-jg1kj 2 года назад
Que buena explicación!
@drfcozapata
@drfcozapata 2 года назад
TREMENDO Luis!!!!! En verdad, muchísimas gracias. He aprendido más con dos de tus videos que con 3 cursos que hice antes. Un millón de gracias. Nuevo fan... ;) Bendiciones
@roldanjimcollado9079
@roldanjimcollado9079 3 года назад
Uffff brutal, puede entender a la perfeccion, ahora tengo muy claro como funciona useEffect, aterrice por fin, eres un capo, sigue adelante, muchas gracias por compartir conicimiento valioso!!
@BernalAgni20513
@BernalAgni20513 3 года назад
veo muchos tutoriales de gente buena enseñando pero usted tiene una manera especial de explicar las cosas me estas salvando de muchas dudas supongo que también habrá más gente como yo , se lo agradezco muchísimo espero que sigas asi y sobre todo tener mucho éxito en la vida gracias
@christiancuero9628
@christiancuero9628 Год назад
Ufff lo vi 2 años despues pero la enseñanza que deja tus videos es brutal ! excelente explicacion !
@leoamato6113
@leoamato6113 2 года назад
De lo mejor que he visto en useEffect. Felicitaciones! y sobre todo muchas gracias
@xlnwinglx
@xlnwinglx 3 года назад
Excelente muchas gracias, que bien explicas bro!
@taniaescobedocruzado7975
@taniaescobedocruzado7975 3 года назад
Perfectamente explicado!
@rapustin
@rapustin 3 года назад
me salvaste la existencia luis. Venia renegando con los re renders. Gracias
@angel-pn6wq
@angel-pn6wq 3 года назад
excelente muchas gracias por la explicación
@Its_Cinnamoroll-
@Its_Cinnamoroll- 3 года назад
Genial!!! muchas gracias..
@airrfourr2400
@airrfourr2400 3 года назад
Extraordinario !
@Pantokrator6
@Pantokrator6 3 года назад
Luego de ver tu video de useMemo para el trabajo, me propuse a hacer una proyecto propio en React pero tenía algunas dudas con el useEffect, abró RU-vid para poner música y veo esto. Sos un genio, no parés, seguí así
@nicolaspena4791
@nicolaspena4791 2 года назад
Realmente increible con la facilidad y el lenguaje que explicas los hooks.
@luiscode92
@luiscode92 Год назад
Masterisimo, te tengo q invitar a una cerveza !!!!
@correocorreo7676
@correocorreo7676 Год назад
Muy buen video, aunque en un momento me exploto la cabeza con dos temas, uno de ellos dice que lo va a tratar a fondo mas adelante. Me gusra como va explicando cada hook a detalle. Si este video hiciera parte de un curso total desde cero de react, seria el mejor curso que he visto. Seria bueno que existiera esa organizacion de temas desde 0 y empezar a desarrollarlos como lo has hecho con el tema de los hooks
@erno92
@erno92 2 года назад
Epico, gracias.
@cesarcarpa7887
@cesarcarpa7887 3 года назад
Cómo es que no había visto este canal antes??? Excelente contenido paisano!
@agusoteras
@agusoteras 2 года назад
Por fin una explicación clara y sencilla, muchas gracias por el video!
@johnherrera5913
@johnherrera5913 3 года назад
Master! muy agradecido por tu contenido, muchas gracias por aportar esto a la comunidad
@PabloInfanteP
@PabloInfanteP 3 года назад
Estoy aprendiendo react desde hace mas de un año y en cada video de este canal aprendo o profundizo en los diferentes temas. Excelente explicacion abarcando mucho ocntenido de cada tema, con ejemplos que facilitan entender como y cuando utilizarlos. Un maestro!
@bomboschgonzalez7179
@bomboschgonzalez7179 3 года назад
Luis, este video vale oro. Muchas gracias. Has explicado el tema muy bien, Felicidades.
@yormanlopez8553
@yormanlopez8553 3 года назад
Eres excelente
@FunesdelaTorre
@FunesdelaTorre Год назад
Gracias por tomarte el tiempo de explicar por qué hacés cada cosa. Parece una pavada, pero la mayoría de los tutoriales simplemente te muestran como hacer una aplicación super compleja y usando cosas sin entender por qué.
@rparias
@rparias 2 года назад
Hola Luis! Que contenido tan increíble y bien explicado. Muchas gracias por este gran aporte.
@marialuzmalaspinaalvarez9878
@marialuzmalaspinaalvarez9878 2 года назад
excelente
@RVKAWAAA
@RVKAWAAA 3 года назад
Bien profe
@AlanDanielx
@AlanDanielx 3 года назад
Brother, mis felicitaciones, explicas mejor que muchas personas en Udemy. Muy buen trabajo, +Like +Subscriptor
@LuisCabrera
@LuisCabrera 3 года назад
Muchas gracias por tus palabras amigo Alan :)
@diegogr.cabanillas8042
@diegogr.cabanillas8042 3 года назад
Gracias crack!
@chelopezlo
@chelopezlo 2 года назад
Excelente video!! En el tema del cleanup diría que se ejecuta al finalizar su ciclo de vida y no antes de ejecutar el código dentro del hook. Esto se puede apreciar cuando se quita el componente de la vista. Se ejecuta la limpieza solamente, por lo que no es antes de ejecutar el código del hook. Hay que imaginar que el return queda pendiente para cuando sea necesario. Saludos!!
@leoparaleo2
@leoparaleo2 3 года назад
Guardando Video en Favoritos de los Mejores Favoritos de todos los Favoritos. Muy buena explicación llevo dos días que empecé a estudiar hooks, useEffects y de verdad el mejor explicado es este. Por acá nuevo seguidor. Saludos.
@LuisCabrera
@LuisCabrera 3 года назад
Jaja que gran comentatio saludos Jose
@newschoolsjerk
@newschoolsjerk 3 года назад
Luis tienes voz de Discovery channel, Muy buenos tus videos.
@dylangonzalez6578
@dylangonzalez6578 3 года назад
excelente!
@rogelioramirez9786
@rogelioramirez9786 2 года назад
muchas gracias
@EngCarlosTello
@EngCarlosTello 3 года назад
que buen video, muy buena explicacion. sigue asi amigo
@LuisCabrera
@LuisCabrera 3 года назад
Gracias por tus palabras amigo Carlos
@edgardsierra9261
@edgardsierra9261 3 года назад
Que buen explicado está todo. Súper crack! Muchas gracias. Sigue haciendo videos. Sería bueno que pudieras hacer más proyectos pequeños que expliquen estas cosas importantes. Quizás validación de formularios sería buena opción. Utilizando hooks. Saludos desde Honduras
@LuisCabrera
@LuisCabrera 3 года назад
Pronto estaré subiendo contenido sobre formularios y validación :) uno sobre manejo "artesanal" otro creando un custom hook y uno más utilizando librería de terceros
@nihil_um
@nihil_um 3 года назад
Excelente tutorial y excelente explicación. Me voy enterando con más claridad de por qué ocurren las cosas en React. Espero que sigas subiendo más videos sobre React en este sentido. Estaré atento a las novedades (si es que las hay...). Un saludo y gracias.
@LuisCabrera
@LuisCabrera 3 года назад
Es lo bello de React, al principio puede parecer confuso, pero después de un rato te da la sensación que tienes mucho control en el flujo de ejecución :) estuve algo ausente pero esta semana voy a comenzar a subir de nuevo
@nihil_um
@nihil_um 3 года назад
@@LuisCabrera Me alegro de leer eso porque la verdad es que uno se queda con ganas de más después de ver tus videos. Un saludo y gracias.
@jorgeperez8914
@jorgeperez8914 11 месяцев назад
33:20 callbacks 35:30 segundo ejemplo
@LuisCastillo-bl6mq
@LuisCastillo-bl6mq 2 года назад
tu si sabes explicar, has de ser millonario con el nivel que tienes O_o
@domest5025
@domest5025 2 года назад
Hola. Excelente la explicacion. Muy buena de verdad. Quería consultarte a ver si me podes dar una mano en algo que no entendí. No es exactamente de React. Oero cuando creas la funcion getUser y getPost con el fetch async await y luego retornas el user o el post. Porque tenrs que poner el .then() luego de la invocación? No se supone que toda la operación ya se hizo dentro de la funcion. Agradezco me puedas contestar. Saludos!!!!
@dark-er
@dark-er Год назад
Es muy bueno el video. Se explica de una manera muy didactica, me encantó. Solo me quedó una duda al final sobre lo del return: ¿No se debería ejecutar el return solamente cuando se desmonta el componente? Porque al final se ejecutaba cada vez que se actualizaba también
@Neil_Jordan
@Neil_Jordan Год назад
eso del getEventListeners se me pasaba por alto, incluso corregi´ un error en una app Js que tengo porque no remuevo el listener cuando el elemento desaparece del DOM. Es React pero veo que hay muuuucho de JS: me gusta mucho :)
@LucasNahuelBrumatti
@LucasNahuelBrumatti Год назад
excelente video!! Una consulta acerca de la mini app de resizing, ¿cual es la diferencia entre usar y no usar el useEffect? Porque si lo borro y dejo el window.addEventListener, la mini app me sigue funcionando. Se sigue actualizando el width.
@cuaticito
@cuaticito 3 года назад
Buenos dias Luis, antes que nada, muchas gracias por comaprtir tus conocimientos. Te cuento que estoy buscando la manera de evitar los desbordes de memoria, y en toda documentacion o videos que veo la solucion es la misma, usando un return() dentrod el useEffect,. Eso lo entiendo bien, pero lo que no estoy entendiendo es como desmontar en el caso de que se haga una llamada API desde el useEffect, ya que el único ejemplo que vi del uso del Retun es con addEventListener y removeEventListener. Te agradecería si pudieras orientarme. (Espero haberme explicado bien)
@LuisCabrera
@LuisCabrera 3 года назад
Hola! Por lo general no es tan importante en el sentido que si completa la peticion luego de desmontarse no pasa nada siempre y cuando verifiques que al resolverse la promesa que hace la peticion a la api no se haga un setState, por ejemplo: getAPI().then(()=> { if(!isMounted) return; SetState() }) Hay un ejemplo en el video del useRef Ahora tambien puedes abortar la peticion Si se Desmonta es util cuando se hace subida de archivos, para ello seria revisar como abortar la peticion con axios fetch o lo que utilices en el momento
@rapustin
@rapustin 3 года назад
Hola Luis!. Muchas gracias por dedicar tu tiempo a ayudar. Me podrías decir si necesariamente hay que aprender redux o useContext y los hooks están evolucionando para remplazarlo?
@LuisCabrera
@LuisCabrera 3 года назад
Hola Luciano yo prefiero redux, más que una librería puedes verlo como una forma de manejar el estado global de la aplicación, y la librería react-redux actualmente usa hooks de fondo, en lugar de ser reemplazado ha evolucionado Ahora tu mismo puedes replicar la forma de trabajar con redux con useReducer, useContext y custom hooks, pero a mi me parece más trabajo, pues esto ya lo trae armado react-redux con la que además puedes disponer del redux developer tools que te muestra el estado global en tiempo real desde las herramientas de desarrollo Recomiendo aprender las dos maneras y tu mismo elegir, y hacerlo en este orden 1. Context Api. 2. useReducer 3. Manejar un estado global combinando Context API y useReducer y hacerte un proyecto más o menos grande con ello 4. Redux (Sin consultar API) 5. Redux Thunk (Para usar Redux consultando API) 6 (Opcional) Redux Saga (Sirve para lo mismo que Redux Thunk) Si lo aprendes en este orden una vez conozcas pases el paso tres el resto te parecerá muy sencillo, comparado que si lo haces comenzando por redux, Pronto voy a subir varios proyecto usando todo esto :)
@rapustin
@rapustin 3 года назад
@@LuisCabrera si, lo supuse pero quería mentirme un poco jajajaja. Muchas gracias ☺️. Acá ganaste un fiel seguidor
@jhonnymosquera2649
@jhonnymosquera2649 Год назад
45:21 Este error ya esta solucionado, sin enbargo se siguen cargando los eventos, en todo caso es mejor optimizar por muy pequeña que se la app :)
@juliovicenteperez7172
@juliovicenteperez7172 3 года назад
Muy bueno el video, peroooo: 19:20 Si usas Math.ceil() ?
@LuisCabrera
@LuisCabrera 3 года назад
Acabo revisar la función Math.ceil, realmente ya no me acordaba como funcionaba jaja olvido muy rápido esos detalles pero creo que también se podría llegar a lo mismo :) sería Para un número aleatorio entre 1 y 10 const userId = Math.ceil(Math.random()*10)
Далее
EL TOP 1 DEL MUNDO ESTÁ BANEADO…
15:21
Просмотров 115 тыс.
It's the opposite! Challenge 😳
00:12
Просмотров 3,1 млн
Let's build iOS 16 in React Native 🤔
3:53:49
Просмотров 232 тыс.
🫣 3+1 Errores frecuentes al usar Hooks en React
13:33