title: TypeError: Cannot read property 'offsetHeight' of null after screen resize when using React.createRef
body: <p>I am trying to attach a reference to each <code>StyledSlide</code> styled component below and then measure the <code>offsetHeight</code> of each to determine which slide is the tallest. </p>
  
  <p>Below I am using <code>React.createRef</code>. This works almost fine for the initial render, but when I resize the browser I get the following error:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'offsetHeight' of null</p>
  </blockquote>
  
  <p>If I perform a <code>console.log(this.refArray)</code> I can still see each reference and find the <code>offsetHeight</code> in the console.</p>
  
  <p>What I am trying to do is on resize to re-calculate the tallest slide.</p>
  
  <p>Below is a Pseudo example of the main parts that are relevant:</p>
  
  <pre class="lang-js prettyprint-override"><code>class CarouselComponent extends React.Component {
    constructor(props) {
      super(props);
      this.refArray = [];
    }
  
    handleResize = () =&gt; {
      let highestSlide = 0;
  
      this.refArray.forEach(ref =&gt; {
        if (highestSlide &lt; ref.current.offsetHeight) {
          highestSlide = ref.current.offsetHeight;
        }
      });
      console.log(`highest slide: ${highestSlide}`);
      console.log(this.refArray);
    };
  
    componentDidMount() {
      this.handleResize();
      window.addEventListener("resize", this.handleResize);
    }
  
    componentWillUnmount() {
      window.removeEventListener("resize", this.handleResize);
    }
  
    getAllSlides = () =&gt; {
      const { collectionOfSlides } = this.props;
  
      return collectionOfSlides.map((component, index) =&gt; {
        const slideHeightRef = React.createRef();
        this.refArray.push(slideHeightRef);
        return (
          &lt;StyledSlide key={index} innerRef={slideHeightRef}&gt;
            {React.cloneElement(component)}
          &lt;/StyledSlide&gt;
        );
      });
    };
  
    render() {
      return &lt;div&gt;{this.getSlides()}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>Any suggestions on the best way forward would be greatly appreciated! Or how to best tackle this problem</p>