title: use useRef to get updated height on children changed
body: <p>I have an accordian component, I use useRef to measure the children height. But I have functionality on the children to change the content, but the children's measurement didn't update, unless I click on the toggle again.</p>
  
  <pre><code>const Accordian = ({ isOpen, children }) =&gt; {
    const chilRef = useRef();
    const [childHeight, setChildHeight] = useState(0);
  
    useEffect(() =&gt; {
      if (isOpen) {
        const childHeight = chilRef.current &amp;&amp; chilRef.current.scrollHeight;
        setChildHeight(childHeight);
      }
    }, [isOpen]);
  
    return (
      &lt;div
        style={{
          display: isOpen ? "block" : "none"
        }}
      &gt;
        &lt;div ref={chilRef}&gt;
          {children}
  
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;div&gt;ChildHeight: {childHeight}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default function App() {
    const [boxOpen, setBoxOpen] = useState(true);
    const [expandChild, setExpandChild] = useState(false);
  
    return (
      &lt;div className="App"&gt;
        &lt;button
          onClick={() =&gt; {
            setBoxOpen(prev =&gt; !prev);
          }}
        &gt;
          Toggle box
        &lt;/button&gt;
        &lt;Accordian isOpen={boxOpen}&gt;
          {expandChild ? (
            &lt;&gt;
              &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
              &lt;div&gt;This has more content&lt;/div&gt;
              &lt;div&gt;More content......&lt;/div&gt;
            &lt;/&gt;
          ) : (
            &lt;&gt;
              &lt;div&gt;Hello&lt;/div&gt;
              &lt;button
                onClick={() =&gt; {
                  setExpandChild(true);
                }}
              &gt;
                Expand child
              &lt;/button&gt;
            &lt;/&gt;
          )}
        &lt;/Accordian&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/jovial-rgb-vcqnz?file=/src/App.js:83-1435" rel="nofollow noreferrer">https://codesandbox.io/s/jovial-rgb-vcqnz?file=/src/App.js:83-1435</a></p>
  
  <p>How do I get the children height every time the children changed?</p>