Built-in property wrappers (@State, @Published) in Swift - Step-by-Step Execution

Concept Flow - Built-in property wrappers (@State, @Published)

Declare property with @State/@Published

↓

Property wrapper manages storage

↓

Value changes via UI or code

↓

Wrapper detects change

↓

Triggers UI update or notifies observers

↓

UI refreshes or subscribers react

This flow shows how @State and @Published wrap a property to track changes and update UI or notify observers automatically.

Execution Sample

Swift

import SwiftUI

struct ContentView: View {
  @State private var count = 0

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

A SwiftUI view with a @State property that updates the button label when tapped.

Execution Table

Step	Action	Property Value	Wrapper Detects Change	UI Update Triggered	Output
1	Initialize count with 0	0	No	No	Button shows 'Tap: 0'
2	User taps button	count += 1 → 1	Yes	Yes	Button updates to 'Tap: 1'
3	User taps button again	count += 1 → 2	Yes	Yes	Button updates to 'Tap: 2'
4	No further taps	2	No	No	Button remains 'Tap: 2'

💡 No more user interaction; UI stable with count = 2

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 3 Insights

Why does the UI update automatically when count changes?

Because @State wraps count and detects changes (see execution_table steps 2 and 3), it triggers the UI to refresh automatically.

What happens if we change count without @State?

Without @State, changes to count won't notify SwiftUI to update the UI, so the button label won't change (not shown in table but implied).

How is @Published different from @State?

@Published is used in ObservableObject classes to notify external subscribers, while @State is for local view state; both detect changes and trigger updates.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of count after step 2?

A 1

B 0

C 2

D Undefined

💡 Hint

Check the 'Property Value' column at step 2 in the execution_table.

At which step does the UI update get triggered for the first time?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'UI Update Triggered' column in the execution_table.

If the user never taps the button, what will the final count value be?

A 1

B 0

C 2

D Cannot tell

💡 Hint

Refer to the 'Property Value' at step 1 and the exit_note in the execution_table.

Concept Snapshot

@State and @Published wrap properties to track changes.
@State is for local view state in SwiftUI.
@Published is for ObservableObject classes.
When value changes, UI or subscribers update automatically.
Use them to keep UI in sync with data changes.

Full Transcript

This visual trace shows how Swift's built-in property wrappers @State and @Published work. When you declare a property with @State, it wraps the value and watches for changes. For example, in the sample code, the count starts at 0. When the user taps the button, count increases by 1. The @State wrapper detects this change and triggers the UI to update, so the button label changes to show the new count. This process repeats with each tap. If the property was not wrapped, the UI would not update automatically. @Published works similarly but is used in ObservableObject classes to notify external listeners. This trace helps beginners see how these wrappers manage state and UI updates step-by-step.

Practice

1. What is the main purpose of the @State property wrapper in SwiftUI?

easy

A. To mark properties in a class that notify other objects when changed

B. To create a constant value that never changes

C. To store local, simple data inside a view and update the UI when it changes

D. To handle network requests asynchronously

Solution

1. Step 1: Understand what @State does

   @State is used to keep simple, local data inside a SwiftUI view.

2. Step 2: Recognize its effect on UI

   When the @State data changes, SwiftUI automatically updates the view to reflect the new data.

3. Final Answer:

   To store local, simple data inside a view and update the UI when it changes -> Option C

4. Quick Check:

   @State manages local view data = B [OK]

Hint: Remember: @State is for local view data that changes [OK]

Common Mistakes:

• Confusing @State with @Published
• Thinking @State is for class properties
• Assuming @State handles network or async tasks

2. Which of the following is the correct way to declare a @Published property inside a Swift class?

easy

A. struct MyStruct { @State var count: Int = 0 }

B. struct MyStruct { @Published var count: Int = 0 }

C. class MyClass { @State var count: Int = 0 }

D. class MyClass { @Published var count: Int = 0 }

Solution

1. Step 1: Identify where @Published can be used

   @Published is used inside classes that conform to ObservableObject, not structs.

2. Step 2: Check syntax correctness

   class MyClass { @Published var count: Int = 0 } correctly declares a class with a @Published property and initializes it.

3. Final Answer:

   class MyClass { @Published var count: Int = 0 } -> Option D

4. Quick Check:

   @Published used in classes = A [OK]

Hint: Use @Published only inside classes, not structs [OK]

Common Mistakes:

• Using @Published in structs
• Confusing @State with @Published
• Missing var keyword or initialization

3. Consider the following SwiftUI code snippet:

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

struct ContentView: View {
    @StateObject var counter = Counter()
    var body: some View {
        VStack {
            Text("Count: \(counter.value)")
            Button("Increment") {
                counter.value += 1
            }
        }
    }
}

What will be displayed after tapping the "Increment" button twice?

medium

A. Count: 0

B. Count: 2

C. Count: 1

D. Count: 3

Solution

1. Step 1: Understand the initial state

   The Counter class starts with value = 0. The view shows "Count: 0" initially.

2. Step 2: Analyze button action and updates

   Each tap on "Increment" increases counter.value by 1. After two taps, value becomes 2, and the UI updates automatically.

3. Final Answer:

   Count: 2 -> Option B

4. Quick Check:

   2 increments update value to 2 [OK]

Hint: Each button tap adds 1; count updates automatically [OK]

Common Mistakes:

• Forgetting @Published triggers UI update
• Assuming @StateObject resets value
• Counting taps incorrectly

4. Identify the error in this SwiftUI code snippet:

class Model: ObservableObject {
    @Published var text: String
    init() {}
}

struct ViewContent: View {
    @StateObject var model = Model()
    var body: some View {
        Text(model.text)
    }
}

medium

A. Missing initial value for @Published property 'text' in Model

B. Cannot use @StateObject with ObservableObject classes

C. Text view cannot display a String property

D. Model class should be a struct

Solution

1. Step 1: Check property initialization

   The @Published property text is declared but not initialized, and the init() is empty.

2. Step 2: Understand Swift requirement for properties

   All non-optional properties must have an initial value or be initialized in the constructor. Here, text lacks both.

3. Final Answer:

   Missing initial value for @Published property 'text' in Model -> Option A

4. Quick Check:

   Uninitialized property causes error = A [OK]

Hint: Always initialize @Published properties or provide init values [OK]

Common Mistakes:

• Assuming @StateObject can't be used with ObservableObject
• Thinking Text can't display String
• Believing Model must be a struct

5. You want to create a SwiftUI app where a view shows a user's name that can be edited in a separate view. Which combination of property wrappers should you use to ensure the UI updates correctly when the name changes?

hard

A. Use @State in the main view and @Published in a shared ObservableObject class

B. Use @Published in both views

C. Use @State in both views

D. Use @StateObject in the editing view only

Solution

1. Step 1: Understand data sharing between views

   When multiple views need to share and update data, use an ObservableObject class with @Published properties.

2. Step 2: Use @State for local view data and @Published for shared data

   The main view can use @State for local state, but the shared user name should be in a class marked with @Published to notify changes.

3. Final Answer:

   Use @State in the main view and @Published in a shared ObservableObject class -> Option A

4. Quick Check:

   Shared data uses @Published; local uses @State [OK]

Hint: Shared data needs @Published; local view data uses @State [OK]

Common Mistakes:

• Using @State only for shared data
• Using @Published in structs or views directly
• Not using ObservableObject for shared data