title: ReactJS position update to previous locations (using getBoundingClientRect())
body: <p>I'm trying to write a simple svg-arrow component in react.
  i cant figure out why the position I'm getting from getBoundingClientRect() is of the previous state even though I've console logged some text at each stage to see the order of things and it seems that getBoundingClientRect() is triggered after the position was updated - but still get the previous position from it and can't figure it out.</p>
  
  <pre><code>import React, { useRef, useEffect, useState } from "react";
  var lodash = require("lodash"); 
  
  function Xarrow(props: props) {
    const selfRef = useRef(null);
    const [hasMounted, setHasMounted] = useState(false);
    const [s, setS] = useState({
      //state of the line properties
    });
  
    const getPos = () =&gt; {
      // use getBoundingClientRect() to get position
      console.log("getBoundingClientRect");
    };
  
    //
    // extra stuff here
    //
  
    const updatePosition = (props) =&gt; {
      // update state of the line according to new props
    };
  
    // holds the position of the start and end of the line
    const  [prevPosState, setPrevPosState] = useState(null);
  
    if (hasMounted) {
      // update state if location of "start" or "end" changed
      if (!lodash.isEqual(prevPosState, getPos())) {
        console.log("POSITION CHANGED!", prevPosState);
        updatePosition(props);
      } else {
        console.log("position not changed", prevPosState);
      }
    }
  
    return (
      &lt;svg
        ref={selfRef}
        width={s.cw}
        height={s.ch}
        style={{
          position: "absolute",
          left: s.cx0,
          top: s.cy0
        }}
      &gt;
        &lt;line
          x1={s.x1}
          x2={s.x2}
          y1={s.y1}
          y2={s.y2}
          style={{ stroke: "rgb(255,0,0)", strokeWidth: "2" }}
        /&gt;
      &lt;/svg&gt;
    );
  }
  
  
  const App = () =&gt; {
    const [boxes, setBoxes] = useState&lt;box[]&gt;([
      { id: "box1", x: 120, y: 30, ref: useRef(null) },
      { id: "box2", x: 30, y: 70, ref: useRef(null) }
    ]);
  
    const handlDragStart = (e) =&gt; {
      //remember drag starting postion
    };
  
    const handleDragEnd = (e, boxId) =&gt; {
      // update box position here
      console.log("endDrag");
    };
    return (
      &lt;div className="App"&gt;
        &lt;header style={titleStyle}&gt;xarrows-stackOverflow&lt;/header&gt;
        &lt;hr /&gt;
        &lt;div style={canvasStyle} id="canvas"&gt;
          &lt;Xarrows start={boxes[0].ref} end={boxes[1].ref} /&gt;
          {boxes.map((box, i) =&gt; (
            &lt;div
              ref={box.ref}
              style={{ ...boxStyle, left: box.x, top: box.y }}
              onDragStart={e =&gt; handlDragStart(e)}
              onDragEnd={e =&gt; handleDragEnd(e, box.id)}
              draggable
            &gt;
              {box.id}
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>here a simple demonstration: <a href="https://codesandbox.io/s/xarrows-stackoverflow-vey7x" rel="nofollow noreferrer">https://codesandbox.io/s/xarrows-stackoverflow-vey7x</a>
  two boxes with a line between them - the boxes are draggable(the Xarrow component is the important).</p>
  
  <p>drag a box and watch the console - it looks like the getBoundingClientRect() is called after the dragEnd event, so apparently the parent(App) already updated, so why do I keep get the previous location?</p>