Observation’s withObservationTracking

When first using the @Observable macro and withObservationTracking, you might encounter some questions. Since the new Observation API replaces ObservableObject, one could expect it to function similarly. However, there are significant differences, particularly regarding how change events are handled. Let’s explore a simple example in practice.

struct ContentView: View {
    @State var viewModel = ViewModel()
    var body: some View {
        VStack {
            Button("Increment") {
                viewModel.counter += 1
            }
            Text("\(viewModel.counter)")
        }
    }
}

@Observable
class ViewModel {
    var counter = 0
    init() {
        withObservationTracking {
            _ = counter
        } onChange: {
            print("Counter \(self.counter)")
        }
    }
}

After clicking the Increment button three times, here’s what happens:

1. The UI correctly updates the displayed value to 3.
2. The console output only shows Counter 0. This means the onChange block was triggered only once.

Apple’s documentation and WWDC materials do not provide clear examples of using withObservationTracking. I can suggest a solution.

To enable ongoing tracking, you can add recursion:

@Observable
class ViewModel {
    var counter = 0
    init() {
        observationTracking()
    }
    func observationTracking() {
        withObservationTracking {
            _ = counter
        } onChange: {
            print("Counter \(self.counter)")
            self.observationTracking()
        }
    }
}

Console output:

Counter 0
Counter 1
Counter 2

And get an oldValue:

@Observable
class ViewModel {
    var counter = 0
    init() {
        observationTracking()
    }
    func observationTracking() {
        withObservationTracking {
            _ = counter
        } onChange: {
            Task { @MainActor in
                print("Counter \(self.counter)")
                self.observationTracking()
            }
        }
    }
}

Console output:

Counter 1
Counter 2
Counter 3