@StateObject for observable objects in iOS Swift - Mini App: Build & Ship

Build: Counter Screen

A simple screen that shows a number and a button to increase it. The number is stored in an observable object using @StateObject to keep the state.

Target UI

-------------------
|   Counter: 0    |
|                 |
|  [ Increase ]   |
-------------------

Create an observable class with a published integer property called count.

Use @StateObject in the view to create and observe the observable object.

Display the current count in a Text view.

Add a button labeled 'Increase' that increments the count when tapped.

Starter Code

iOS Swift

import SwiftUI

class CounterModel: ObservableObject {
    // TODO: Add @Published count property
}

struct CounterView: View {
    // TODO: Create @StateObject for CounterModel

    var body: some View {
        VStack(spacing: 20) {
            // TODO: Display count here
            // TODO: Add Increase button here
        }
        .padding()
    }
}

struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        CounterView()
    }
}

Task 1

Task 2

Task 3

Task 4

Solution

iOS Swift

import SwiftUI

class CounterModel: ObservableObject {
    @Published var count = 0
}

struct CounterView: View {
    @StateObject private var counter = CounterModel()

    var body: some View {
        VStack(spacing: 20) {
            Text("Counter: \(counter.count)")
                .font(.largeTitle)
                .accessibilityLabel("Current count")
                .accessibilityValue("\(counter.count)")
            Button("Increase") {
                counter.count += 1
            }
            .buttonStyle(.borderedProminent)
            .accessibilityLabel("Increase count button")
        }
        .padding()
    }
}

struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        CounterView()
    }
}

We created CounterModel as an observable object with a @Published property count. This means SwiftUI will watch for changes to count and update the UI automatically.

In CounterView, we use @StateObject to create and own the CounterModel instance. This ensures the state stays alive as long as the view exists.

The Text shows the current count, and the Button increases the count by 1 when tapped. Accessibility labels help screen readers describe the UI clearly.

Final Result

Completed Screen

-------------------
|   Counter: 0    |
|                 |
|  [ Increase ]   |
-------------------

Tapping the 'Increase' button adds 1 to the count number displayed.

The number updates immediately on screen.

Screen reader announces the updated count after each tap.

Stretch Goal

Add a 'Reset' button that sets the count back to zero.

💡 Hint

Add another Button below 'Increase' that sets counter.count = 0 when tapped.

Practice

1. What is the main purpose of using @StateObject in a SwiftUI view?

easy

A. To create and own an observable object that updates the view when data changes

B. To create a constant value that never changes

C. To pass data between unrelated views without updating

D. To store temporary UI state that does not affect the view

Solution

1. Step 1: Understand the role of @StateObject

   @StateObject is used to create and own an observable object inside a SwiftUI view.

2. Step 2: Recognize its effect on the view

   When the observable object changes, the view automatically updates to reflect the new data.

3. Final Answer:

   To create and own an observable object that updates the view when data changes -> Option A

4. Quick Check:

   @StateObject = Owns observable object and updates view [OK]

Hint: Remember: @StateObject owns and updates view on data change [OK]

Common Mistakes:

• Confusing @StateObject with @State for simple values
• Using @StateObject multiple times for the same object
• Thinking @StateObject is for passing data without updates

2. Which of the following is the correct way to declare an observable object owned by a SwiftUI view using @StateObject?

easy

A. var model = @StateObject MyModel()

B. @State var model = MyModel()

C. @ObservedObject var model = MyModel()

D. @StateObject var model = MyModel()

Solution

1. Step 1: Recall the correct syntax for @StateObject

   The correct syntax is to declare a variable with @StateObject before the variable name and assign the observable object.

2. Step 2: Compare options

   @StateObject var model = MyModel() uses the correct syntax: @StateObject var model = MyModel(). Others either misuse property wrappers or have invalid syntax.

3. Final Answer:

   @StateObject var model = MyModel() -> Option D

4. Quick Check:

   Correct @StateObject syntax = @StateObject var model = MyModel() [OK]

Hint: Use '@StateObject var name = Type()' to declare owned observable [OK]

Common Mistakes:

• Using @State instead of @StateObject for observable objects
• Placing @StateObject after the variable name
• Using @ObservedObject when the view owns the object

3. Given the code below, what will be printed when the button is tapped?

class Counter: ObservableObject {
  @Published var count = 0
}

struct ContentView: View {
  @StateObject var counter = Counter()

  var body: some View {
    VStack {
      Text("Count: \(counter.count)")
      Button("Increment") {
        counter.count += 1
        print(counter.count)
      }
    }
  }
}

medium

A. Count: 0 initially, then prints 0 on button tap

B. Count: 0 initially, then prints 1 on button tap

C. Count: 1 initially, then prints 2 on button tap

D. Compilation error due to missing @ObservedObject

Solution

1. Step 1: Understand initial state and updates

   The counter starts at 0. The Text shows "Count: 0" initially.

2. Step 2: Analyze button action

   When tapped, counter.count increments by 1, so it becomes 1, and prints 1.

3. Final Answer:

   Count: 0 initially, then prints 1 on button tap -> Option B

4. Quick Check:

   Initial 0, increment prints 1 [OK]

Hint: Remember: @StateObject updates view and prints new value [OK]

Common Mistakes:

• Assuming count starts at 1 instead of 0
• Thinking print shows old value before increment
• Confusing @StateObject with @ObservedObject usage

4. Identify the error in the following SwiftUI view code using @StateObject:

struct MyView: View {
  @StateObject var model: MyModel

  var body: some View {
    Text(model.title)
  }
}

medium

A. Missing initialization of @StateObject variable

B. Should use @ObservedObject instead of @StateObject

C. model.title is not accessible in body

D. No error, code is correct

Solution

1. Step 1: Check @StateObject declaration

   @StateObject requires initialization when declared in a struct, but here it is declared without an initial value.

2. Step 2: Understand initialization requirement

   Because @StateObject owns the object, it must be initialized inside the view, e.g., @StateObject var model = MyModel().

3. Final Answer:

   Missing initialization of @StateObject variable -> Option A

4. Quick Check:

   @StateObject must be initialized [OK]

Hint: Always initialize @StateObject when declaring in a view [OK]

Common Mistakes:

• Forgetting to initialize @StateObject variables
• Confusing @StateObject with @ObservedObject initialization rules
• Assuming @StateObject can be nil without initialization

5. You have a parent view that owns a @StateObject called settings. You want to pass this object to a child view so it updates when settings changes. Which is the best way to do this?

hard

A. Use @State in the child view to hold settings

B. Declare @StateObject again in the child view for settings

C. Pass settings as an @ObservedObject parameter to the child view

D. Pass a copy of settings to the child view without property wrappers

Solution

1. Step 1: Understand ownership and passing rules

   The parent view owns the @StateObject. The child view should observe it without owning it.

2. Step 2: Choose correct property wrapper for child

   The child view uses @ObservedObject to observe changes without owning the object.

3. Step 3: Avoid re-declaring @StateObject in child

   Declaring @StateObject again in child creates a new instance, breaking shared state.

4. Final Answer:

   Pass settings as an @ObservedObject parameter to the child view -> Option C

5. Quick Check:

   Parent owns @StateObject, child uses @ObservedObject [OK]

Hint: Parent uses @StateObject; child uses @ObservedObject to share data [OK]

Common Mistakes:

• Re-declaring @StateObject in child view causing duplicate instances
• Passing copies instead of references causing no updates
• Using @State in child for observable objects