Understanding ObservedObject vs. StateObject: A Simple Guide

If you're working with SwiftUI, you’ve likely encountered ObservedObject and StateObject. Both are property wrappers, and while they might seem similar at first glance, they serve distinct purposes when managing the data and lifecycle of your views.

In this blog, we’ll explore the differences between these two property wrappers, their roles in SwiftUI View architecture, and how to ensure consistent results when using them.

By the end, you'll have a clear understanding of when to use each and how to avoid common pitfalls when dealing with ObservedObject and StateObject in your apps.

The Role of Property Wrappers in SwiftUI

Before diving into ObservedObject vs StateObject, let’s briefly discuss property wrappers. Property wrappers are a Swift feature that simplifies managing properties. They encapsulate behaviors like state persistence, view updates, and data synchronization, making them critical for building apps with SwiftUI.

Common property wrappers in SwiftUI include @State, @Binding, @ObservedObject, and @StateObject. Among these, @ObservedObject and @StateObject specifically help manage observable objects like your view model.

What is an ObservedObject?

@ObservedObject is a property wrapper designed for sharing data across multiple views. When you mark a view model or observable object with @ObservedObject, SwiftUI observes changes to the data and triggers view updates when the data changes.

However, it’s important to note that @ObservedObject doesn’t own the object. Instead, it depends on the object’s lifecycle being managed externally.

Example: ObservedObject in Action

Here’s how you might use @ObservedObject in a SwiftUI View:

Copy
import SwiftUI

class CounterViewModel: ObservableObject {
    @Published var count = 0

    func incrementCounter() {
        count += 1
    }
}

struct CounterView: View {
    @ObservedObject var viewModel: CounterViewModel

    var body: some View {
        VStack {
            Text("Count: \(viewModel.count)")
            Button("Increment Counter") {
                viewModel.incrementCounter()
            }
        }
    }
}

In this example, @ObservedObject observes the CounterViewModel instance. Changes to count automatically trigger a view redraw.

What is a StateObject?

@StateObject is another property wrapper, introduced in iOS 14, designed to manage the lifecycle of an observable object. Unlike @ObservedObject, the stateobject property wrapper ensures the object is only created once during the view's lifecycle. This prevents it from being re-instantiated when the current view is refreshed or recreated.

This ownership makes @StateObject the go-to choice for initializing view models or other observable objects directly within a view.

Example: StateObject in Action

Here’s how @StateObject works:

Copy
import SwiftUI

class CounterViewModel: ObservableObject {
    @Published var count = 0

    func incrementCounter() {
        count += 1
    }
}

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack {
            Text("Count: \(viewModel.count)")
            Button("Increment Counter") {
                viewModel.incrementCounter()
            }
        }
    }
}

In this example, the CounterViewModel instance is created and managed by the @StateObject. Even if the view is re instantiated, the CounterViewModel instance remains consistent.

Key Differences Between ObservedObject and StateObject

Let’s summarize the differences between @ObservedObject and @StateObject:

1. Ownership:

   • @StateObject is responsible for the creation and management of the observable object.

   • @ObservedObject assumes the observable object is managed elsewhere.

2. Lifecycle:

   • @StateObject ensures the object persists for the current view lifecycle, even if the view is refreshed.

   • @ObservedObject doesn’t persist the object if the view is re instantiated.

3. Use Cases:

   • Use @StateObject for initializing view models in a SwiftUI View.

   • Use @ObservedObject for passing data to multiple views or child views.

Practical Scenarios and Examples

Counter Resets Problem

A common mistake when using @ObservedObject is accidentally causing a counter reset when the current view creates a new object instance due to view redraws. This happens because @ObservedObject doesn’t own the object.

Here, the RandomNumberViewModel instance is re-created on every view update, leading to a new random number every time. To fix this, use @StateObject instead.

Ensuring Consistent Results with StateObject

By using @StateObject, you can ensure consistent results in scenarios like a counter view:

This approach ensures the counter doesn’t reset unexpectedly.

When to Use Two Property Wrappers Together

In some cases, you might need both @StateObject and @ObservedObject. For example, a parent view initializes a view model with @StateObject, while child views observe it using @ObservedObject.

Final Thoughts!

Understanding the differences between ObservedObject vs StateObject is essential for managing data effectively in SwiftUI. While @StateObject ensures a stable lifecycle for your observable objects, @ObservedObject enables data sharing across multiple views.

By choosing the right property wrapper, you can create SwiftUI Views that behave predictably, avoiding issues like unexpected counter resets or redundant object instances.

struct RandomNumberView: View {
    @ObservedObject var viewModel = RandomNumberViewModel()

    var body: some View {
        Text("Random Number: \(viewModel.randomNumber)")
    }
}

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack {
            Text("Count: \(viewModel.count)")
            Button("Increment Counter") {
                viewModel.incrementCounter()
            }
        }
    }
}

struct ParentView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        ChildView(viewModel: viewModel)
    }
}

struct ChildView: View {
    @ObservedObject var viewModel: CounterViewModel

    var body: some View {
        Text("Count: \(viewModel.count)")
    }
}