Understanding @State

The @State property wrapper declares a piece of state that’s local to a particular view. This means that the data is owned and managed by that particular view and can be used to control the view’s behavior and appearance.

When you mark a property with @State, you’re telling SwiftUI to watch that property for changes. If the property’s value changes, SwiftUI will re-render the parts of the view that depend on that property.

Example: Building a Counter

Observe how @State works in practice with this simple counter example that increments and decrements a number when buttons are pressed:

struct CounterView: View {
    @State private var count: Int = 0

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Button("Increment") {
                count += 1
            }
            Button("Decrement") {
                count -= 1
            }
        }
    }
}

Inside the CounterView struct, a count property is declared and marked with @State, initialized with a value of 0.

The body of the view uses a VStack to vertically stack a Text view and two Button views. The Text view displays the current value of count, and the buttons allow the user to increment and decrement the count.

When the user presses a button, the corresponding action block executes, updating the count property. Since count is marked with @State, SwiftUI is aware that the Text view needs to be re-rendered with the updated count. Amazing, you’ve just witnessed how a SwiftUI app’s UI can change after the first display! 🎉 [TODO: FPE: Should a screenshot of the app be included here?]

How the Counter Example Works — Step by Step

To further build your understanding, look at how the counter example executes step-by-step:

1. Initializing the State: The @State property count is initialized with a value of 0.
2. Creating the View: The CounterView is created and prepared to be displayed.
3. Computing the Body: SwiftUI computes the body property of the CounterView. At this point, count is 0, so the Text view shows Count: 0.
4. First Display: The view is rendered on the screen, showing the initial count of 0.
5. User Interaction: The user taps the Increment button. This action increments the count from 0 to 1.
6. Updating the UI: As the count state has changed, SwiftUI re-computes the body of the CounterView. The Text view now shows Count: 1, reflecting the updated state.

Similarly, if the user taps the Decrement button, the count is decremented, and the UI updates to show the new count.

Putting @State Into Practice

Now that you’ve learned the basics of @State, it’s time to put this knowledge into practice. In the upcoming video demo, you’ll take the budget-tracking example app and add state so that users can add new entries, allowing the UI to change after the first display. This will give you hands-on experience with how @State can be used to make your apps interactive and dynamic.