Context API - explicado al detalle - con ejemplo práctico y solución al problema de renders - React

[@LuisCastillo-bl6mq]

deberias tener el premio nobel en Development..........O_O!!...excelente video!!!

[@rogerreyes4470]

Excelente explicación, pude entender Context API con este tutorial...gracias Luis!

[@johnherrera5913]

Master! Increible!!!! que bien explicado, Excelente video!!!!

[@community7757]

Es la primera vez que tengo que bajar la velocidad de reproducción jajajaja muy buen video justo lo que buscaba y bien explicado :)

[@stivenquiroz6904]

Que calidad de explicación, estuve buscando esto, hasta pague cursos y nada, me tope con esto y literalmente fue el cielo, ojala algún día puedas hacer algo sobre redux, muchas gracias por todo

[@dearalex2056]

Dios! que videazo man, muchas gracias, saludos desde Nicaragua!

[@haguerrerob]

Hola Luis. Sigo tu canal desde hace meses. Lamentablemente no has continuado con tus vídeos. Espero todo vaya excelente y muchas gracias por estas explicaciones tan detalladas.

[@SantiPizzi]

Luis sos un grande, todos tus videos son super valiosos. Gracias

[@jordanvillarreal1388]

Que crack Luis!!! y pensar que cuando hiciste este video, aún no habías logrado conseguir tu primer trabajo. Vas a llegar muy muy lejos. Un abrazo!!!

[@martingalenda]

Miedo :C

[@MONOMARIO888]

Sos un genio, Luis! Seguí con mas videos.

[@davidgallego1216]

Que explicación tan exacta. Muchas gracias.

[@mauricioantoni1]

Excelente explicación, estoy de acuerdo con toys models, tu canal va a ser seguido por muchos. Tu estilo es muy pedagógico y hace que todo se entienda con mucha facilidad. Muchos éxitos. Soy Colombiano y creo que tú también.... ¿si así es?: ¡¡¡¡Qué orgulloso me siento por ti !!!! Un abrazo y muchas gracias por tu gran aporte.

[@marioarango2773]

Gracias, haces que React sea más comprensible

[@luishron]

¡Crack! Un gusto ver tus vídeos

[@gastonnicolli3065]

Excelente !!!! Gracias !!!!!! explicas muy bien y se aprende fácil así !!!!!! Gracias !!!!!

[@nihil_um]

Además del tema del contexto he aprendido nuevas cosas sobre Javascript como el comprobar si un objeto o un arreglo existe con el signo (?) antes de realizar con operación . Eso me lo apunto sin duda... Muy bueno. Bueno, ya he acabado toda la serie de videos de React. Toca esperar los nuevos. Un saludo.

[@LuisCabrera]

Super!! Ya tengo listo uno sobre el useReducer, tengo que terminar de editarlo para que no quede tan largo y ya mañana lo subo :)

[@cristianstafe]

Mil Gracias!!! Son geniales tus videos. Voy terminando uno a uno mientras voy haciendo todas la practicas.

[@diegoalvarez4162]

Muchisimas gracias! Me habia costado un poco entender Context pero explicas super bien, me ayudo mucho.

[@lesliekarenlowenstern5598]

Excelente forma de explicar !!! Gracias por tan buen aporte :)

[@LuisCabrera]

Gracias a ti por dejar tu comentario!

[@hugoisaiasalvarezgarcia2016]

Muchas gracias, muy claro todo

[@diegocarrenoserrano8582]

Tremendo hermano, mcuhas gracias.

[@AngelGonzalez-sn8uw]

Que grande, gran video, ayudas a muchas persona, y se ve que disfruta hacerlo. Pura vida

[@LuisCabrera]

Gracias amigo y si disfruto bastante haciendo estos videos :)

[@leandrosanchez1797]

Excelente explicacion, realmente la necesitaba para seguir avanzando. Muchos exitos! Un Abrazo.

[@joseandresjimenezcontreras3160]

Tenia muchas dudas al usar el context api, este video me despejo varias de esas gracias crack!!

[@LuisCabrera]

Gracias a ti por comentar :)

[@pablozapeta4098]

Excelente sabes explicar bien y siempre aprendo cosas diferentes al tema que impartes

[@albertogabrielfeldman1642]

Brillante Luis!

[@scriptkev9]

Excelente explicacion, pude compreder mas el Context 😀 sigue asi:)

[@nicolaschamorro6652]

Excelente mi hermano

[@arielchura8852]

Excelentes videos, Muchas gracias

[@ultrasoftware9077]

eres el mejor

[@rapustin]

Me gusta y a disfrutarlo!

[@rapustin]

Luis, consulta. Trabajando con los estados, noto que siempre me carga uno atrasado digamos.. tengo que hacer dos clicks para que me cargue el estado nuevo en ocaciones.

[@agustinperez8700]

me re sirvio gracias

[@luizarnoldchavezburgos3638]

crack, el video todo genial. Tu trabajo es bueno pero me quedo la duda si el rerender de las peliculas se solucionó o no.

[@nicolasramirez2258]

Excelente.

[@alejandrowogel]

De 10!!

[@ericengelmann9655]

muy bueno luis

[@LuisCabrera]

Gracias Eric :)

[@ZzZz-dr7uq]

buen video, una consulta podrias hacer un video de crear un useFetch reusable para un CRUD?

[@angeln3sanchez779]

Estan buenos tus videos bro sigue así. Entonces sería mejor usar Redux?

[@LuisCabrera]

Me gusta redux pero hay muchas formas de manejar estado global, no hay mejor ni peor, aprende lo que puedas y tu mismo sabras decidir

[@whisojeff1366]

Muero por el siguiente video de useReducers

[@franmartin2758]

Ya no subes mas videos de React? Ya realice todas tus practicas!!

[@LuisCabrera]

He estado ocupandome de algunas cosas pero en breve retomo 🙂

[@BernalAgni20513]

bravisimo

[@arielcastillo7925]

26:22 Buenas !! Gracias estoy practicando un monton con estas practicas, gracias en serio por estos tiempos que te tomas. Alguien me puede ayudar con esa solucion? entiendo el problema de los render, que cambia el contexto y se renderiza. Pero no entiendo como es que creando un nuevo componente que contexta el Contexto Provider soluciona el problema, es decir, si este componente tiene el value, y a los hijos. Cuando cambia el contexto no deberia pasar el mismo problema? Jeje no logro entenderlo, saludoss y gracias

[@luiscarlosdelorenzicantero7379]

misma cosa yo jajaja, tampoco entiendo, se le paso explicar ese detalle pero no menos importante

[@AlanDanielx]

Una pregunta si no es mucha molestia, como pones los dos cursores en el texto? Como en el video @20:00

[@LuisCabrera]

Hola! En VS Code para windows se mantiene presionada la tecla ALT mientras que haces click en los lugares donde deseas colocar cada uno de los cursores

[@AlanDanielx]

@@LuisCabrera Me encanta la velocidad de Respuesta, he aprendido muchisimo y eres muy dedicado en los videos y en la comunidad, por lo mientras seguiré viendo mas cursos que ya he recomendado a otros, Ojala abras algún canal de comunicación para tu canal próximamente como Discord. +1 !!

[@LuisCabrera]

@@AlanDanielx ​ Gracias amigo Alan :) pronto, cuando tenga un poco más de contenido abriré un Discord

[@motob3553]

En vez de volver a escribir puedes usar ctrl + espacio y te aparecen las herramientas de autocompletado

[@faviomagallanes]

Me gustaría ver algo así pero con redux toolkit :)

[@martinfernandez9644]

Hola Luis, no termino de entender el "porque" no se vuelven a renderizar los componentes internos (suscriptores) del provider, por el simple hecho de estar pasados como childrens dentro de un componente. O sea, entiendo lo que haces y veo el resultado, pero no entiendo la magia que ocurre por detras. Lei la documentacion y pude interpretar que "data" al ser un objeto y se utiliza por referencia, al crearse de nuevo, es otra referencia, y asi tenga los mismos valores es "diferente" por ende los suscriptores se renderizan. Pero en este caso, aunque este en un componente sigue siendo un objeto data, pero los que no se ven afectados a cambios ya no se renderizan. Me podrias iluminar? Gracias y son geniales tus videos! PD: me llamo martín, no Luis jaja, como la vez pasada :P

[@LuisCabrera]

Hola Martin tienes razón es un concepto bastante extraño, yo mismo no lo comprendo del todo bien, por ello no lo pude explicar mejor, luego voy a rehacer este video, pense en borrar este pero creo que mejor lo dejo mientras no saque el otro Aunque esa magia sólo ocurre en un escenario muy particular Actualmente si hago en un provider un cálculo como un filtro lo memorizo const filteredProducts = useMemo(() => ...., []) También si dentro de un provider creo una función, la memorizo de igual forma const getProducts = useCallback(() =>... , []) Para poder evitar re-renders, y evitar bucles infinitos cuando ocupo algo de esto en algún efecto de un componente Espero pronto entender mejor ese concepto o sí llegas a tener la respuesta me la comentas por aquí :)

[@martinfernandez9644]

@@LuisCabrera Hola Luis!! finalmente creo haber entendido como funciona todo esto y queria copartirtelo. Es más simple de lo que pensaba. MovieList se vuelve a renderizar por el simple hecho de ser un componente hijo de la App y lo que sucede es que App esta cambiando su estado (ya que al hacer el UserContext.Provider dentro de App, el estado esta dentro de App; ahi es donde utilizamos useState), por eso, aunque ni las props ni el estado de MovieList cambien, se vuelven a pintar de todas formas(porque su padre App lo hace... es en App donde tenemos user, setUser = useState y ese estado esta cambiando, volviendo a renderizarse App y todos sus hijos). * Esto se puede evitar haciendo React.memo envolviendo la MovieList, ya que sus props/estado no cambian y no vuelve a renderizarse, aunque su padre cambie(React.memo lo evita comparando las props de MovieList), OJO.... todo siempre y cuando desde MovieList NO se este usando: useContext, lo que invalidaria el memo// De esta manera evitamos el "re-render heredado" por ponerle un nombre. Cuando creas un componente UserProvider y envolves a los demas componentes hijos de App, al llevarte todo a otra parte estas generando "la magia". En realidad es simple... Primero: no estas envolviendo a la App, sino a sus hijos, por lo tanto App nunca se entera de cambios en el estado (que ahora esta en otro lado, en ese UserProvider) ni vuelve a renderizarse y sus hijos no deberian renderizarse ya que la App tampoco lo hace. Segundo: Mientras que el navbar que SI esta consumiendo el contexto se volvera a renderizar. Incluso si le haces React.memo (ya que este no funciona al usar el contexto). El funcionamiento del contexto es que si el "value" cambia, todos sus consumidores se vuelven a renderizar (por mas useMemo/useCallback/React.memo que utilicemos) Lo que sucede es que todo componente que consuma el contexto se ve encadenado a los renderizados del provider, si este cambia su estado (por ende el value que enviamos) todos los consumidores vuelven a renderizarse. MovieList no lo consume, por ende la unica forma en la que se volveria a renderizar seria que cambien sus props/estado, algo que no sucedia, pero lo que si sucedia y provocaba sus renders eran los cambios en App. Es curioso porque al estar haciendo el provider y toda la bola, uno no se da cuenta que esta metiendo el estado en la App. Y pasa desapercibido y es dificil entender que sucede realmente, de ahi creiamos que "era magia" Saludos!

[@LuisCabrera]

@@martinfernandez9644 Super completo 🙂 esta genial, creo que volvere a construir un ejemplo para entender mejor lo que comentas, tiene bastante sentido

[@martinfernandez9644]

@@LuisCabrera con el compiler podrás entenderlo más rápido. Saludos!

[@saraacevedomaya4733]

Excelente

[@fvidalarcon]

gracias por este video. las imágenes que se consumen desde la api, podrían ser en .svg?

[@LuisCabrera]

Hola Fernando si claro sin problema, el formato que necesites, por lo general sólo obtienes la url y la utilizas ya sea en una imagen o como background

[@franmartin2758]

@@LuisCabrera Vas a subir más de react??

[@LuisCabrera]

@@franmartin2758 Si está semana subo dos videos jeje

[@unargentinoquepiensa7428]

brooo no tienes un tutorial para hacer un carrito de compras??

[@ManuelNyC77]

Excelente el video Luis, pero quede con una duda. En el Navbar.js cuando eliges iniciar sesion, haces un setState del usuario que esta alojado en el UserContext, la pregunta es, cuando haces una modificacion en el UserContext y luego lo usas en otro componente, en este caso el Movies.js, se usa es el UserContext que ya ha sido modificado al iniciar sesion?

[@LuisCabrera]

Hola Manuel estas en lo correcto cuando se actualiza un estado del contexto afecta globalmente a todos los componentes que lo consuman

[@porfidev]

El ejemplo está super claro pero.. ¿como vamos a utilizar esto con nuestros Stateless components? ¿como definimos que props va a utilizar un componente si en vez de props estamos usando useContext dentro? Si por ejemplo tenemos un boton que utiliza un texto, y tenemos un contexto de traducciones. ¿cómo hacemos que ese boton stateless lo ocupemos en distintos lugares? y a la vez consuma el Contexto...

[@LuisCabrera]

Hola, efectivamente el que un componente consuma un contexto lo limita a no ser reutilizable fuera de dicho contexto. Pero no pasa nada, teniendo en cuenta esto utilizarlo cuando lo veas necesario. Generalmente tendrás componentes reutilizables que sólo consumen props para las tareas específicas (Como un botón).

[@martingalenda]

Las traducciones podrían ser tranquilamente parte de otro contexto. De hecho tiene mucho sentido, ya que será utilizado por todos los componentes. Saludos

[@ulisescruzgonzalez2677]

Hola Luis, ya ejecutando el codigo sigue habiendo "Rerenders" , en el momento que le pones el favorito a una movie, se vuelve a renderizar el navbar, esto por usar el contexto de User y modificar su arreglo, realmente existe una forma de evitar esto ???

[@LuisCabrera]

Hola! Si se puede evitar, memorizando con useMemo los datos y con useCallback las funciones en la definición del Contexto. Como nota importante, cuando usas una librería de manejo de estado como redux o similar, estas tareas de evitar los renders las suelen hacer internamente los paquetes

[@ulisescruzgonzalez2677]

@@LuisCabrera muchas gracias por tu tiempo, todos tus videos me han ayudado bastante , muchas gracias

[@LuisCabrera]

​@@ulisescruzgonzalez2677 Gracias amigo Ulises, también en un futuro espero actualizar estos videos :) siempre habrán varias cositas para corregir y mejorar

[@colommbiano]

cuando debemos usar Context y cuando debemos usar Redux ? prácticamente ambos hacen los mismo?

[@LuisCabrera]

Usa la que mas te guste, prueba las dos :)

[@colommbiano]

@@LuisCabrera Una pregunta Maestro estaría mal si siempre uso Context para cualquier aplicación pues lo pregunto por que siempre escucho a cada rato Redux, Redux, y con context podemos hacer lo mismo de una manera mas sencilla y fácil de comprender que Redux

[@LuisCabrera]

Si te funciona y te sientes cómodo estará bien! sin problema! Mas allá de las tecnologías que uses (Context o Redux) lo mas importante será que seas bien ordenado para que entiendas todo lo que hiciste a medida que pasen los meses/años :)

[@tiyeman7176]

En velocidad 0.75 está joya

[@edwinpazss.-1798]

Que el usuario sea undefinend o null en TypeScript Esto es un problemon

[@LuisCabrera]

No debería, sólo es especificar donde sea necesario que puede tomar el valor de null o el requerido

[@bowiemage1]

Muy bueno, lo único para mi es que hablas muy rápido, capaz mas pausado explicando estaría mucho mejor

[@alfonsopayra]

repite conmigo: CHIIIILDREN, NO CHAILDREN 😂😂😂😂😂😂

[@jonathanescalera9485]

Me dolieron los oídos 😂😂