Migrating to the Observation framework in SwiftUI

Introduced at WWDC23, Observation is a new Swift framework for tracking changes of properties. It uses the new macro system in Swift to transform Swift types to observable objects.

The Observation framework provides property observation without the need to annotate observable properties. It also reduces unnecessary view updates in SwiftUI which leads to improved performance.

Let's directly dive in and see how to migrate from ObservableObject to the Observation framework.

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free

Observation comes with a @Observable macro which automatically adds observation support to a Swift type. To start using it, the following migration steps are required:

1. Replace ObservableObject with @Observable macro
2. Replace @StateObject with @State
3. Replace @ObservedObject with @Bindable
4. Replace @EnvironmentObject with @Environment

Let's look at these steps in more detail.

1. Replace ObservableObject with @Observable macro

To replace ObservableObject with the @Observable macro, we need to remove conformances to ObservableObject, remove all @Published annotations and apply the Observable macro instead. Here is an example:

/// BEFORE
class UserViewModel: ObservableObject {
    @Published var name: String?
    @Published var email: String?
}

/// AFTER
@Observable class UserViewModel {
    var name: String? = nil
    var email: String? = nil
}

2. Replace @StateObject with @State

Before the Observation framework, we used @State for value types and @StateObject for reference types to let SwiftUI update views whenever changes occured. With Observation, both types are covered by @State:

/// BEFORE
struct UserView: View {
    @StateObject var viewModel = UserViewModel()

    var body: some View {
        ...
    }
}

// AFTER
struct UserView: View {
    @State var viewModel = UserViewModel()

    var body: some View {
        ...
    }
}

3. Replace @ObservedObject with @Bindable

Before the Observation framework, we used @Binding for value types and @ObservedObject for reference types to create two-way bindings. With Observation, we use @Binding for value types and @Bindable for reference types:

// BEFORE
struct UserView: View {
    @ObservedObject var viewModel: UserViewModel

    var body: some View {
        ...
    }
}

// AFTER
struct UserView: View {
    @Bindable var viewModel: UserViewModel

    var body: some View {
        ...
    }
}

If you need to refresh your knowledge on @StateObject and @ObservedObject, check out this article on the difference between @StateObject and @ObservedObject in SwiftUI.

4. Replace EnvironmentObject with @Environment

Instead of the EnvironmentObject property wrapper, the Observation framework uses the Environment property wrapper to pass objects down the view hierarchy:

// BEFORE
struct UserView: View {
    @EnvironmentObject var viewModel: UserViewModel

    var body: some View {
        ...
    }
}

// AFTER
struct UserView: View {
    @Environment(UserViewModel.self) private var viewModel

    var body: some View {
        ...
    }
}

Capture HTTP(s) traffic with Proxyman

Proxyman - Your ultimate man-in-the-middle proxy to effortlessly capture, inspect, and manipulate HTTP(s) traffic on macOS, Windows, iOS, and Android devices.

Get started for free