title: React: fading loaded image in, but not the cached one
body: <p>There are a lot of topics about animating the loaded image, but I haven't seen a great example of this in React yet. I came with this component myself:</p>
  <pre><code>import { useState } from 'react';
  
  export default function FadingImage({ src, ...props }) {
      const [loaded, setLoaded] = useState(false);
  
      return (
          &lt;img
              src={src}
              onLoad={() =&gt; setLoaded(true)}
              className={!loaded ? 'loading' : ''}
              {...props}
          /&gt;
      );
  };
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>img {
      transition: opacity .25s;
  }
  
  .loading {
      opacity: 0;
  }
  </code></pre>
  <p>It works fine in the beginning, but then it's annoying that the same images get faded-in every single time. I'd like the cached images to appear instantly.</p>
  <p>In vanilla JS it just works, because it's all done in the same render cycle. I'm not sure how it can be achieved in React.</p>
  <p>Package suggestions are appreciated, but I'd also like to know how to do it for educational purpose.</p>