@Published properties in iOS Swift - UI Render Trace

Component - @Published properties

This UI component shows how a SwiftUI view updates automatically when a @Published property changes in an observable object. It demonstrates reactive UI updates without manual refresh calls.

Widget Tree

ObservableObject (CounterModel)
└── SwiftUI View (CounterView)
    ├── Text (shows count)
    └── Button (increments count)

The root is an observable object called CounterModel that holds a count value marked with @Published. The SwiftUI view CounterView observes this model. Inside the view, a Text widget displays the current count, and a Button lets the user increase the count. When the count changes, the Text updates automatically.

Render Trace - 3 Steps

Step 1: ObservableObject (CounterModel)

Step 2: SwiftUI View (CounterView)

Step 3: Button (Increment)

State Change - Re-render

Trigger:User taps the Increment button

Before

count = 0

→

After

count = 1

Re-renders:The entire CounterView re-renders, updating the Text widget to show the new count

UI Quiz - 3 Questions

What causes the Text showing the count to update automatically?

A The count property is marked with @Published in the model

B The Button calls a manual refresh function

C The Text widget has a timer to update itself

D The view reloads when the app restarts

Key Insight

Using @Published properties in an ObservableObject lets SwiftUI views update automatically when data changes. This creates smooth, reactive interfaces without manual UI refresh code.