candlefinance
Memory spike with 100+ huge images.
I made a reproducer here, just by increasing the image sizes. https://github.com/bglgwyng/faster-image/tree/reproduce-memory-spike
I considered this library an alternative expo-image as it also has the memory spike problem. See https://github.com/expo/expo/issues/26781.
I tried both expo-image and faster-image in a gallery view that renders 100+ images with a size of 1920x1080, 1MB each. I don't consider it a too pathological case as many gallery-like views would do the same, but both libraries crashed the app with a memory spike.
I wonder why the memory spike is so high. It reaches 2GB for 100 images, which is 20MB per image.
I understand the image is decompressed and stored in memory, but 20MB for a 1MB image seems too much.
Image in react-native loads images slower, but it uses much less memory and works fine with 100+ images. How is it possible? Which difference in the implementation causes this?
Also, I have a question if just throttling the image loading helps in this case. Throttling the image loading seems trivial, so I suspect that it can affect the user experience as it slows down the image loading, and that's the reason why expo-image and faster-image don't do it.
In my case which renders 100+ images but in a smaller size as thumbnails, so caching the resized images would be helpful. It doesn't seem that expo-image and faster-image do so.
Interesting... thanks for the reproducible project. Will take a look today / tomorrow!
@bglgwyng having trouble reproducing this, seems to be working fine for me.
@gtokman Could you set grayscale: 1? I found that the memory spike is not observed when grayscale option is not set.
But one thing weird is that I don't use grayscale option in my production app but the memory spike occurs.
@bglgwyng I haven't tried it with the grayscale, can check this tomorrow. Out of curiosity if you load 100+ images of that size into a local xcasset directory and show them in a SwiftUI list, do you see the same memory spike? Or they have an AsyncImage component to test the remote case.
Any progress? (btw, thanks for making this library :)) I also use a lot of images in my App. When I use react-native-fast-image, memory usage is under 1GB, but using this library, memory usage is growing up more and more. Now I'm seeing over 9GB on XCode Debugger...
react-native-fast-image is too slow on android, so I really want to use this. I hope there's any solution for this..
@koenzi132 would love to see a small example or branch if you modify the ./example proj with a public image API.
Can confirm that there is a memory spike. We use this library currently and experience spikes reaching ~2GB in Android. Even though dev consumed more RAM than release build this issue is occurring even in the release build currently live. I have asked on Stack Overflow here: https://stackoverflow.com/questions/78946191/massive-memory-spikes-in-react-native-when-images-are-rendered-in-a-list
