Changes in nested ObservedObject do not updated the UI

Question

When I have a nested ObservedObject, changes in a published property of a nested object do not updated the UI until something happens to the parent object. Is this a feature, a bug (in SwiftUI) or a bug in my code?

Here is a simplified example. Clicking the On/Off button for the parent immediately updates the UI, but clicking the On/Off button for the child does not update until the parent is updated.

I am running Xcode 12.5.1.

import SwiftUI

class NestedObject: NSObject, ObservableObject {
    @Published var flag = false
}
class StateObject: NSObject, ObservableObject {
    @Published var flag = false
    @Published var nestedState = NestedObject()
}

struct ContentView: View {
    @ObservedObject var state = StateObject()
    var body: some View {
        VStack {
            HStack {
                Text("Parent:")
                Button(action: {
                    state.flag.toggle()
                }, label: {
                    Text(state.flag ? "On" : "Off")
                })
            }
            HStack {
                Text("Child:")
                Button(action: {
                    state.nestedState.flag.toggle()
                }, label: {
                    Text(state.nestedState.flag ? "On" : "Off")
                })
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

@ObservedObject or @StateObject updates the view when the ObservableObject updates. This happens when a @Published property is changed or when you directly call objectWillChange.send().

So, the "normal" (and the simplest) approach is to use a value type, e.g. a struct, for a @Published property.

struct NestedObject {
   var flag = false
}

The reason this works, is that the entire NestedObject changes when its properties are modified, because struct is a value-type. In contrast, a reference-type class doesn't change (i.e. reference remains the same) when its property is modified.

---

But, sometimes you might need it to be a reference-type object, because it might have its own life cycle, etc...

In that case, you could definitely just call state.objectWillChange.send(), but that would only work if the view initiates the change, not when the nested object initiates the change. The best general approach here, in my opinion, is to use a nested inner view that has its own @ObservedObject to observe changes of the inner object:

struct ContentView: View {

    private struct InnerView: View {
        @ObservedObject var model: NestedObject
        var body: some View {
            Text("Child:")
            Button(action: {
                model.flag.toggle()
            }, label: {
                Text(model.flag ? "On" : "Off")
            })
        }
    }

    @StateObject var state = OuterObject() // see comments 1, 2 below

    var body: some View {
        VStack {
            HStack {
                Text("Parent:")
                Button(action: {
                    state.flag.toggle()
                }, label: {
                    Text(state.flag ? "On" : "Off")
                })
            }
            HStack {
                InnerView(model: state.nestedObject)
            }
        }
    }
}

---

_{1. You shouldn't call your class StateObject, since it clashes with the StateObject property wrapper of SwiftUI. I renamed it to OuterObject.}

_{2. Also, you should use @StateObject instead of @ObservedObject if you instantiate the object inside the view.}