title: Receive dimensions of element via getBoundingClientRect in React
body: <p>I would like to find out the dimensions of a DOM element in a reliable way.</p>
  
  <p>My consideration was to use getBoundingClientRect for this.</p>
  
  <pre><code>  const elementRef = useRef&lt;HTMLUListElement | null&gt;(null);
    const [dimensions, setDimensions] = useState&lt;DOMRect | undefined&gt;();
  
    const element: HTMLUListElement | null = elementRef.current;
  
    /**
     * Update dimensions state.
     */
    const updateDimensions = useCallback(() =&gt; {
      if (!element) return;
  
      setDimensions(element.getBoundingClientRect());
    }, [element, setDimensions]);
  
    /**
     * Effect hook to receive dimensions changes.
     */
    useEffect(() =&gt; {
      if (element) {
        updateDimensions();
      }
    }, [element, updateDimensions]);
  </code></pre>
  
  <p>The problem with this approach is that useEffect only reacts to elementRef.current and not to the rect changes. Apparently the drawing of the component in the browser is not finished yet, because the dimensions are always 0. </p>
  
  <p>If I do the whole thing outside the useEffect then it works. In the console I see 2 times values with 0 and then the correct dimensions.</p>
  
  <p>With useEffect:</p>
  
  <p><a href="https://i.stack.imgur.com/Cuhpq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Cuhpq.png" alt="Dimensions with useEffect"></a></p>
  
  <p>Outside of useEffect:</p>
  
  <p><a href="https://i.stack.imgur.com/ZLFXK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZLFXK.png" alt="Dimensions outside useEffect"></a></p>
  
  <p>However, I would like to save the dimensions in the state and for this I need the useEffect.</p>
  
  <p>How can I achieve this with getBoundingClientRect or is there another way to do this?</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>It was not a problem of react it self. It is a bug in ionic V5 react.</p>
  
  <p>Normally you can do it in this way:</p>
  
  <p><a href="https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node" rel="nofollow noreferrer">https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node</a></p>
  
  <p>But here is an issue:</p>
  
  <p><a href="https://github.com/ionic-team/ionic/issues/19770" rel="nofollow noreferrer">https://github.com/ionic-team/ionic/issues/19770</a></p>
  
  <p>My solution is to use: <a href="https://github.com/que-etc/resize-observer-polyfill" rel="nofollow noreferrer">https://github.com/que-etc/resize-observer-polyfill</a></p>
  
  <pre><code>import { RefCallback, useCallback, useState } from 'react';
  import ResizeObserver from 'resize-observer-polyfill';
  
  
  export function useDimensions(): [RefCallback&lt;HTMLElement | null&gt;, DOMRect | undefined] {
    const [dimensions, setDimensions] = useState&lt;DOMRect | undefined&gt;();
  
    const ref: RefCallback&lt;HTMLElement | null&gt; = useCallback((node: HTMLElement | null) =&gt; {
      if (node) {
        setDimensions(node.getBoundingClientRect().toJSON());
  
        const resizeObserver = new ResizeObserver((entries) =&gt; {
          if (entries.length) {
            setDimensions(entries[0].target.getBoundingClientRect().toJSON());
          }
        });
  
        resizeObserver.observe(node);
  
        return () =&gt; {
          resizeObserver.unobserve(node);
          resizeObserver.disconnect();
        };
      }
    }, []);
  
    return [ref, dimensions];
  }
  </code></pre>