Una más sobre React useEffect.
Por que el arreglo de dependencias es importante? Y por que si no escribo alguna aparece un warning?
Ayer hablamos se la relación entre este hook y los métodos del ciclo de vida en un hilo y este post matiashernandez.dev/react-useeffec…
Por que el arreglo de dependencias es importante? Y por que si no escribo alguna aparece un warning?
Ayer hablamos se la relación entre este hook y los métodos del ciclo de vida en un hilo y este post matiashernandez.dev/react-useeffec…
El hook useEffect recibe dos argumentos, una funcion/callback que define el efecto deseado y un listado/arreglo de valores que definen las dependencias del efecto.
Estas dependencias indican cuando o más bien por qué el efecto es emitido/ejecutado.
Estas dependencias indican cuando o más bien por qué el efecto es emitido/ejecutado.
Internamente useEffect "observa" este listado de dependencias y cuando uno de los valores de ellas cambia el efecto es emitido.
El equipo de React provee un plugin de eslint que ayuda a identificar cuando hay dependencias no identificadas
reactjs.org/docs/hooks-faq…
El equipo de React provee un plugin de eslint que ayuda a identificar cuando hay dependencias no identificadas
reactjs.org/docs/hooks-faq…
En general un efecto es una función que ejecuta cierta lógica para sincronizar el estado interno del componente con un estado externo (si, no me canso de repetirlo 🤷♂️).
Y por que las dependencias son importantes?
Y por que las dependencias son importantes?
Simple! Por que las dependencias son la forma de controlar cuando el efecto de ejecuta o no. Recuerda. No se trata de si el efecto ocurre al montar el componente (o cualquier otro "momento").
Y ¿por qué debo escribir todas las dependencias del efecto?
Si tu efecto utiliza un valor dentro de su lógica pero no lo declaras como dependencia entonces "algo huele mal"(code smell)
Si tu efecto utiliza un valor dentro de su lógica pero no lo declaras como dependencia entonces "algo huele mal"(code smell)
El plugin de eslint reportará la dependencia faltante como un warning. Entonces? Por que es tan importante si sólo se reporta como un warning?.
Bueno, es un bug que en cualquier momento volverá a morderte.
Tu efecto funciona incluso sin declarqr la dependencia por que la función/callback definido funciona como un closure y es capaz de utilizar el valor externo a su scope, pero!
Tu efecto funciona incluso sin declarqr la dependencia por que la función/callback definido funciona como un closure y es capaz de utilizar el valor externo a su scope, pero!
Pero, piénsalo así, estas declarando una función que trabaja con ciertos valores pero no le estas dando acceso directo a esos valores!! No es extraño?
Esta diciendo que tu función usa un valor pero que no depende de el?
Esta diciendo que tu función usa un valor pero que no depende de el?
¿entonces que hacer?
Hay que redefinir la lógica de tu efecto para que solo utilice los valores de los que realmente dependa.
Cómo? Una forma es extraer la lógica hacia una función externa y utilizar esta nueva función como dependencia del efecto.
Hay que redefinir la lógica de tu efecto para que solo utilice los valores de los que realmente dependa.
Cómo? Una forma es extraer la lógica hacia una función externa y utilizar esta nueva función como dependencia del efecto.
@kentcdodds tiene un buen artículo en donde habla de algunos de estos tópicos kentcdodds.com/blog/react-hoo…
Y obviamente @dan_abramov tiene un artículo en profundidad sobre useEffect overreacted.io/a-complete-gui…
Y obviamente @dan_abramov tiene un artículo en profundidad sobre useEffect overreacted.io/a-complete-gui…
Mantente atento sobre estos temas y más uniendote a mi newsletter matiashernandez.ck.page
Pronto noticias sobre el curso sobre React en el que estoy trabajando junto a @eggheadio
Pronto noticias sobre el curso sobre React en el que estoy trabajando junto a @eggheadio
@threadreaderapp unroll
• • •
Missing some Tweet in this thread? You can try to
force a refresh
