title: What is the most effective way to preload images in React? Is it worth the effort?
body: <p>I have a website that moves the user forward fairly linearly. And every time the user is moved forward more images are loaded. There appears to be about a second or two delay to load the images into place.</p>
  
  <p>So I started to consider if I could load the images that will be next loaded before the page is changed.</p>
  
  <p>What is the most efficient way to implement this? Is this a common practice? Something worth working towards?</p>
  
  <p>I tried to pass a preLoadedImages Prop and then run this code snippet:</p>
  
  <pre><code>  componentDidMount() {
      if(this.props.preLoadImages){
        Object.values(this.props.preLoadImages).forEach((image) =&gt; {
          const img = new Image();
          img.src = image.fileName;
        });
      }
    }
  </code></pre>
  
  <p>Currently I do not see images loaded in the network tab until I proceed to the next page still.</p>