useState value used setInterval is not updating in addEventListener

I'm trying to pass the value to addEventListener(mousemove) from setInterval. Somehow it's not working properly. Can someone help?

  const [date, setDate] = useState(new Date());

  function refreshClock() {
    setDate(new Date());
  }

  var x = 0;
  var y = 0;

  const [text, setText] = useState('');
  
  let windowHeight = window.innerHeight/2;
  let windowWidth = window.innerWidth/2;
  
  useEffect(() => {
    const timerId = setInterval(refreshClock, 1000);  

    const onMouseMove = function(e) {
      x = e.clientX;
      y = e.clientY;

      if (x < windowWidth+100 && x > windowWidth-100 && y < windowHeight+100 && y > windowHeight-100 ) {
        setText(`${date.toLocaleTimeString('en-GB')}`);
      } else {
        setText('');
      }
    }

    window.addEventListener("mousemove", onMouseMove)

    return function cleanup() {
      clearInterval(timerId);
      window.removeEventListener("mousemove", onMouseMove)
    };
  }, []);
  
  return (
    <>
      {text}
    </>
  )

I'm trying to make time shows when the mouse is around the center of the window. setInterval is working fine without addEventListener.

The main issue you are having is that -

1. your useEffect runs only once
2. onMouseMove is declared inside the effect
3. onMouseMove closes over date
4. date will always be the same because the onMouseMove never gets an updated value
5. setText therefore will only display the first date

Another issue you are having is -

1. window width/height are computed once outside the effect
2. onMouseMove closes over these values
3. if the window is resized, the event listener will keep the old values

We can fix these issues by moving onMouseMove outside the effect. And instead of copying date state to text, we will use useRef to simply toggle the visibility on/off. In react this is known as keeping a single source of truth. Here's a minimal reproducible example -

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

function App() {
  const [date, setDate] = React.useState(new Date())
  const isDateVisible = React.useRef(false)
  
  const refreshClock = () =>
    setDate(new Date()) // update clock
    
  const onMouseMove = event => {
    const wx = window.innerWidth/2
    const wy = window.innerHeight/2
    const x = event.clientX
    const y = event.clientY
    isDateVisible.current = // update visibility
      x < wx+100 && x > wx-100 && y < wy+100 && y > wy-100
  }
  
  React.useEffect(
    () => {
      const t = setInterval(refreshClock, 1000)
      addEventListener("mousemove", onMouseMove)
      return () => {
        clearInterval(t)
        removeEventListener("mousemove", onMouseMove)
      }
    },
    [] // refreshClock and onMouseMove have zero deps
  )
  
  return isDateVisible.current
    && date.toLocaleTimeString('en-GB')
}

ReactDOM.createRoot(document.querySelector("#app")).render(<App />)

<!-- language: lang-css -->

body::before { content: "move the cursor to the center"; }

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

<!-- end snippet -->

strict dependencies

In general, you will need to include any free variables as dependencies to your effects. If we were to be strict, refreshClock and onMouseMove would be listed as dependencies, but they have zero dependencies of their own and so it's safe to leave them out.

refreshClock and onMouseMove are recreated each time date state changes and the component is re-rendered. If we list them as dependencies to useEffect then the effect will re-run too, which we'd like to avoid.

Using useCallback ensures that refreshClock and onMouseMove will point to the same function object for each render, and prevents the effect from re-running unnecessarily. This updated program has the same behaviour as the one above, but it is more strict, and possibly communicates intentions more clearly.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

function App() {
  const [date, setDate] = React.useState(new Date())
  const isDateVisible = React.useRef(false)
  
  const refreshClock = React.useCallback(
    () => setDate(new Date()),
    [] // zero dependencies
  )
    
  const onMouseMove = React.useCallback(
    event => {
      const wx = window.innerWidth/2
      const wy = window.innerHeight/2
      const x = event.clientX
      const y = event.clientY
      isDateVisible.current =
        x < wx+100 && x > wx-100 && y < wy+100 && y > wy-100
    },
    [] // zero dependencies
  )
  
  React.useEffect(
    () => {
      const t = setInterval(refreshClock, 1000)
      addEventListener("mousemove", onMouseMove)
      return () => {
        clearInterval(t)
        removeEventListener("mousemove", onMouseMove)
      }
    },
    [refreshClock, onMouseMove] // strict dependencies
  )
  
  return isDateVisible.current
    && date.toLocaleTimeString('en-GB')
}

ReactDOM.createRoot(document.querySelector("#app")).render(<App />)

<!-- language: lang-css -->

body::before { content: "move the cursor to the center"; }

<!-- language: lang-html -->

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="app"></div>

<!-- end snippet -->

Final notes:

1. Do not include state setter function as dependency. setDate is already guaranteed to be a non-changing value from useState
2. Do not include references as dependencies. Refs do not represent reactive state change and therefore do not trigger renders.