SwiftUI View re-renders before model updates - ios

Question

Why is my view rendering the model update, before the update has completed? Or at least it seems that way. It seems like, it re-draws based on the previous value of my model.
What I'm doing: When you tap a person cell, it marks that person as "selected" and then changes the foreground color to green. If they are not selected, the foreground color is white.
What is happening: It is important to note that this doesn't ALWAYS happen. It seems random. But occasionally, when I tap on a person cell, the color does not change. And I've dug deeper, and that is because it (looks like) it redraws the view before the value has changed inside my PeopleStore model object.
Here is the code:
struct PersonCell: View {
#EnvironmentObject var peopleStore: PeopleStore
var personId: UUID
var person: Person {
return peopleStore.people.filter({ $0.id == personId }).first!
}
var body: some View {
Button(action: {
print("Tapped Cell: " + peopleStore.personName(id: personId))
peopleStore.toggleSelectionOfPerson(with: personId)
}) {
GeometryReader { geo in
ZStack {
Rectangle().foregroundColor(peopleStore.personIsSelected(id: personId) ? .tGreen : .white).cornerRadius(geo.size.width / 2).frame(height: 70)
Here is what happens when I tap a cell:
class PeopleStore: ObservableObject {
#Published var people : [Person]
init(people: [Person]){
self.people = people
}
func personIsSelected(id: UUID) -> Bool {
let index = people.firstIndex(where: { $0.id == id })!
print("ZSTACK: \(people[index].name) is selected: \(people[index].isSelected.description)")
return people[index].isSelected
}
func toggleSelectionOfPerson(with id: UUID) {
let index = people.firstIndex(where: { $0.id == id })!
print("BEFORE \(people[index].name) is selected: \(people[index].isSelected.description)")
people[index].isSelected = !people[index].isSelected
print("AFTER \(people[index].name) is selected: \(people[index].isSelected.description)")
}
And when I look at my console, you can see that after I select a person, the view redraws, but it has the previous value (In this case, I tapped the Alexandra cell):
Tapped Cell: Alexandra R.
BEFORE Alexandra R. is selected: false
ZSTACK: Jose G. is selected: false
ZSTACK: Jimmy T. is selected: false
ZSTACK: Alexandra R. is selected: false
ZSTACK: Dominic R. is selected: false
AFTER Alexandra R. is selected: true
ZSTACK: Franny E. is selected: false
ZSTACK: Jon B. is selected: true
ZStack: is printed whenever the cell is re-drawn. As you can see, Alexandra is selected: false shows up, when I would expect it to be true.
The timing of the re-draw seems to be just a bit off, and it seems random. What am I missing?
EDIT: Person struct
struct Person: Identifiable {
let id = UUID()
var name: String
var photo: Image
var isFavorite: Bool
var dateFavorited = Date()
var isSelected: Bool = false
}
Edit 2: If it helps, the PersonCell is a subview of something called a PersonList that uses ForEach to generate PersonCells.
struct PeopleList: View {
#EnvironmentObject var peopleStore: PeopleStore
var title: String {
return isFavorites ? "Favorites" : "All Employees"
}
var isFavorites: Bool
var body: some View {
LazyVStack(alignment: .leading, spacing: 15) {
Text(title).padding(.top, 18).padding(.horizontal, 5).font(.regular())
if isFavorites {
ForEach(peopleStore.people.sorted(by: { $0.dateFavorited < $1.dateFavorited }).filter({ $0.isFavorite })) { person in
PersonCell(personId: person.id).frame(height: 70.0)
}

Answer 1

I am not sure what exactly is going wrong at your end, i have tested your code at my end and it’s working perfectly fine. The only change I have done is set var isFavorites: Bool = true in PeopleList because i don’t know how you are toggling that property in your code.So, I have provided it a constant value.
Below is the code -:
struct Person: Identifiable {
let id = UUID()
var name: String
var photo: Image
var isFavorite: Bool
var dateFavorited = Date()
var isSelected: Bool = false
}
class PeopleStore: ObservableObject {
#Published var people : [Person]
init(people: [Person]){
self.people = people
}
func personIsSelected(id: UUID) -> Bool {
let index = people.firstIndex(where: { $0.id == id })!
print("ZSTACK: \(people[index].name) is selected: \(people[index].isSelected.description)")
return people[index].isSelected
}
func personName(id: UUID) -> String {
let index = people.firstIndex(where: { $0.id == id })!
return people[index].name
}
func toggleSelectionOfPerson(with id: UUID) {
let index = people.firstIndex(where: { $0.id == id })!
print("BEFORE \(people[index].name) is selected: \(people[index].isSelected.description)")
people[index].isSelected = !people[index].isSelected
print("AFTER \(people[index].name) is selected: \(people[index].isSelected.description)")
}
}
struct PeopleList: View {
#EnvironmentObject var peopleStore:PeopleStore
var title: String {
return isFavorites ? "Favorites" : "All Employees"
}
var isFavorites: Bool = true
var filteredPersons:[Person]{
peopleStore.people.sorted(by: { $0.dateFavorited < $1.dateFavorited }).filter({ $0.isFavorite })
}
var body: some View {
LazyVStack(alignment: .leading, spacing: 15) {
Text(title).padding(.top, 18)
if isFavorites {
ForEach(filteredPersons) { person in
PersonCell(personId: person.id).frame(height: 70.0)
}
}
}
}
}
struct PersonCell: View {
#EnvironmentObject var peopleStore:PeopleStore
var personId: UUID
var body: some View {
Button(action: {
print("Tapped Cell: " + peopleStore.personName(id: personId))
peopleStore.toggleSelectionOfPerson(with: personId)
}) {
GeometryReader { geo in
ZStack {
Rectangle().foregroundColor(peopleStore.personIsSelected(id: personId) ? .green : .gray).cornerRadius(geo.size.width / 2).frame(height: 70)
}
}
}
}
}
Main View-:
import SwiftUI
#main
struct Test: App {
#StateObject var store:PeopleStore
init() {
let person = Person(name: "foo", photo: Image(""), isFavorite: true)
let person1 = Person(name: "foo1", photo: Image(""), isFavorite: true)
let person2 = Person(name: "foo2", photo: Image(""), isFavorite: true)
let obj = PeopleStore(people: [person,person1,person2])
_store = StateObject(wrappedValue: obj)
}
var body: some Scene {
WindowGroup {
PeopleList().environmentObject(store)
}
}
}
Output-:
Tapped Cell: foo
BEFORE foo is selected: false
AFTER foo is selected: true
ZSTACK: foo2 is selected: false
ZSTACK: foo is selected: true
ZSTACK: foo1 is selected: false
Note-: I have tested multiple times, and didn’t found any issue where selected cell isn’t changing color.