AsyncImage inside list is consuming a lot of memory when scrolling and eventually crash in SwiftUI

Question

Here is what I have done: the app crashes when the memory goes over 1 GB or more. I tried commenting asyncImage, and it took only 25–30 MB of memory and didn't crash.

List {
            ForEach(0..<(self.imageURLArray.count), id: \.self) { i in
                AsyncImage(url: URL(string: self.imageURLArray[i])) { image in
                    image.resizable()
                        .aspectRatio(16/9, contentMode: .fit)
                        .cornerRadius(10, antialiased: true)
                        .padding(.horizontal)
                        .padding(.vertical, 5)
                }
                placeholder: {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .foregroundColor(.black.opacity(0.1))
                            .aspectRatio(16/9, contentMode: .fit)
                            .padding(.horizontal)
                            .padding(.vertical, 10)
                        ProgressView()
                            .progressViewStyle(.circular)
                    }
                }
                .onAppear {
                    if self.imageURLArray[i] == self.imageURLArray.last {
                        self.loadMoreItems()
                    }
                }
            }
            .listRowInsets(EdgeInsets())
        }

you can use LazyVStack for memory management and add the list or a scrollView inside the stack and it should not take much memory and the objects that are presented on the screen only that objects use the memory. — Next Day Software Solution Pvt, Jul 26 '23 at 06:49
Great! I just put asyncImage inside a LazyVStack and now it only consumes memory for the images that are visible. Before that, I was replacing the List with LazyVStack, so it didn't solve the issue. — Fahim Rahman, Jul 26 '23 at 06:59
Is this a large list of images because List is preferrable over LazyVStack due to it's reusable identifier. If so you should paginate the list. — devdchaudhary, Jul 26 '23 at 16:45
Yes it's a large list. Currently, I am using LazyVStack inside a List. — Fahim Rahman, Jul 30 '23 at 05:12

score 0 · Answer 1 · answered Jul 26 '23 at 07:00

I just put asyncImage inside a LazyVStack and now it only consumes memory for the images that are visible.

List {
        ForEach(0..<(self.imageURLArray.count), id: \.self) { i in
            LazyVStack {
                AsyncImage(url: URL(string: self.imageURLArray[i])) { image in
                    image.resizable()
                        .aspectRatio(16/9, contentMode: .fit)
                        .cornerRadius(10, antialiased: true)
                        .padding(.horizontal)
                        .padding(.vertical, 5)
                }
                placeholder: {
                    ZStack {
                        RoundedRectangle(cornerRadius: 10)
                            .foregroundColor(.black.opacity(0.1))
                            .aspectRatio(16/9, contentMode: .fit)
                            .padding(.horizontal)
                            .padding(.vertical, 10)
                        ProgressView()
                            .progressViewStyle(.circular)
                    }
                }
                .onAppear {
                    if self.imageURLArray[i] == self.imageURLArray.last {
                        self.loadMoreItems()
                    }
                }
            }
        }
        .listRowInsets(EdgeInsets())
    }

AsyncImage inside list is consuming a lot of memory when scrolling and eventually crash in SwiftUI

1 Answers1