title: How to get size of an element in an react app that is totally based on functional components?
body: <p>I have a react app that is purely built with functional components. I want to get the height of an element after it has been rendered on screen to change size of it's parent accordingly.</p>
  
  <p>There are solutions for class based apps but I couldn't find any for functional components.</p>
  
  <p>i tried this solution from answers but it is not running the useEffect hook</p>
  
  <p>here is extracted code from my component</p>
  
  <pre><code>import React, {useRef, useEffect} from 'react';
  import {
      MenuContainer,
      GrayBox,
      Wrapper
  
  } from '../LayersMenu/LayerMenu.styles';
  
  
  export const Component = ({ category, showStatistics }) =&gt; {
      const grayBoxRef= useRef(null);
      const wrapperRef= useRef(null);
      const testRef= useRef(null);
      useEffect(()=&gt;{
          const height = wrapperRef.current.offsetHeight;
          console.log(height,'check');
        }, [wrapperRef])
      useEffect(()=&gt;{
          const height = testRef.current.offsetHeight;
          console.log(height,'check2');
      },[testRef]);
      return (
          &lt;MenuContainer ref={testRef}&gt;
              &lt;GrayBox ref={grayBoxRef}&gt;
                  &lt;Wrapper ref={wrapperRef} hasAnyAllowedStats={showStatistics}&gt;
                  &lt;/Wrapper&gt;
              &lt;/GrayBox&gt;
          &lt;/MenuContainer&gt;
      );
  };
  </code></pre>
  
  <p>PS: accepted answer didn't work for my answer but it works for the project he added in answer works so i guess there is something wrong with my project structure or something not entirely sure.</p>
  
  <p>Thanks alot for answer</p>