title: How To Cache Images in React?
body: <p>Suppose I have a list of url's like so :</p>
  
  <p><code>[ '/images/1', '/images/2', ... ]</code></p>
  
  <p>And I want to prefetch <code>n</code> of those so that transitioning between images is faster. What I am doing now in <code>componentWillMount</code> is the following:</p>
  
  <pre><code>componentWillMount() {
        const { props } = this;
        const { prefetchLimit = 1, document = dummyDocument, imgNodes } = props;
        const { images } = document;
        const toPrefecth = take(prefetchLimit, images);
        const merged = zip(toPrefecth, imgNodes);
  
        merged.forEach(([url, node]) =&gt; {
          node.src = url;
        });
      }
  </code></pre>
  
  <p>with <code>imgNodes</code> being defined like so:</p>
  
  <p><code>imgNodes: times(_ =&gt; new window.Image(), props.prefetchLimit),</code></p>
  
  <p>and <code>times</code>, <code>zip</code>, and <code>take</code> coming from <a href="http://ramdajs.com" rel="noreferrer">ramda</a>.</p>
  
  <p>Now when I use those urls inside of react like so:</p>
  
  <p><code>&lt;img src={url} /&gt;</code></p>
  
  <p>it hits the browser cache according to the <code>Etag</code> and <code>Expire</code> tags regardless of where the url is used. I also plan on using this to prefetch the next <code>n</code> images whenever we hit <code>n - 1</code> inside of the view, reusing <code>imgNodes</code> in the same manner.</p>
  
  <p>My question are:</p>
  
  <ul>
  <li><p>Is this even a valid idea give 100+ components that will use this idea but only 1 will be visible at a time?</p></li>
  <li><p>Will I run into memory issues by doing this? I am assuming that <code>imgNodes</code> will be garbage collected when the component is unmounted. </p></li>
  </ul>
  
  <p>We are using <code>redux</code> so I could save these images in the store but that seems like I am handling the caching instead of leveraging the browser's natural cache.</p>
  
  <p>How bad of an idea is this?</p>