0

I'm saving a image for each of my users in my backend. I have a data fetcher component in my frontend react app that fetches data every 5 seconds from my backend and uses redux to share that data across my components. When it fetches the users it also fetches the images and sets it as a field of those users. Additionally I'm using redux-persist so that my data survives refreshes etc.

Now I have the issue that each of those user objects in the state has the base64 encoded image which especially overflows the localstorage which is used by redux-persist.

What's the best practice to fetch and cache images in react? Should every component fetch it itself instead of using redux for this?

phoebus
  • 1,280
  • 1
  • 16
  • 36
  • Why don't you store the image file to another place and put the link of image to redux instead? – Hay Trần Nov 27 '19 at 05:43
  • @HayTrần I wanted to use user-specific authentication to access certain files, that's why I wanted to route it through my API instead of just accessing s3 buckets or likewise directly – phoebus Nov 27 '19 at 05:49
  • 1
    The best practice is to serve the images as images (not base64 encoded in json) and let the browser do the caching. If you don't want to show all those images on the page, check out https://stackoverflow.com/questions/19396390/load-image-from-javascript You can load them programmatically and the browser's built-in caching will persist them for you. – timotgl Nov 27 '19 at 07:52

0 Answers0