title: How to reduce the memory footprint of a large list of images in SwiftUI
body: <p>I'm playing with SwiftUI and I'm currently struggling with images. Basically, I want to display an list of images with an infinite scroll but I want to keep the memory usage reasonable.</p>
  <p>I have the following (truncated) code:</p>
  <pre><code>struct HomeView: View {
      @State private var wallpapers: Loadable&lt;[Wallpaper]&gt; = .notRequested
      @State private var currentPage = 1
  
      @Environment(\.container) private var container
  
      var body: some View {
          content
              .onAppear { loadWallpapers() }
      }
  
      private var content: some View {
          VStack {
              wallpapersList(data: wallpapers.value ?? [])
  
              // ...
          }
      }
  
      private func wallpapersList(data: [Wallpaper]) -&gt; some View {
          ScrollView {
              LazyVStack(spacing: 5) {
                  ForEach(data) { w in
                      networkImage(url: w.thumbs.original)
                          .onAppear { loadNextPage(current: w.id) }
                  }
              }
          }
      }
  
      private func networkImage(url: String) -&gt; some View {
          // I use https://github.com/onevcat/Kingfisher to handle image loading
          KFImage(URL(string: url))
              // ...
      }
  
      private func loadWallpapers() {
          container.interactors.wallpapers.load(data: $wallpapers, page: currentPage)
      }
  
      private func loadNextPage(current: String) {
          // ...
      }
  }
  </code></pre>
  <pre><code>struct WallpapersInteractor: PWallpapersInteractor {
      let state: Store&lt;AppState&gt;
      let agent: PWallpapersAgent
  
      func load(data: LoadableSubject&lt;[Wallpaper]&gt;, page: Int) {
          let store = CancelBag()
          data.wrappedValue.setLoading(store: store)
  
          Just.withErrorType((), Error.self)
              .flatMap { _ in
                  agent.loadWallpapers(page: page) // network call here
              }
              .map { response in
                  response.data
              }
              .sink { subCompletion in
                  if case let .failure(error) = subCompletion {
                      data.wrappedValue.setFailed(error: error)
                  }
              } receiveValue: {
                  if var currentWallpapers = data.wrappedValue.value {
                      currentWallpapers.append(contentsOf: $0) // /!\
                      data.wrappedValue.setLoaded(value: currentWallpapers)
                  } else {
                      data.wrappedValue.setLoaded(value: $0)
                  }
              }
              .store(in: store)
      }
  }
  </code></pre>
  <p>Because I append the new data to my <code>Binding</code> every time I request a new batch of images, the memory consumption quickly becomes stupidly high.</p>
  <p>I tried to remove data from the array using <code>.removeFirst(pageSize)</code> once I get to the third page so that my array contains at most <code>2 * pageSize</code> elements (<code>pageSize</code> being 64 in this case). But doing so makes my list all jumpy because the content goes up, which creates more problems than it solves.</p>
  <p>I tried searching for a solution but I surprisingly didn't find anything on this particular topic, am I missing something obvious ?</p>