How to Use @State in SwiftUI: Simple Guide for Beginners

In SwiftUI, use @State to declare a mutable value that the view owns and can change. When the @State value changes, SwiftUI automatically updates the parts of the UI that depend on it.

Syntax

The @State property wrapper is used to declare a variable that holds state inside a SwiftUI view. It is usually a private variable and is marked with @State before the variable declaration.

Example parts:

• @State: Marks the variable as stateful.
• private var: The variable is private to the view.
• type: The data type of the state variable.
• = initialValue: Initial value of the state.

swift

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

  var body: some View {
    Text("Count: \(count)")
  }
}

Output

A text label showing: Count: 0

Example

This example shows a button that increments a counter. The counter is stored in a @State variable. When the button is tapped, the counter updates and the UI refreshes automatically.

swift

import SwiftUI

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

  var body: some View {
    VStack(spacing: 20) {
      Text("Count: \(count)")
        .font(.largeTitle)
      Button("Increment") {
        count += 1
      }
      .padding()
      .background(Color.blue)
      .foregroundColor(.white)
      .cornerRadius(8)
    }
    .padding()
  }
}

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Output

A screen with a large text showing 'Count: 0' and a blue button labeled 'Increment'. Each tap on the button increases the count number by 1 and updates the text.

Common Pitfalls

1. Forgetting to mark the variable with @State: Without @State, changes to the variable won’t update the UI.

2. Using @State for data that should be shared across views: @State is local to one view. Use @ObservedObject or @EnvironmentObject for shared data.

3. Trying to mutate @State from outside the view: Only the view owning the @State can change it.

swift

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

  var body: some View {
    Button("Increment") {
      count += 1 // This won't update the UI
    }
  }
}

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

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

Quick Reference

• @State is for local, mutable state owned by a view.
• Use @State only inside a struct View.
• Changing a @State variable triggers a UI update.
• Do not pass @State variables directly to child views; use @Binding instead.
• For shared or complex state, consider @ObservedObject or @EnvironmentObject.

Key Takeaways

Use @State to declare mutable state inside a SwiftUI view that triggers UI updates when changed.

@State variables must be private and owned by the view where they are declared.

Changing @State variables automatically refreshes the UI parts that depend on them.

Do not use @State for shared data; use other property wrappers like @ObservedObject for that.

Always use @Binding to pass state to child views instead of passing @State directly.