why does useEffect run once the window.innerWidth changes even though the second param in it is an empty array

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 callback. useEffect indeed runs once and registers the event listener once. But then afterwards, the listener callback is called.

You told the event listener to listen to resize right? So you should expect it to be called any time resize happens.

Also if you return function from your effect, it will run when component unmounts (because of empty dependencies); you can use that to remove listener:

React.useEffect(() => {
  let cb = function () {
    setWindowWidth(window.innerWidth);
  };
  window.addEventListener("resize", cb);

  return () => {
    window.removeEventListener("resize", cb);
  };
}, []);