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.