为什么 useEffect 在 window.innerWidth 发生变化时运行，即使其中的第二个参数是空数组

Question

useEffect in this code runs every time the window size changes, but the second parameter in useEffect is an empty array, I thought as long as the second parameter doesn't change compare to last time, the useEffect won't run

 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> ) }

Answer 1

It is not that useEffect runs, rather the registered event listener. useEffect indeed runs once and registers the event listener once. But then afterwards, the listener callback is called.

Answer 2

If you console.log inside of useEffect, you will see it will actually gets run only once. Basically you have set once the event listener for the resize event. But you still have the registered event listener in place, which works as it's supposed to.