useEffect en este código se ejecuta cada vez que cambia el tamaño de la ventana, pero el segundo parámetro en useEffect es una matriz vacía, pensé que mientras el segundo parámetro no cambie en comparación con la última vez, useEffect no se ejecutará
import React from "react" export default function WindowTracker() { const [windowWidth, setWindowWidth] = React.useState(window.innerWidth) React.useEffect(() => { window.addEventListener("resize", function() { setWindowWidth(window.innerWidth) }) }, []) return ( <h1>Window width: {windowWidth}</h1> ) }No es que se ejecute useEffect , sino la devolución de llamada del detector de eventos registrado. useEffect hecho se ejecuta una vez y registra el detector de eventos una vez. Pero luego, se llama a la devolución de llamada del oyente.
Le dijiste al detector de eventos que escuche para resize el tamaño, ¿verdad? Por lo tanto, debe esperar que se llame cada vez que se produzca un cambio de resize .
Además, si devuelve la función de su efecto, se ejecutará cuando el componente se desmonte (debido a las dependencias vacías); puedes usar eso para eliminar el oyente:
React.useEffect(() => { let cb = function () { setWindowWidth(window.innerWidth); }; window.addEventListener("resize", cb); return () => { window.removeEventListener("resize", cb); }; }, []);Si console.log dentro de useEffect, verá que en realidad se ejecutará solo una vez. Básicamente, ha configurado una vez el detector de eventos para el evento de cambio de tamaño. Pero aún tiene el detector de eventos registrado en su lugar, que funciona como se supone que debe hacerlo.