title: find size of react component or image before rendering
body: <p>I have a list of images of different sizes. </p>
  
  <pre><code>images = ['https://example.com/1.jpg','https://example.com/2.jpg', ... ]
  </code></pre>
  
  <hr>
  
  <p>I want to get an array of their height before rendering them. I will then only render the images which should be in viewport based on scrollHeight. e.g using <a href="https://github.com/seatgeek/react-infinite" rel="noreferrer">React Infinte</a></p>
  
  <p>I can do this easily outside react component</p>
  
  <pre><code>let imgHeights =  images.map(imgUrl =&gt; {
      var img  = new Image()
      img.src = imgUrl
      return img.height;
  })
  </code></pre>
  
  <p>but <code>new image()</code> does not work in react since it depends on DOM.</p>
  
  <p>My React component render method looks like this.</p>
  
  <pre><code>var ImageList = (images) =&gt; {
       let buildImageList = images.map(imgUrl =&gt; {
           return &lt;img src= {imgUrl}&gt;&lt;/img&gt;
       })
  
       let imgHeights = images.map(imgUrl =&gt; {
           let img = new Image()
           img.src = imgUrl
           return img.height //this doesn't work 
       })
  
       return (
           &lt;Infinte elemetHeight = {imgHeights} onInfiniteLoad ={buildImageList} /&gt;
       ) 
  }
  </code></pre>
  
  <p>How can I get The Image height? Should I use ReactDOM to render images in a temporary div?</p>