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:
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
)
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
).
Y por último si al array le pasamos una dependencia entonces se ejecutará únicamente cuando dicha dependencia (valor de la variable) cambie.
clicked
(un estado del componente) es modificada