@StateObject for observable objects in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare an observable object using @StateObject in a SwiftUI view.

iOS Swift

struct ContentView: View {
  @StateObject var viewModel = [1]()

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

Drag options to blanks, or click blank then click option'

AObservableObject

BMyViewModel

CStateObject

DViewModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using @StateObject with a protocol name instead of a class.

Forgetting to create an instance by calling () after the class name.

You use your custom class name that conforms to ObservableObject with @StateObject to create and own it in the view.

2fill in blank

medium

Complete the code to update the view when the observable object changes.

iOS Swift

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

struct ContentView: View {
  @StateObject var viewModel = MyViewModel()

  var body: some View {
    Button(action: {
      viewModel.[1] += 1
    }) {
      Text("Count: \(viewModel.count)")
    }
  }
}

Drag options to blanks, or click blank then click option'

Acount

BobjectWillChange

Cupdate

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to update objectWillChange directly.

Using a property that does not exist in the view model.

The @Published property 'count' is updated to trigger the view refresh.

3fill in blank

hard

Fix the error in the code by completing the declaration of the observable object in the view.

iOS Swift

struct ContentView: View {
  [1] var viewModel = MyViewModel()

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

Drag options to blanks, or click blank then click option'

A@StateObject

B@EnvironmentObject

C@ObservedObject

D@Published

Attempts:

3 left

💡 Hint

Common Mistakes

Using @ObservedObject which does not own the object and can cause multiple instances.

Using @Published which is only for properties inside observable objects.

@StateObject is used to create and own the observable object in the view lifecycle.

4fill in blank

hard

Fill both blanks to declare an observable object class and use it with @StateObject in a SwiftUI view.

iOS Swift

class [1]: ObservableObject {
  @Published var message = "Hello"
}

struct ContentView: View {
  @StateObject var viewModel = [2]()

  var body: some View {
    Text(viewModel.message)
  }
}

Drag options to blanks, or click blank then click option'

AGreetingViewModel

BMessageViewModel

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for the class and the instance.

Forgetting to add () when creating the instance.

The class name and the instance type must match exactly for the code to compile and work.

5fill in blank

hard

Fill all three blanks to create an observable object with a published property and use it in a SwiftUI view with @StateObject.

iOS Swift

class [1]: ObservableObject {
  @Published var [2] = 0
}

struct ContentView: View {
  @StateObject var viewModel = [3]()

  var body: some View {
    Text("Value: \(viewModel.value)")
  }
}

Drag options to blanks, or click blank then click option'

ACounterModel

Bvalue

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using a property name different from the one displayed in the Text view.

Mismatching class name and instance name.

The class name and instance must match, and the published property name must be consistent with the usage in the view.

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