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>
)
}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);
};
}, []);
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.