CUÁNDO se ejecuta USE EFFECT 🤔 El ARRAY de DEPENDECIAS 🔵 Curso de React desde cero #12
HTML-код
- Опубликовано: 30 июл 2024
- ¿Cuándo se ejecuta useEffect y cómo podemos controlarlo? ¿Qué son las dependencias de useEffect? ¿Por qué un array? ¿Puedo evitar que useEffect se ejecute la primera vez?
Hoy venimos a responder todas esas preguntas!
Curso de React en LearnThis 👉 learnthisacademy.com/curso-re...
Nuestra plataforma de elearning 👉 learnthisacademy.com
¿Quieres estar al día? 👌 Síguenos en nuestras redes sociales! 👌
-Twitch: / desarrolloutil
-Instagram: / desarrolloutil
-Discord: / discord
-Twitter: / desarrollo_util
Buenas chicos!, Vengo de su curso de learnThisAcademy, es tremendo, vengo del bootcamp de HENRY y me habían quedado muchas dudas de React pero ustedes me las aclararon en su mayoría, estaría perfecto que hicieran un vídeo hablando sobre storybook, rxjs, o algo similar, cabe recalcar que ya me vi la mayoría de sus vídeos de yt, y terminando el de react me voy con el de node xD
Muchas gracias Alfredo!
Lo de Storybook lo tenemos entre la lista de pendientes, combinado con el testing, pero lo de RxJS creo que es algo que todavía queda un poco lejos para el nivel del canal, queremos ir paso a paso y con buena letra, para que cualquiera pueda seguir el canal de principio a fin.
Muy buen video con el anterior #11 ha quedado muy claro, saludos !!
Me alegro, pronto le daremos más caña!
De lujo como siempre. Me saco el sombrero. Saludos desde Argentina.
Muchas gracias!
Por lo que veo ya no tienen el curso disponible. alguien sabe por dónde están activo actualmente. aun seguirán enseñando? de verdad que son muy bueno explicando.
los mejores de todo el planeta explicando, en serio muchísimas gracias por compartir sus conocimientos de manera gratuita, cada que sale un video de ustedes, me da una gran alegria por todo lo que logro aprender, el video de async await me lo he visto como 17 veces y cada que lo veo aprendo algo nuevo, tienen en mente hacer algun curso de react native? usando el emulador o el dispositivo?, es que todos usan unicamente expo D:
Lo mejor de lo mejor
Gracias por el vídeo
Que cracks son !
BUENISIMO !!!!
Muy claro como siempre, muchas gracias saludos!!!
Muchísimas gracias, como siempre!
Excelentes explicaciones le di like a todos los videos de esta serie. Mil gracias! sigan adelante!
Muchísimas gracias. Seguiremos con ello!
jajajaa y yo volviéndome loco recordando la sintaxis del useEffect para cada efecto que deseaba, con acordarme que solo compara el [ ] ya se que debo poner, excelente vídeo.
😅
Como siempre, una explicación buenísima, me ha quedado claro todo. De lo mejorcito que hay den React en español.
Muchas gracias, me alegro de que nos tengas con el listón tan alto!
Genial..! 😎👍
Muchas gracias!
¿Qué tema usas en el VS Code? Está muy chulo. Muy buenos sus videos! Ya me los vi todos
Muchísimas gracias!
El tema es Monokai Vibrant.
hola desarrollo, gran video, lo que si no entendi el minuto 11:05 donde hablas de variables que vuelven a reenderizar el useEffect, a pesar de que count siga valiendo lo mismo, pero aca en 10:08 lo pones al estado(en el array de dependencias del useEffect) a lo que mi pregunta es: ¿Porque el useEffect se reenderiza lo necesario con el estado y la variable no? porque la variable copy tecnicámente siempre tiene el mismo valor al igual que el estado.
Cuando hace const copy = {...count} esta creando un objeto totalmente nuevo(un espacio en memoria distinto cada vez) con el mismo contenido que count (para eso los ...), al estar como dependencia del useEffect y tener un espacio en mem distinto cada vez ese efecto se dispara y realiza lo que esta dentro.
Distinto hubiera sido si el hubiera hecho: const copy = count; ya que acá esta creando una nueva referencia al mismo espacio en memoria que count, no crea un obj nuevo sino que hace que copy apunte a la misma porción de memoria que apunta count, por ende el efecto no se hubiera disparado cuando hacemos click en Incrementar Step!
@@Phantom-pj1ls no es un objeto nuevo plop
Hola que tal , excelente video, se iran agregando mas videos a la lista? un saludo
Añadiremos algunos más de teoría, y después práctica!
@@DesarrolloUtil muchas gracias
Me parecen muy didácticos los videos, aunque de vez en cuando me pierdo en conceptos... que los pasas muy rápido. Una cuestión ¿hasta dónde tenéis desarrollado el curso React en vuestra plataforma? ¿merece la pena cogerlo ya?
Muchas gracias por tu feedback!
Respecto a la parte de ir rápido, intentamos buscar un equilibrio entre lo didáctico de los videos, y el formato de RUclips. Es algo complicado, y a veces nos hace pasar por alto ciertos detalles que son importantes (aunque tratamos de no hacerlo).
En el curso de la academia, todos los conceptos que se hablan aquí, están desarrollados de forma mucho más extensa y pausada (La creación del proyecto tiene 2.5h de contenido, useState tiene más de 1.5h de contenido...). En definitiva, nos tomamos todo el tiempo que sea necesario, sin limitaciones por parte de nadie.
Respecto al contenido publicado, puedes verlo en la web pero te lo resumo por aquí. Tenemos:
- Introducción sobre qué es React, por qué existe y qué problemas resuelve
- Cómo montar un proyecto desde cero, explicando el por qué de cada herramienta con ejemplos
- Toda la sintaxis de JSX y sus componentes, explicando absolutamente todo lo que existe
- Los tres hooks principales: useState, useEffect y useContext
- Una práctica real de 9.5 horas en la que partimos de unos requisitos y un diseño en Figma, y creamos un CRUD completo de usuarios, trabajando con un pequeño servidor y con gran parte de las tareas más habituales del día a día.
Respecto al resto de contenido, las dos próximas semanas subiremos useReducer y useRef, y continuaremos con una sección por semana hasta terminar el curso. Con el contenido publicado hasta hoy, y las dos próximas secciones, tienes el 90% del contenido necesario para casi cualquier proyecto de React, el resto serían detalles adicionales.
Respecto a si merece la pena comprarlo o no, actualmente tiene un precio bastante reducido que irá incrementándose a medida que se completa el curso, así que yo considero que es buena oportunidad para obtenerlo y tenerlo ya para siempre.
Perdón por esta pedazo de chapa, pero creo que es importante!
por fin lo entendi jaajaja
Si lo de poner la función set es un algo poco útil pero dependiendo de si tienes ciertas de dependencias de eslint te da un warning por no a verlo puesto en el array y digo dependencias pero creo que la única que hace eso es eslint-plugin-react-hooks, pero si ya te sabes manejar y conoces mas o menos como funciona useEffec pues no tendrás tantos problemas aun creo que deberías haber explicado que si el useEffec tiene una función o algo que genere un cambio y el useEffect no tiene el array pues puedes generar un loop infinito
Respecto a los setState y al plugin de eslint que comentas, muy útil por cierto, eslint nunca te mostrará un warning por ese motivo.
Otra cosa es que crees tus propios setState custom que ahí si!
@@DesarrolloUtil perdón por no ha verme explicado mejor y si como comentas es solo cuando utilizas custom hooks
O sea, poner en el Array de Dependencias todos los “set” de estados que quieras poner, es lo mismo que dejar el Array vacío.
Correcto?
¿como podría obtener el Estado final de un setState y no el inicial?
No puedes obtenerlo, hasta el siguiente renderizado. Por tu pregunta, creo que hay algún error de concepto en lo que quieres hacer!
@@DesarrolloUtil si así es, ahí ví varios de tus videos y logré darme cuenta. Resolví usando useContext. Gracias!
una consulta por que useEffect se ejecuta miles de veces? me re-renderiza el componente cada segundo y me consume las consultas del fetch
Puede ser por dos motivos:
1. No has puesto un array de dependencias
2. Alguna de las dependencias que has puesto, cambia en cada renderizado
Revisalo bien!
@@DesarrolloUtil Muchisimas gracias por tu respuesta, en realidad era que, como no sabia, puse el fetch dentro de un componente y no del App.js, sin un flag y eso re-renderizaba cada rato.