SwiftUI: #ObservedObject vs #StateObject child view performance? - swiftui

Question

I have the following view:
struct Menu: View {
let sctions:[TestSection] = [
TestSection(id: 0, name: "One", items: [
ListItem(id: 0, name: "1"),
ListItem(id: 1, name: "2"),
ListItem(id: 2, name: "3"),
ListItem(id: 3, name: "4")
]),
TestSection(id: 1, name: "Two", items: [
ListItem(id: 4, name: "4"),
ListItem(id: 5, name: "5"),
ListItem(id: 6, name: "6"),
ListItem(id: 7, name: "7")
]),
TestSection(id: 2, name: "Three", items: [
ListItem(id: 8, name: "8"),
ListItem(id: 9, name: "9"),
])
]
var body: some View {
NavigationView {
List {
ForEach(sctions) { section in
Section(header: Text(section.name)) {
ForEach(section.items) { item in
TestCell(item: item)
}
}
}
}
.listStyle(.plain)
.navigationBarTitle("Title")
}
}
}
struct TestCell: View {
#ObservedObject private var model:ItemModel
let item:ListItem
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id)
}
var body: some View {
Text("item: \(item.name)")
}
}
class ItemModel:ObservableObject {
#Published var someProperty:Int
let itemId:Int
init(itemId:Int) {
self.itemId = itemId
self.someProperty = 0
}
}
I am trying to decide how to handle child views in SwiftUI from a model layer point of view.
One option is #ObservedObject in the child view. The parent created the model and sets it on the child or the parent passes in a property on the child that then allows the child to init the model in its initializer:
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id). // <<---- HERE
}
Then looking at this, I wonder if this is less performant than using a #StateObject in the child view that would manage its model's lifecycle.
So then I tried this:
struct TestCell: View {
#StateObject var model = ItemModel() // <<-- error "Missing argument for parameter 'itemId' in call"
let item:ListItem
var body: some View {
Text("item: \(item.name)")
}
}
Which, obviously shows the error:
I am not sure how to initialize ItemModel in TestCell when using the #StateObject approach.
The question I have is:
in this type of scenario, where I want each cell to have its own model (to handle model related logic like making network calls, updating model layer etc...) should I be creating the model as I instantiate the cell within the parent during cell creation, and setting it on the cell (#ObservedObject)?
Or should a cell use #StateObject for its model, and if so, how would I have the model initialize itself properly when it needs parameters, like let itemId:Int for example?

Answer 1

Your first option is not recommended because
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id). // <<---- HERE
}
it’s unsafe to create an observed object inside a view
https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
You will find many questions in SO that talk about Views being unreliable. You'll also find the ones that tell people to do it this way but you will see issues with it.
If you use #StateObject var model: ItemModel = ItemModel() which is the only exception according to Apple for creating an ObservableObject In a View
And switch
let itemId:Int
in your ItemModel to
var itemId:Int = 0
Then in TestCell add to the outermost View
.onAppear(){
model.itemId = item.id
}
Or depending on your ParentView and its ViewModel you can create the ObservableObjects in the class ViewModel and pass it as a parameter for
#ObservedObject private var model:ItemModel
The important thing is that the workaround takes into consideration that an ObservableObject should not be created in a View with the exception of #StateObject. SwiftUI reserves the right to re-create any View whenever it decides that it is necessary.