ReactJS Img Tag Memory Leak
<p>UPDATE: The images it turns out had their dimensions set for 5k resolution hence the giant ram usage. While garbage collection is kicking in on the lower res photos the site is still to ram heavy for Android Chrome. Thanks to all tho answerers.</p>

<p>Folks I am having a bit of an issue with ReactJS and some img tags. I am not using JSX so my code is in javascript. My splash page takes up 120 megabytes of memory however when I click to go to a section with 6 images the memory balloons up to 900 megabytes despite the images being 900kb each. I have set shouldComponentUpdate and the images are not being updated consistently. I added a random query flag to get around caching this didn't change the memory leak.</p>

<pre><code>var Modal_Image = React.createClass({

  showModal: function(url){
    store.dispatch({type: "SHOW_MODAL", src: url});
  },
  shouldComponentUpdate: function(next_props, _){
    console.log("modal image might update");
    if(next_props.url != this.props.url){
      return true;
    }
    if(next_props.size != this.props.size){
      return true;
    }
    return false;
  },
  componentDidUpdate:function(){
    console.log("modal image updated");
  },
  render: function(){
    return(
      React.createElement("div", {className: "image-holder " + this.props.size},
        React.createElement("img", {src: this.props.url, className: "home-image c-hand", alt: "", onClick: this.showModal.bind(this, this.props.url) })
      )
    )
  }
});
</code></pre>

<p>neither the size prop or the url prop is changing and the console.logs aren't reporting back any changes yet Chrome needs 800 megabytes to store these images. Any ideas or hints on dealing with memory leak issues involving images?</p>

<p>Additions:
 /**
  * React v15.3.0
  */</p>

<p>Edit:</p>

<ol>
<li>removed the componentWillUnmount method. </li>
<li>removed animated fadeIn</li>
<li>removed the cache busting query flag seems to have helped</li>
</ol>