Make view not redraw after updating ObservableObject - swift

Question

I have a situation where I am using LazyVGrid to display Images from a users Photo library. The grid has sections, and each section contains an array of images which are to be displayed, along with some meta data about the section.
The problem I am having is that each time the user clicks on a tile, which toggles markedForDeletion in the corresponding Image, all of the views in the Grid (which are visible) redraw. This isn't ideal, as in the "real" version of the sample code there is a real penalty to redrawing each Tile, as images must be retrieved and rendered.
I have tried to make Tile conform to Equatable, and then use the .equatable() modifier to notify SwiftUI that the Tile shouldn't be redrawn, but this doesn't work.
Placing another .onAppear outside the Section hints that the entire section is being redrawn each time anything changes, but I'm not sure how to structure my code so that the impact of redrawing expensive Tiles is minimised.
import SwiftUI
struct ContentView: View {
#ObservedObject var viewModel: ViewModel = ViewModel()
let columns = [
GridItem(.flexible(minimum: 40), spacing: 0),
GridItem(.flexible(minimum: 40), spacing: 0),
]
var body: some View {
GeometryReader { gr in
ScrollView {
LazyVGrid(columns: columns) {
ForEach(viewModel.imageSections.indices, id: \.self) { imageSection in
Section(header: Text("Section!")) {
ForEach(viewModel.imageSections[imageSection].images.indices, id: \.self) { imageIndex in
Tile(image: viewModel.imageSections[imageSection].images[imageIndex])
.equatable()
.onTapGesture {
viewModel.imageSections[imageSection].images[imageIndex].markedForDeletion.toggle()
}
.overlay(Color.blue.opacity(viewModel.imageSections[imageSection].images[imageIndex].markedForDeletion ? 0.2 : 0))
.id(UUID())
}
}
}
}
}
}
}
}
struct Image {
var id: String = UUID().uuidString
var someData: String
var markedForDeletion: Bool = false
}
struct ImageSection {
var id: String = UUID().uuidString
var images: [Image]
}
class ViewModel: ObservableObject {
#Published var imageSections: [ImageSection] = generateFakeData(numSections: 10, numImages: 10)
}
func generateFakeData(numSections: Int, numImages: Int) -> [ImageSection] {
var sectionsToReturn: [ImageSection] = []
for _ in 0 ..< numSections {
var imageArray: [Image] = []
for i in 0 ..< numImages {
imageArray.append(Image(someData: "Data \(i)"))
}
sectionsToReturn.append(ImageSection(images: imageArray))
}
return sectionsToReturn
}
struct Tile: View, Equatable {
static func == (lhs: Tile, rhs: Tile) -> Bool {
return lhs.image.id == rhs.image.id
}
var image: Image
var body: some View {
Text(image.someData)
.background(RoundedRectangle(cornerRadius: 20).fill(Color.blue))
.onAppear(perform: {
NSLog("Appeared - \(image.id)")
})
}
}

Answer 1

Main reason of global redraw is .id(UUID()), because on every call it force view recreation. But to remove it and keep ForEach operable we need to make model identifiable explicitly.
Here is fixed parts of code. Tested with Xcode 12.1 / iOS 14.1
main cycle
ForEach(Array(viewModel.imageSections.enumerated()), id: \.1) { i, imageSection in
Section(header: Text("Section!")) {
ForEach(Array(imageSection.images.enumerated()), id: \.1) { j, image in
Tile(image: image)
.onTapGesture {
viewModel.imageSections[i].images[j].markedForDeletion.toggle()
}
.overlay(Color.red.opacity(image.markedForDeletion ? 0.2 : 0))
}
}
}
models (note - your Image conflicts with standards SwiftUI Image - avoid such conflicts otherwise you might get into very unclear errors. For demo I renamed it everywhere needed to ImageM)
struct ImageM: Identifiable, Hashable {
var id: String = UUID().uuidString
var someData: String
var markedForDeletion: Bool = false
}
struct ImageSection: Identifiable, Hashable {
var id: String = UUID().uuidString
var images: [ImageM]
}