title: Height size change is not causing state update React Hooks
body: <p>I'm trying to have my Carousel height resize dynamically upon change. However I can't seem trigger a state change purely from a childs height change. </p>
  
  <p>Listening to children was pretty good, infact I'm not fully sure why it's not working.</p>
  
  <p>The problem occurs when an error message is appended to a child within the carousel. It doesn't update.</p>
  
  <p>Currently the best thing I know of to do is an interval...
  Is there a better way?</p>
  
  <pre><code>import React, {useState, useEffect, useRef} from 'react';
  import './Carousel.scss';
  
  // Wrapped children components must be placed inside of &lt;div&gt; elements
  const Carousel = ({slideTo, children}) =&gt; {
  
    const [carouselStyle, setCarouselStyle] = useState({});
    const activeRef = useRef(null);
    const index = slideTo - 1
  
    const newChildren = [];
    children.map((d,i) =&gt; {
      let addClass = (d.props.className !== undefined) ? d.props.className: ""
      const newProps = { 
        key: i 
      };
  
      if(i === index){
        addClass += " active"
        newProps.ref = activeRef;
      }
  
      newProps.className = addClass.trim();
  
      const newChild = React.cloneElement(d, newProps);
  
      newChildren.push(newChild);
      return false
    });
  
    const carouselContainerStyle = {
      left: (((slideTo * 100) - 100) * -1) + "%",
      width: (newChildren.length * 100)+ "%"
    }
  
  
  
    useEffect(() =&gt; {
      const interval = setInterval(function(){
        console.log("int");
  
        if(activeRef != null){
          if(carouselStyle.height === undefined || carouselStyle.height !== activeRef.current.clientHeight){
            setCarouselStyle({
              height: activeRef.current.clientHeight,
            });
          }
        }
  
      },50)
  
      return () =&gt; {
        clearInterval(interval)
      }
    },[]);
  
    useEffect(() =&gt; {
      console.log("children update");
  
      if(activeRef.current !== null){
        setCarouselStyle({
          height: activeRef.current.clientHeight,
        });
      }
    },[slideTo,children]);
  
  
    return (
      &lt;div className="carousel" style={carouselStyle}&gt;
        &lt;div style={carouselContainerStyle} className="carousel-container"&gt;
          {newChildren}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Carousel;
  </code></pre>
  
  <p>Implementation</p>
  
  <pre><code>&lt;Carousel slideTo={slide}&gt;
   &lt;div&gt;&lt;SignIn/&gt;&lt;/div&gt;
   &lt;div&gt;&lt;SignUp/&gt;&lt;/div&gt;
  &lt;/Carousel&gt;
  </code></pre>