title: I can't change variable from function on event listener in React
body: <p>I have a window <code>mousemove</code> event listener, that calls a function that changes a variable. However when I assign the varibale to a prop it doesn't change:</p>
  
  <pre><code>  var x = null
    var y = null
  
    const cursor = (e) =&gt; {
      x = e.screenX + 'px'
      y = e.screenY + 'px'
      console.log(x, y)
      return x, y
    }
  
    window.addEventListener('mousemove', cursor)
  </code></pre>
  
  <p>I tried to directly change it in the event listener</p>
  
  <p>(<code>window.addEventListener('mousemove', //everything in cursor</code>) but then I wouldn't be able to access the <code>e</code> variable. </p>
  
  <p>I also can't use it with state because for some reason it's gets too laggy and crashes.</p>
  
  <p>How can I make this work? Thanks in advance.</p>
  
  <p>That's what I see in vscode:</p>
  
  <p><a href="https://i.stack.imgur.com/yPyTC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yPyTC.png" alt="enter image description here"></a></p>
  
  <p>(This is in the App component, the variables and the evenet listener are in the App too.)</p>
  
  <p>Sandbox: <a href="https://codesandbox.io/s/vigorous-agnesi-9l1ic?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/vigorous-agnesi-9l1ic?file=/src/App.js</a></p>