ObservableObject protocol in iOS Swift - UI Render Trace

Component - ObservableObject protocol

The ObservableObject protocol in SwiftUI lets a class share data that can change over time. When the data changes, the UI updates automatically. It works like a friend who tells you when something important happens, so you can react to it.

Widget Tree

ContentView
└── VStack
    ├── Text
    └── Button

The root is ContentView, which contains a vertical stack (VStack). Inside the VStack, there is a Text widget that shows a number, and a Button below it to change that number.

Render Trace - 4 Steps

Step 1: ContentView

Step 2: VStack

Step 3: Text

Step 4: Button

State Change - Re-render

Trigger:User taps the 'Increment' button

Before

Counter value is 0

→

After

Counter value is 1

Re-renders:ContentView re-renders, updating the Text to show '1'

UI Quiz - 3 Questions

What happens when the counter value changes in the ObservableObject?

A The UI updates automatically to show the new value

B The app crashes

C Nothing changes on the screen

D The button disappears

Key Insight

Using ObservableObject lets your app keep data and UI in sync easily. When data changes, SwiftUI automatically updates only the parts of the screen that depend on that data, making your app efficient and responsive.

Practice

1. What is the main purpose of the ObservableObject protocol in SwiftUI?

easy

A. To handle user input events

B. To create a new view in SwiftUI

C. To allow a class to notify views when its data changes

D. To manage app navigation between screens

Solution

1. Step 1: Understand ObservableObject role

   The ObservableObject protocol is designed to let a class broadcast changes to its data.

2. Step 2: Connect data changes to UI updates

   When data changes, views observing the object update automatically, keeping UI in sync.

3. Final Answer:

   To allow a class to notify views when its data changes -> Option C

4. Quick Check:

   ObservableObject = Notify views on data change [OK]

Hint: ObservableObject = data change notifier for views [OK]

Common Mistakes:

• Confusing ObservableObject with view creation
• Thinking it handles user input directly
• Assuming it manages navigation

2. Which of the following is the correct way to mark a property inside an ObservableObject class so that changes notify the UI?

easy

A. @State var count: Int = 0

B. @Published var count: Int = 0

C. var count: Int = 0

D. @ObservedObject var count: Int = 0

Solution

1. Step 1: Identify property wrapper for change notification

   Inside an ObservableObject, properties that should notify views must use @Published.

2. Step 2: Check other options

   @State is for views, @ObservedObject is for view properties, and plain var does not notify.

3. Final Answer:

   @Published var count: Int = 0 -> Option B

4. Quick Check:

   Use @Published for ObservableObject properties [OK]

Hint: Use @Published to notify UI from ObservableObject [OK]

Common Mistakes:

• Using @State inside ObservableObject class
• Forgetting @Published wrapper
• Confusing @ObservedObject with property wrapper

3. Given this code snippet, what will be printed when the button is tapped once?

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

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

  var body: some View {
    Button("Tap") {
      counter.count += 1
      print(counter.count)
    }
  }
}

medium

A. 1

B. Button tapped

C. 0

D. Compilation error

Solution

1. Step 1: Understand initial value and increment

   The count starts at 0 and increments by 1 when the button is tapped.

2. Step 2: Check print output after increment

   After increment, count is 1, so print outputs 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Increment then print = 1 [OK]

Hint: Increment before print means output is 1 [OK]

Common Mistakes:

• Printing before increment
• Confusing initial value with updated value
• Assuming compilation error due to ObservableObject

4. Identify the error in this ObservableObject class that prevents UI updates:

class TimerData: ObservableObject {
  var seconds = 0

  func tick() {
    seconds += 1
  }
}

medium

A. Missing @Published on seconds property

B. Class must inherit from NSObject

C. tick() must be marked as @Published

D. ObservableObject requires struct, not class

Solution

1. Step 1: Check property change notification

   The seconds property is not marked with @Published, so changes won't notify views.

2. Step 2: Verify other options

   ObservableObject does not require NSObject inheritance, methods can't be @Published, and it must be a class.

3. Final Answer:

   Missing @Published on seconds property -> Option A

4. Quick Check:

   @Published missing = no UI update [OK]

Hint: Properties must be @Published to notify UI [OK]

Common Mistakes:

• Thinking methods can be @Published
• Believing ObservableObject needs NSObject
• Confusing class and struct requirements

5. You want to create a SwiftUI view that updates automatically when a user's name changes. Which combination correctly connects the ObservableObject and the view?

class UserData: ObservableObject {
  @Published var name: String = ""
}

struct UserView: View {
  // What property wrapper and type should be used here?
  var userData: UserData

  var body: some View {
    Text(userData.name)
  }
}

hard

A. @StateObject var userData: UserData

B. @State var userData: UserData

C. @Published var userData: UserData

D. @ObservedObject var userData: UserData

Solution

1. Step 1: Understand property wrappers for ObservableObject in views

   Use @ObservedObject when the view receives an ObservableObject from outside and watches it.

2. Step 2: Differentiate @StateObject and @ObservedObject

   @StateObject is for creating and owning the object inside the view; @ObservedObject is for observing an existing object.

3. Final Answer:

   @ObservedObject var userData: UserData -> Option D

4. Quick Check:

   Observe external ObservableObject with @ObservedObject [OK]

Hint: Use @ObservedObject to watch external ObservableObject [OK]

Common Mistakes:

• Using @State for ObservableObject
• Confusing @StateObject with @ObservedObject
• Trying to use @Published in views