React How to stop an image from being re-fetched whenever the image tag is re rendered-CodePudding

I am creating a react application and it displays several images that need to be reorganized whenever the user flips there screen or changes screen size, this works the only problem is that whenever the user causes the react component to re render the image tags then fetch the image again even though they have already been fetched I know that cache would solve this issue but if someone had disabled cache they wouldn't understand what is happening. So then how can I save the images fetched to avoid the img tag re fetching the image.

I have tried

const Image = React.memo(function Image({ src }: { src: string }) {
        return <img src={src}
            style={{ display: 'none' }} />;
    });

and then calling this but the images are still being refetched.

function loadImages() {
        const imgTags = []
        for (let i = 0; i < imgCount; i  ) {
            imgTags.push(
                <Image src={`${process.env.PUBLIC_URL}/images/img${i}.avif`} />
            )
        }
        return imgTags
    }

    const [imgTags, setImgTags] = useState(loadImages())

imgTags is then passed directly to the component that uses the images.

CodePudding user response：

You are using the useMemo in the wrong area what you want to do is to memo the whole load images function

useMemo will only recompute the memoized value when one of the dependencies has changed.

but what you are doing is that you are re-mounting the images each time you are setting the state.

what you should do is the following

const loadImages = React.useMemo(() => {
  const memoedImages = [];
  for(let i = 0 ; i < imgCount; i  ){
    memoedImages.push(
        <Image src={`${process.env.PUBLIC_URL}/images/img${i}.avif`} />
       )
  }
  return memoedImages;
}, [dep1, dep2, ....]) // will re-compute only if those change 
// I imagine you dependency will be the number of the images or the URL it self

and you don't need to set the sate with the images just use them directly

like this

function App() {
  const [imageCount, setImageCount] = React.setState(3);

  const loadImages = React.useMemo(() => {
    const memoedImages = [];
    for(let i = 0 ; i < imgCount; i  ){
      memoedImages.push(
          <Image src={`${process.env.PUBLIC_URL}/images/img${i}.avif`} />
         )
    }
    return memoedImages;
  }, [imageCount])

  const Images = loadImages();
 
  return (
    <div>
        {Images}
    </div>
  );
}