title: Not getting the updated width/height on re-render
body: <p>Please check the below snippet. The nested elements inside <code>div</code> changes and re-renders (managed by state), and accordingly height of <code>div</code> changes. But I'm not getting the most lasted height/width of <code>div</code> tag. It gives the previous (one render behind) height/width.</p>
  <p>Any idea, how to get the most updated width/height of div on each re-render?</p>
  <p>Thanks!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { useRef, useEffect } from "react";
  
  const Component = (props) =&gt; {
    const willMount = useRef(true);
    const y = useRef();
    
   // const [width, height] = useWindowSize();
  
    useLayoutEffect(() =&gt; {
      console.log("helloUseLayout");
      console.log(y.current.offsetWidth);
      console.log(y.current.offsetHeight);
    });
  
    useEffect(() =&gt; {
      if (willMount.current) {
        //...
      }
      willMount.current = false;
  
      console.log(y.current.offsetWidth);
      console.log(y.current.offsetHeight);
    });
  
    return ( 
        &lt;div ref={y} style={{height: "300px", overflow: "auto" }}&gt;
          // Other Nested Components...
          // causing overflow and thus creating Y-Scrollbar.
        &lt;/div&gt; 
    );
  };
  
  export default Component;</code></pre>
  </div>
  </div>
  </p>