find size of react component or image before rendering
<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>