Si usas API Context, ¡no hagas esto! #reactjs #reactjstutorial

Hoy te traigo un vídeo donde quiero advertirte sobre una mala práctica cuando trabajamos con API Context y que puede afectar muy negativamente a tu aplicación: pasar un objeto nuevo en cada render.

[00:00] Introducción
[01:15] Descripción del problema
[05:17] Función memo de React
[10:45] useMemo y useCallback al rescate

Como descubrirás en el vídeo, si el valor de API Context es un objeto deberemos pasarlo memorizado. Si no, en cada render estaremos generando una nueva instancia lo que provocará que todos los consumidores se rendericen.

Para resolver este problema emplearemos los hooks useMemo y useCallback, además de ver un caso de uso para la función memo de React.

💛 ¡Espero que os guste!

[axelestrada]

Uff amigo justo el video que estaba buscando la explicación súper Clara y entendí todo a la perfección Muchísimas gracias nuevo suscriptor🎉

[antoniomorga]

Muy buen video! Corriendo a refactorizar que voy 💪🏼💪🏼💪🏼

[josedanielpumarejogarcia]

Hola, me parece excelente tu solución y en ese casi específico, si no conociera los hooks de useCallBack y useMemo, en mi caso haría el componente boton seria un hermano de pet, de tal manera el renderizado seria a nivel del componente y no del padre.

[alejandroherrera]

Excelente video Gerardo!!!, muchas gracias. Un abrazo!

[SergioSaar]

Que buen video tío, youtubers mucho más grandes de programación no explican estas cosas y tu lo has hecho con una sencillez que es de agradecer. Te has ganado un nuevo sub, saludos y muchos éxitos!

[arrobeitor]

Wow, utilizo context muy a menudo y nunca pensé en esto...Estupendo! al igual que los artículos de los renders :)

[rmi]

Muy bueno gerardo, ecelente explicacion, uso mucho context y nunca me di cuenta de que se renderizaba siempre. Lo porbe en una app que estoy desarrollando, pero sigue renderizandose todo el tiempo y encima de a 2 jaja algo mal debo tener, igual es un contexto bastante amplio. Gracias igual!

[yoanestradablanco]

Hermano exelente video si pudieras hacer uno de como estructurar una app que use react query como stage managment seria fabuloso

[jaimedemiguel]

Este vídeo es muy interesante pero la situación que expones creo que es poco habitual, quiero decir que tener un useState en el mismo componente en el que el provider de context se usa para envolver otros componentes no es muy común (me atrevería a decir que es una mala práctica de hecho) ya que el mencionado componente padre no debería de tener ninguna lógica de interfaz (solamente envolver otros componentes). Pero bueno, hablo desde mi experiencia, a lo mejor estoy equivocado...