title: Using React Hooks, why are my event handlers firing with the incorrect state?
body: <p>I'm trying to create a copy of this spinning <code>div</code> example using react hooks. <a href="https://codesandbox.io/s/XDjY28XoV" rel="noreferrer">https://codesandbox.io/s/XDjY28XoV</a></p>
  
  <p>Here's my code so far</p>
  
  <pre><code>import React, { useState, useEffect, useCallback } from 'react';
  
  const App = () =&gt; {
    const [box, setBox] = useState(null);
  
    const [isActive, setIsActive] = useState(false);
    const [angle, setAngle] = useState(0);
    const [startAngle, setStartAngle] = useState(0);
    const [currentAngle, setCurrentAngle] = useState(0);
    const [boxCenterPoint, setBoxCenterPoint] = useState({});
  
    const setBoxCallback = useCallback(node =&gt; {
      if (node !== null) {
        setBox(node)
      }
    }, [])
  
    // to avoid unwanted behaviour, deselect all text
    const deselectAll = () =&gt; {
      if (document.selection) {
        document.selection.empty();
      } else if (window.getSelection) {
        window.getSelection().removeAllRanges();
      }
    }
  
    // method to get the positionof the pointer event relative to the center of the box
    const getPositionFromCenter = e =&gt; {
      const fromBoxCenter = {
        x: e.clientX - boxCenterPoint.x,
        y: -(e.clientY - boxCenterPoint.y)
      };
      return fromBoxCenter;
    }
  
    const mouseDownHandler = e =&gt; {
      e.stopPropagation();
      const fromBoxCenter = getPositionFromCenter(e);
      const newStartAngle =
        90 - Math.atan2(fromBoxCenter.y, fromBoxCenter.x) * (180 / Math.PI);
      setStartAngle(newStartAngle);
      setIsActive(true);
    }
  
    const mouseUpHandler = e =&gt; {
      deselectAll();
      e.stopPropagation();
      if (isActive) {
        const newCurrentAngle = currentAngle + (angle - startAngle);
        setIsActive(false);
        setCurrentAngle(newCurrentAngle);
      }
    }
  
    const mouseMoveHandler = e =&gt; {
      if (isActive) {
        const fromBoxCenter = getPositionFromCenter(e);
        const newAngle =
          90 - Math.atan2(fromBoxCenter.y, fromBoxCenter.x) * (180 / Math.PI);
        box.style.transform =
          "rotate(" +
          (currentAngle + (newAngle - (startAngle ? startAngle : 0))) +
          "deg)";
        setAngle(newAngle)
      }
    }
  
    useEffect(() =&gt; {
      if (box) {
        const boxPosition = box.getBoundingClientRect();
        // get the current center point
        const boxCenterX = boxPosition.left + boxPosition.width / 2;
        const boxCenterY = boxPosition.top + boxPosition.height / 2;
  
        // update the state
        setBoxCenterPoint({ x: boxCenterX, y: boxCenterY });
      }
  
      // in case the event ends outside the box
      window.onmouseup = mouseUpHandler;
      window.onmousemove = mouseMoveHandler;
    }, [ box ])
  
    return (
      &lt;div className="box-container"&gt;
        &lt;div
          className="box"
          onMouseDown={mouseDownHandler}
          onMouseUp={mouseUpHandler}
          ref={setBoxCallback}
        &gt;
          Rotate
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  
  <p>Currently mouseMoveHandler is called with a state of <code>isActive = false</code> even though the state is actually true. How can I get this event handler to fire with the correct state?</p>
  
  <p>Also, the console is logging the warning:</p>
  
  <pre><code>React Hook useEffect has missing dependencies: 'mouseMoveHandler' and 'mouseUpHandler'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
  </code></pre>
  
  <p>Why do I have to include component methods in the useEffect dependency array? I've never had to do this for other simpler component using React Hooks.</p>
  
  <p>Thank you</p>