Context: I have a React web application which is rendered inside a mobile app. In this app we are capturing images using MediaStream APIs and storing the images(max. 10 in base64 format) in state locally and then creating a pdf out of those selected images.
Question: Depending upon different mobile devices(iOS/Android) and their different camera resolutions what number of maximum data we can store/hold in a React state?
Thanks!
2
Answers
There is no limit to the amount of data that can be stored in a React state. The main issue is the time to render and it is mostly based on the users internet speed.
When dealing with JavaScript and device memory, high-resolution images in base64 format can be a bit tricky. Base64 encoding makes the data about 30% larger, so a 1 MB image turns into roughly 1.3 MB. There’s no hard limit on how much data you can store in React state, but it’s generally a good idea to keep it under 50-100 MB for low-end devices and a few hundred MB for high-end devices. Also, keep in mind that larger images will increase load times and can be affected by internet speed. The best approach is to test on the specific devices you’re targeting to see how they handle it.