title: Update react setState with mouse Event values
body: <p>I can update state for a moment then it just freezes, can I not set state so often?</p>
  
  <p>The aim is to simply show the cursor position to the user.</p>
  
  <pre><code>import React, { useState } from 'react';
  
  const Inspector: React.FC = () =&gt; {
  
    const [state, setState] = useState({
      offsetX: 0,
      offsetY: 0,
    });
  
    const canvas = document.getElementById('canvas');
    if (canvas) {
      canvas.addEventListener(
        'mousemove',
        (event) =&gt; {
          setState((prev) =&gt; ({
            ...prev,
            offsetX: event.offsetX,
            offsetY: event.offsetY,
          }));
        },
        false
      );
    }
  
    return (
      &lt;div className='inspector'&gt;
        &lt;div className='inspector--container'&gt;
          &lt;div className='inspector--description'&gt;Cursor X&lt;/div&gt;
          &lt;input type='text' value={state.offsetX} /&gt;
        &lt;/div&gt;
  
        &lt;div className='inspector--container'&gt;
          &lt;div className='inspector--description'&gt;Cursor Y&lt;/div&gt;
          &lt;input type='text' value={state.offsetY} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export { Inspector };
  </code></pre>