swiftui+combine: why isFavoriteO changed when scroll the LazyVGrid? - swiftui

Question

I have a LazyVGrid, every item with is favorite button. and use combine to debounce user input($isFavoriteI), when isFavoriteO changed, then modify the items.
it works fine, but when i scroll the list, log will print: "X, isFavorite changed as false/true)", what cause isFavoriteO changed and why? because of item reusing in list? how to avoid it?
index 7, isFavorite changed as true
index 7, isFavorite changed as true
index 7, isFavorite changed as true
index 7, isFavorite changed as true
index 7, isFavorite changed as true
index 7, isFavorite changed as true
index 7, isFavorite changed as true
index 7, isFavorite changed as true
import SwiftUI
import Combine
struct Item {
var index: Int
var favorite: Bool
}
var items = [
Item(index: 0, favorite: true),
Item(index: 1, favorite: false),
Item(index: 2, favorite: true),
Item(index: 3, favorite: false),
Item(index: 4, favorite: true),
Item(index: 5, favorite: false),
Item(index: 6, favorite: true),
Item(index: 7, favorite: false),
// Item(index: 8, favorite: true),
// Item(index: 9, favorite: false),
// Item(index: 10, favorite: true),
// Item(index: 11, favorite: false),
// Item(index: 12, favorite: true),
// Item(index: 13, favorite: false),
// Item(index: 14, favorite: true),
// Item(index: 15, favorite: false),
// Item(index: 16, favorite: true),
// Item(index: 17, favorite: false),
// Item(index: 18, favorite: true),
// Item(index: 19, favorite: false),
]
struct ViewModelInListTestView: View {
var body: some View {
ScrollView(showsIndicators: false) {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 200), spacing: 4, alignment: .center)], spacing: 4) {
ForEach(items, id: \.index) { item in
ItemView(item: item)
}
}
}.navigationTitle("ViewModel In List")
}
}
struct ItemView: View {
let item: Item
#ObservedObject var viewModel: ViewModel
init(item: Item) {
print("ItemView.init, \(item.index)")
self.item = item
self.viewModel = ViewModel(item: item)
}
var body: some View {
HStack {
Text("index \(item.index)")
Spacer()
Image(systemName: viewModel.isFavoriteI ? "heart.fill" : "heart")
.foregroundColor(viewModel.isFavoriteI ? .red : .white)
.padding()
.onTapGesture { onFavoriteTapped() }
.onChange(of: viewModel.isFavoriteO) { isFavorite in
setFavorite(isFavorite)
}
}
.frame(width: 200, height: 150)
.background(Color.gray)
}
func onFavoriteTapped() {
viewModel.isFavoriteI.toggle()
}
func setFavorite(_ isFavorite: Bool) {
print("index \(item.index), isFavorite changed as \(isFavorite)")
items[item.index].favorite = isFavorite
}
class ViewModel: ObservableObject {
#Published var isFavoriteI: Bool = false
#Published var isFavoriteO: Bool = false
private var subscriptions: Set<AnyCancellable> = []
init(item: Item) {
print("ViewModel.init, \(item.index)")
let isFavorite = item.favorite
isFavoriteI = isFavorite; isFavoriteO = isFavorite
$isFavoriteI
.print("index \(item.index) isFavoriteI:")
.dropFirst()
.debounce(for: .milliseconds(500), scheduler: DispatchQueue.main)
.removeDuplicates()
.eraseToAnyPublisher()
.print("index \(item.index) isFavoriteO:")
.receive(on: DispatchQueue.main)
.assign(to: \.isFavoriteO, on: self)
.store(in: &subscriptions)
}
}
}
update # 4.15
according to #Cenk Bilgen, i re-write the code, but strange thing happened. print("set favorite as (favorite)") will not present if adding removeDuplicates. why?
import SwiftUI
import Combine
struct Item: Identifiable {
var index: Int
var favorite: Bool
var id: Int { index }
}
class Model: ObservableObject {
#Published var items = [
Item(index: 0, favorite: true),
Item(index: 1, favorite: false),
Item(index: 2, favorite: true),
Item(index: 3, favorite: false),
Item(index: 4, favorite: true),
Item(index: 5, favorite: false),
Item(index: 6, favorite: true),
Item(index: 7, favorite: false),
]
}
struct ViewModelInListTestView: View {
#StateObject var model = Model()
var body: some View {
print("ViewModelInListTestView refreshing"); return
ScrollView(showsIndicators: false) {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 200), spacing: 4, alignment: .center)], spacing: 4) {
ForEach(model.items.indices) { index in
ItemView(item: model.items[index])
.environmentObject(model)
}
}
}.navigationTitle("ViewModel In List")
}
struct ItemView: View {
#EnvironmentObject var model: Model
let item: Item
#State private var updateFavourite = PassthroughSubject<Bool, Never>()
#State private var favorite: Bool = false
init(item: Item) {
self.item = item
self._favorite = State(initialValue: item.favorite)
}
var body: some View {
print("ItemView \(item.index) refreshing"); return
HStack {
Text("index \(item.index)")
Spacer()
Image(systemName: favorite ? "heart.fill" : "heart")
.foregroundColor(favorite ? .red : .white)
.padding()
.onTapGesture {
favorite.toggle()
updateFavourite.send(favorite)
}
.onReceive(
updateFavourite
.debounce(for: .seconds(0.5), scheduler: DispatchQueue.main)
// .removeDuplicates() <------ HERE
// .eraseToAnyPublisher()
) { favorite in
print("set favorite as \(favorite)")
model.items[item.index].favorite = favorite
}
}
.frame(width: 200, height: 150)
.background(Color.gray)
}
}
}

Answer 1

struct Item: Identifiable {
var index: Int
var favorite: Bool
var id: Int { index }
}
class Model: ObservableObject {
#Published var items = [
Item(index: 0, favorite: true),
Item(index: 1, favorite: false),
Item(index: 2, favorite: true),
Item(index: 3, favorite: false),
Item(index: 4, favorite: true),
Item(index: 5, favorite: false),
Item(index: 6, favorite: true),
Item(index: 7, favorite: false),
]
}
struct SimplerView: View {
#StateObject var model = Model()
var body: some View {
ScrollView(showsIndicators: false) {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 200), spacing: 4, alignment: .center)], spacing: 4) {
ForEach(items.indices) { index in
ItemView(item: $model.items[index])
.environmentObject(model)
}
}
}.navigationTitle("ViewModel In List")
}
struct ItemView: View {
#EnvironmentObject var model: Model
#Binding var item: Item
#State private var updateFavourite = PassthroughSubject<Bool, Never>()
var body: some View {
HStack {
Text("index \(item.index)")
Spacer()
Image(systemName: item.favorite ? "heart.fill" : "heart")
.foregroundColor(item.favorite ? .red : .white)
.padding()
.onTapGesture {
updateFavourite.send(item.favorite)
}
.onReceive(updateFavourite
.debounce(for: .seconds(0.5), scheduler: RunLoop.main)) { value in
item.favorite = !value
}
}
.frame(width: 200, height: 150)
.background(Color.gray)
}
}
}

Answer 2

I don't really understand how isFavoriteI and isFavoriteO work, but you
could try this:
in ItemView remove the
.onChange(of: viewModel.isFavoriteO) { isFavorite in
setFavorite(isFavorite)
}
and change:
func onFavoriteTapped() {
viewModel.isFavoriteI.toggle()
print("\(item.index), isFavorite changed as \(viewModel.isFavoriteI)")
items[item.index].favorite = viewModel.isFavoriteI
}

Answer 3

The best of doing this is in this way in down code, SwiftUI would stop unnecessary render, and it will render if it needs!
You had some issue that you should use id for your items, plus combine does not work well in this case, so use better and easier way in down:
import SwiftUI
struct ContentView: View {
#StateObject var itemModel: ItemModel = sharedItemModel
var body: some View {
ScrollView {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 200), spacing: 4, alignment: .center)], spacing: 4) {
ForEach(Array(itemModel.items.enumerated()), id:\.element.id) { (offset, element) in
ItemView(index: offset, favorite: element.favorite)
}
}
}
Button("append new random element") { itemModel.items.append(Item(favorite: Bool.random())) }
.padding()
}
}
struct ItemView: View {
let index: Int
let favorite: Bool
init(index: Int, favorite: Bool) {
self.index = index
self.favorite = favorite
}
var body: some View {
print("rendering item: " + index.description)
return HStack {
Text("index " + index.description)
.bold()
.padding()
Spacer()
Image(systemName: favorite ? "heart.fill" : "heart")
.foregroundColor(Color.red)
.padding()
.onTapGesture { sharedItemModel.items[index].favorite.toggle() }
}
.frame(width: 200, height: 150)
.background(Color.gray)
.cornerRadius(10.0)
}
}
struct Item: Identifiable {
let id: UUID = UUID()
var favorite: Bool
}
class ItemModel: ObservableObject {
#Published var items: [Item] = [Item]()
}
let sharedItemModel: ItemModel = ItemModel()