A new img component, that will act just like the basic img tag, but in addition will provided an asynchronous image preload

react_cache.jsx

/*  We utilize the createResource provied by React,
    which allows to access the image data asynchronously */
const ImageResource = unstable_createResource(
  source =>
    new Promise(resolve => {
      const img = new Image();
      img.src = source;
      img.onload = resolve;
    })
);

/*  We create a new img component, that will read and display 
    the full resolution picture from the cache, once it gets loaded */
const Img = ({ src, alt, ...props }) => {
  ImageResource.read(src);
  return <img src={src} alt={alt} {...props} />
}