3

Tenia una duda acerca de UseEffect y AdEventListener porque me parece que los dos se comportan casi igual

el UseEffect lo usamos en React, cuando el usuario hace una accion y esta desencadena un cambio a traves de una funcion en una variable

const [clicked,setClicked]= useStated(false);

useEffect{() => {
console.log(('me ejecute', clicked));
}, [clicked]);

codigo html

<div> 
<p> onClick = { () => setClicked(state =>) }>
  dame click { JSON.stringify(clicked) }
</p>
</div>

en el caso de arriba useEffect desecadenaria una accion, cada vez que se clickee en el p, la accion seria cambiar de falso a verdadero y asi? estoy en lo correcto?

ahora AddEventListener :

element.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

me parece que es lo mismo, porque extrae una variable del DOM en este caso element y cada vez que hace click llama a la funcion myFunction y escribe Hello World, no es asi?

O hay alguna diferencia mas entre estos dos?

7
  • 2
    Uno es un metodo nativo de JS que enlaza un evento y una funcion (al hacer click, imprimir un mensaje) a un elemento del DOM. El otro es una funcion de los componentes de React y es mucho mas compleja, el comportamiento depende del segundo parametro que le pasemos (el array de dependencias), y el efecto es una funcion. El unico parecido que podes encontrar con addeventListener es que los dos disparan una funcion. Pero useEffect no espera ningun evento del usuario, sino que se ejecuta, en tu caso, cuando la variable clicked (un estado del componente) es modificada
    – Agustin G.
    el 28 jul. 2022 a las 3:04
  • 1
    Si le pasas un array vacio en lugar de clicked, el efecto solo se va a ejecutar una vez, cuando el componente se cargue. Y si no le pasas nada, el efecto se va a ejecutar cada vez que detecte cualquier cambio en el componente. No esta enlazado a ningun elemento del DOM, sino que esta enlazado al componente y su estado.
    – Agustin G.
    el 28 jul. 2022 a las 3:05
  • 2
    @AgustinG. podrías redactar una respuesta válida a partir de tus dos comentarios, complementando la misma con enlaces a la documentación de ambos métodos. Saludos el 28 jul. 2022 a las 8:38
  • @MauricioContreras si, era casi la 1 de la mañana y me parecio que podia dejarle un comentario a modo "orientativo", para dar una respuesta realmente me gustaria investigar un poco mas para ser mas preciso, y sobre todo contar con un rato libre. Ahora estoy trabajando. Lo voy a tener en cuenta y trataré de redactarla cuando tenga un rato libre. Gracias
    – Agustin G.
    el 28 jul. 2022 a las 11:49
  • lo que le pasamos al parametro, que es el array de dependencias seria la variable o variables en las que se ejecutara el evento no es asi? @AgustinG. el 28 jul. 2022 a las 12:30

1 respuesta 1

6

Principal diferencia

La principal diferencia es que useEffect es un hook de react.

Los Hooks son una nueva característica en React 16.8 que te permiten usar el estado y otras características de React sin escribir una clase

Y addEventListener() es un método propio de javascript que registra un evento a un objeto en específico. (documentación)

El Objeto específico puede ser un simple elemento en un archivo, el mismo documento, una ventana o un XMLHttpRequest.

Por lo tanto, si bien en el caso específico que mostraste, podríamos decir que tanto useEffect como addEventListener tienen un comportamiento "similar" (La función se ejecuta cuando hacemos click) en realidad no están haciendo lo mismo en absoluto.

AddEventListener

Por un lado el addEventListener que mostraste registró un evento (el evento click) sobre un elemento del DOM, cada vez que se haga click sobre dicho elemento, la función que registramos siempre se ejecutará (hasta que decidamos no registrar más ese evento, removeEventListener).

O en otras palabra, cada vez que ocurra el evento se ejecutará la función que definimos.

En código sería:

const elemento = document.getElementById("elem");
const tipoDeEvento = "click"
const funcionQueSeEjecuta = () => console.log(tipoDeEvento);

elemento.addEventListener(tipoDeEvento, funcionQueSeEjecuta);
<div id="elem"> Soy un elemento cualquiera clickeame </div>

UseEffect

Por otro lado el hook useEffect que definiste:

javascript

const [clicked, setClicked] = useState(false);

useEffect{() => {
   console.log(('me ejecute', clicked));
}, [clicked]);

html

<div onClick={() => setClicked(state =>)}> 
     dame click { JSON.stringify(clicked) }
</div>

Se ejecutará después de que el componente se haya renderizado y nada más (Ya que tienes un error en el html al llamar a setClicked).

Si queremos que nuestro useEffect se ejecute cada vez que hacemos click sobre el div entonces deberíamos tener lo siguiente:

La parte javascript queda igual.

html

<div onClick={() => setClicked(!clicked)}> <!-- Realmente cambiamos el estado de clicked -->
     dame click { JSON.stringify(clicked) }
</div>

En este caso la función dentro de nuestro useEffect se ejecutará después de que el componente se haya renderizado y cada vez que hagamos click en el div.

Cabe remarcar que esto es porque el valor de clicked cambia y no por el simple hecho de hacer click.

Ahi está una de las principales diferencias.

Nótese que el cambio de valor de la variable clicked puede no estar atado a hacer un click sobre un elemento, podríamos usar setClicked en cualquier otro lado:

<input onChange={() => setClicked(!clicked)}

Y de esta forma cada vez que escribamos en el input cambiaremos el valor de clicked de true a false y viceversa y por lo tanto se ejecutará la función dentro de nuestro useEffeect.

Más info sobre hooks y useEffect

Los hooks llegaron a react para usar el estado y otras características de React sin escribir una clase.

Es decir, escribir componentes funcionales (Son componentes de react que se definen como funciones y no como clases).

El hook useEffect es uno de los hooks que más confusión crea.

En pocas palabras el hook useEffect te permite llevar a cabo efectos secundarios en componentes funcionales.

En la documentación nos remarcan que:

Si estás familiarizado con el ciclo de vida de las clases de React y sus métodos, el Hook useEffect equivale a componentDidMount, componentDidUpdate y componentWillUnmount combinados.

Esto significa que con useEffect podemos interactuar con los distintos ciclos de vida de nuestro componente funcional. (Véase ejemplo)

Para no extenderme más. En resumen useEffect puede actuar de 3 maneras distintas dependiendo de la segunda variable que le pasemos (el array de dependencias).

Esto es:

  1. Si no le pasamos un array de dependencias el efecto se ejecutara cada vez que el componente se vuelva a renderizar. (Sería como un componentDidUpdate)

  2. Si le pasamos un array vacío useEffect( ()=>{}, []) se ejecutará solo la primera vez que se renderize el componente (Sería como componentDidMount y componentWillUnmount).

  3. Y por último si al array le pasamos una dependencia entonces se ejecutará únicamente cuando dicha dependencia (valor de la variable) cambie.

4
  • El punto dos creo que deberias corregirlo, no es asi. No se ejecuta cuando se este por desmontar, eso lo podes hacer desde cualquiera de los 3 useEffect retornando una funcion.
    – Agustin G.
    el 28 jul. 2022 a las 13:09
  • 1
    @AgustinG. corregido. Gracias! el 28 jul. 2022 a las 13:12
  • Ahi te edite el punto para eliminar un componenteWillUnmount que te habia quedado, y el link de Seria como porque estaba roto. Si querias poner un link ahi, deberias volver a editarla. Saludos
    – Agustin G.
    el 28 jul. 2022 a las 14:47
  • Gracias! El link apunta a la documentación, donde comenta: "Si bien pasar [] como segundo argumento se acerca al conocido modelo mental de componentDidMount y componentWillUnmount" Es por eso que entre paréntesis dice "Sería como" y no "Es como" el 28 jul. 2022 a las 15:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.