I would like to cache images in react, what should I use for storage

Question

I would like to cache image in react.

<img src='www.myimage/dog.png' />

Every time I load page, dog.png is downloaded from page. I would like to store it in browser with some ttl.

Should I use localStorage, sessionStorage, indexedDb or what is the best place to store and why?

Thank you!

Answer 1

There's no need to cache your images yourself. Unless you're doing some specialised lazy-loading, the browser will automatically cache it for you.

They will still "load", but from cache. And they may be at the browser's discretion.

To confirm, open dev tools > network > Img and see how the images are loaded from cache, instead of an endpoint.