console.clear();
console.log({ React, ReactDOM });
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

function createMousePosition(x, y) {
  return { x, y };
}

function MouseMove() {
  const [mousePosition, setMousePosition] = React.useState(createMousePosition(0, 0));

  // i absolutely don't want to rerun this hook at any other time
  // then initial mount and last unmount
  React.useEffect(() => {
    // saveMousePosition must be defined in the hook
    // when a hook calls a function that references state or props
    // they must be declared in dependency array
    // if saveMousePosition is outside of the hook
    // i would need to use React.useCallback to wrap it
    function saveMousePosition(event) {
      setMousePosition(createMousePosition(event.clientX, event.clientY));
    };

    document.addEventListener('mousemove', saveMousePosition);
    return () => {
      document.removeEventListener('mousemove', saveMousePosition);
    };
  }, [setMousePosition]);

  return (
    <h1
      style={{
        position: 'absolute',
        top: `${mousePosition.y}px`,
        left: `${mousePosition.x}px`,
        transform: 'translate(-50%, -50%)',
        margin: 0
      }}
    >
      reactjs mousemove non-throttled version
    </h1>
  );
}

const root = document.getElementById('root');
ReactDOM.createRoot(root).render(<MouseMove />);