by Lead by code Jan 21, 2025 iOS

What is the role of @State, @Binding, @ObservedObject, and @EnvironmentObject in SwiftUI? Provide examples.

Table of Contents

@state

@State in SwiftUI is a property wrapper used to manage simple, local state within a single view. It enables the view to update its UI whenever the value of the @State property changes.

Key Characteristics of @State

  1. Local State: @State is designed for state that belongs exclusively to a single view. It cannot be shared with other views.
  2. Automatic UI Updates: Changes to a @State property automatically trigger the view to re-render, ensuring the UI stays in sync.
  3. Immutable to the View: Although marked as mutable, @State properties are read-only from the perspective of the view body. The changes must be made using the underlying binding.
struct TextInputView: View {
    @State private var name: String = ""

    var body: some View {
        VStack {
            TextField("Enter your name", text: $name)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .padding()

            Text("Hello, \(name)!")
                .font(.title)
                .padding()
        }
        .padding()
    }
}

Limitations of @State

  1. Local to View: Cannot share state with other views. Use @Binding, @ObservedObject, or @EnvironmentObject for shared state.
  2. Small, Simple State: Use @State for lightweight state only. For more complex or shared state, consider ObservableObject.

2. @Binding – Passing State to Child Views

  • Used when a child View needs to modify a parent’s state.
  • It does not own the state but references it from the parent.

Example: 

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

    var body: some View {
        VStack {
            Text("Parent Count: \(count)")
            CounterButton(count: $count)  // Pass state as binding
        }
    }
}

struct CounterButton: View {
    @Binding var count: Int  // `count` is not owned, it refers to parent's state

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

✅ Use @Binding when: A child View needs read-write access to parent’s state.

3. @ObservedObject – Complex Data (Class-Based)

  • Used when managing state in a separate class.
  • Works with reference types (class) and is observable.
  • Requires the class to conform to ObservableObject and use @Published for properties.

Example: 

import SwiftUI

class CounterModel: ObservableObject {
    @Published var count = 0  // Automatically notifies Views when changed
}

struct CounterView: View {
    @ObservedObject var counter = CounterModel()  // Observing external state

    var body: some View {
        VStack {
            Text("Count: \(counter.count)")
                .font(.largeTitle)

            Button("Increment") {
                counter.count += 1  // Triggers UI update
            }
        }
    }
}

✅ Use @ObservedObject when:

  • State needs to be shared across multiple Views.
  • Data model is class-based with reference semantics.

4. @EnvironmentObject – Global Data Sharing

  • Used for app-wide state that multiple Views need access to.
  • Works like @ObservedObject, but the object is injected into the environment.
  • Eliminates the need to pass objects manually across Views.

Example: 

class UserSettings: ObservableObject {
    @Published var username = "Mike"
}

struct ParentView: View {
    @StateObject var settings = UserSettings()  // Initializing the environment object

    var body: some View {
        NavigationView {
            VStack {
                Text("User: \(settings.username)")
                NavigationLink(destination: ChildView()) {
                    Text("Go to Child")
                }
            }
        }
        .environmentObject(settings)  // Injecting into environment
    }
}

struct ChildView: View {
    @EnvironmentObject var settings: UserSettings  // Access environment object

    var body: some View {
        VStack {
            Text("Username: \(settings.username)")
            Button("Change Username") {
                settings.username = "John"
            }
        }
    }
}

Comparison Table

Property Wrapper Type Scope Used For Example Use Case
@State struct (Value Type) Local View Simple, local state A button counter
@Binding struct (Value Type) Child View Modify parent state A child View modifying a toggle
@ObservedObject class (Reference Type) Multiple Views Shared state via an instance Managing a user’s settings
@EnvironmentObject class (Reference Type) Global App State Avoid passing state manually Global app theme or user session

Final Thoughts

  • Use @State for local values.
  • Use @Binding when passing state to child Views.
  • Use @ObservedObject when sharing complex data across multiple Views.
  • Use @EnvironmentObject when many Views need access to global state.

Here are some advanced questions on @State, @Binding, @ObservedObject, and @EnvironmentObject in SwiftUI:

1. What happens if you try to mutate an @State property inside a struct initializer?

Answer:
SwiftUI does not allow modifying an @State property inside an initializer because @State is meant to be managed by SwiftUI and should be initialized only once.

Example:

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

    init() {
        count = 10  // ❌ ERROR: Cannot assign to property 'count' in initializer
    }

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

✅ Fix: Initialize @State directly in the property declaration.

2. Can you use @State in a class-based ObservableObject?

Answer:
No, @State is only for structs (Views).
For a class-based ObservableObject, use @Published instead.

Example:

class CounterModel: ObservableObject {
    @State var count = 0  // ❌ ERROR: '@State' cannot be used in an ObservableObject
}

✅ Fix: Use @Published inside the class:

class CounterModel: ObservableObject {
    @Published var count = 0
}

3. What happens if you use @ObservedObject in multiple Views?

Answer:
Each View gets a new instance of the object if initialized inside the View. This means they won’t share the same state.

Example:

struct ParentView: View {
    var body: some View {
        VStack {
            CounterView()  // Each instance gets a new CounterModel
            CounterView()
        }
    }
}

struct CounterView: View {
    @ObservedObject var counter = CounterModel()  // New instance every time

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

✅ Fix: Pass an external instance to share state.

struct ParentView: View {
    @StateObject var counter = CounterModel()  // Shared instance

    var body: some View {
        VStack {
            CounterView(counter: counter)
            CounterView(counter: counter)
        }
    }
}

struct CounterView: View {
    @ObservedObject var counter: CounterModel
}

4. When should you use @StateObject instead of @ObservedObject?

Answer:

  • Use @StateObject when creating an instance inside a View.
  • Use @ObservedObject when passing an existing instance.

Example:

struct ParentView: View {
    @StateObject var counter = CounterModel()  // ✅ Correct for creating

    var body: some View {
        CounterView(counter: counter)
    }
}

struct CounterView: View {
    @ObservedObject var counter: CounterModel  // ✅ Correct for passing

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

5. How does @EnvironmentObject help with deep View hierarchies?

Answer:
It allows passing data without manually injecting objects at each level.

Example:

class UserSettings: ObservableObject {
    @Published var username = "Mike"
}

struct ParentView: View {
    @StateObject var settings = UserSettings()

    var body: some View {
        ChildView()
            .environmentObject(settings)  // Injecting into the environment
    }
}

struct ChildView: View {
    var body: some View {
        GrandChildView()
    }
}

struct GrandChildView: View {
    @EnvironmentObject var settings: UserSettings  // Access anywhere

    var body: some View {
        Text("Username: \(settings.username)")
    }
}

Without @EnvironmentObject, we’d need to pass UserSettings manually through each level.

6. What happens if an @EnvironmentObject is missing in the parent View?

Answer:
SwiftUI crashes at runtime if an @EnvironmentObject is accessed without being injected.

Example:

struct SomeView: View {
    @EnvironmentObject var settings: UserSettings  // ❌ ERROR: No UserSettings found

    var body: some View {
        Text(settings.username)
    }
}

✅ Fix: Ensure .environmentObject(settings) is applied in a parent View.

7. Can @Binding be used with @StateObject?

Answer:
Yes, @Binding can reference a property from an @StateObject.

Example:

class CounterModel: ObservableObject {
    @Published var count = 0
}

struct ParentView: View {
    @StateObject var counter = CounterModel()

    var body: some View {
        CounterButton(count: $counter.count)  // ✅ Binding to @Published
    }
}

struct CounterButton: View {
    @Binding var count: Int  // ✅ Uses binding

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

This allows modifying an @StateObject‘s property from a child View.

8. How does @State interact with animations?

Answer:
@State works with SwiftUI’s built-in withAnimation for smooth transitions.

Example:

struct AnimatedView: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Rectangle()
                .frame(width: isExpanded ? 200 : 100, height: 100)
                .animation(.easeInOut, value: isExpanded)

            Button("Toggle") {
                withAnimation {
                    isExpanded.toggle()
                }
            }
        }
    }
}

When isExpanded changes, SwiftUI automatically animates the Rectangle’s width.

9. What’s the difference between @State and @StateObject?

Property Wrapper Type Use Case
@State Struct Simple, local state within the View
@StateObject Class Instantiating an ObservableObject in a View

Example:

struct ExampleView: View {
    @State private var count = 0  // ✅ Struct-based state (local)

    @StateObject private var counter = CounterModel()  // ✅ Class-based (ObservableObject)

    var body: some View {
        VStack {
            Text("Count: \(count)")
            Text("CounterModel Count: \(counter.count)")
        }
    }
}

✅ Use @State for simple values, @StateObject for class-based observable state.

10. Can you use @State with a computed property?

Answer:
No, @State cannot be used with computed properties because it needs storage.

❌ Invalid Example:

struct ExampleView: View {
    @State var value: Int {
        return 10  // ❌ ERROR: `@State` does not work with computed properties
    }
}

✅ Fix: Use a normal computed property:

struct ExampleView: View {
    @State private var baseValue = 10

    var doubledValue: Int {
        return baseValue * 2
    }
}

🚀 Final Thoughts

  • @State → Use for local mutable state.
  • @Binding → Use when passing state to child Views.
  • @StateObject → Use when creating an ObservableObject inside a View.
  • @ObservedObject → Use when passing an ObservableObject from a parent.
  • @EnvironmentObject → Use for global app-wide state.

Here are more advanced SwiftUI questions on @State, @Binding, @ObservedObject, and @EnvironmentObject:

1. Can @Binding be used with @StateObject directly?

Answer:
No, you cannot directly bind an entire @StateObject, but you can bind its properties.

❌ Incorrect:

struct ParentView: View {
    @StateObject var counter = CounterModel()

    var body: some View {
        CounterButton(count: $counter)  // ❌ ERROR: Cannot pass @StateObject as a Binding
    }
}

✅ Correct:

struct ParentView: View {
    @StateObject var counter = CounterModel()

    var body: some View {
        CounterButton(count: $counter.count)  // ✅ Binding to property, not the object
    }
}

struct CounterButton: View {
    @Binding var count: Int  // ✅ Accepts Binding<Int>

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

✅ Key Takeaway:

  • @Binding only works with value types, so you must bind individual properties, not entire @StateObject.

2. What happens if you initialize a @StateObject inside a View initializer?

Answer:
SwiftUI will not persist the @StateObject across view reloads.

❌ Incorrect:

struct CounterView: View {
    @StateObject var counter: CounterModel  // ❌ ERROR: Cannot initialize here

    init() {
        counter = CounterModel()  
    }
}

✅ Correct:

struct CounterView: View {
    @StateObject var counter = CounterModel()  // ✅ Always initialize in property

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

✅ Key Takeaway:

  • Always initialize @StateObject in property declarations, not in init().

3. How can you reset an @StateObject when navigating back to a View?

Answer:
SwiftUI does not automatically reset @StateObject when navigating back.
Use id to force reinitialization.

✅ Example:

struct ParentView: View {
    @State private var refreshID = UUID()  // Unique ID to force refresh

    var body: some View {
        NavigationView {
            NavigationLink("Go to Counter") {
                CounterView().id(refreshID)  // New instance each time
            }
            Button("Reset") {
                refreshID = UUID()  // Generate a new ID
            }
        }
    }
}

✅ Key Takeaway:

  • Use .id(UUID()) to force a View to reinitialize @StateObject when navigating back.

4. What happens if multiple Views access the same @EnvironmentObject but it is not provided?

Answer:
If an @EnvironmentObject is not injected, SwiftUI crashes at runtime.

❌ Incorrect:

struct ChildView: View {
    @EnvironmentObject var settings: UserSettings  // ❌ CRASH if not provided

    var body: some View {
        Text("Username: \(settings.username)")
    }
}

struct ParentView: View {
    var body: some View {
        ChildView()  // ❌ Missing `.environmentObject(settings)`
    }
}

✅ Correct:

struct ParentView: View {
    @StateObject var settings = UserSettings()

    var body: some View {
        ChildView()
            .environmentObject(settings)  // ✅ Inject environment object
    }
}

✅ Key Takeaway:

  • If an @EnvironmentObject is required, it must be injected in a parent View.

5. Can @Binding be used with an @EnvironmentObject?

Answer:
Yes, you can create a @Binding from an @EnvironmentObject.

✅ Example:

class UserSettings: ObservableObject {
    @Published var isDarkMode = false
}

struct ParentView: View {
    @StateObject var settings = UserSettings()

    var body: some View {
        ChildView()
            .environmentObject(settings)  // ✅ Inject environment object
    }
}

struct ChildView: View {
    @EnvironmentObject var settings: UserSettings  // ✅ Access environment object

    var body: some View {
        ToggleView(isOn: $settings.isDarkMode)  // ✅ Pass as Binding
    }
}

struct ToggleView: View {
    @Binding var isOn: Bool  // ✅ Uses Binding

    var body: some View {
        Toggle("Dark Mode", isOn: $isOn)
    }
}

✅ Key Takeaway:

  • You can bind an @EnvironmentObject property to a @Binding to pass it to child Views.

6. What is the difference between @StateObject, @ObservedObject, and @EnvironmentObject?

Property Wrapper Scope Used for Example Use Case
@StateObject Local View only (creates instance) Manages ObservableObject within the View Creating a data model for a single View
@ObservedObject Passed between Views Observes an existing ObservableObject Sharing state between parent and child Views
@EnvironmentObject Global (Injected in environment) Avoids manual state passing Theme settings, authentication state

7. How does @State handle Arrays and Dictionaries?

Answer:
SwiftUI detects changes in @State properties, but modifying an array directly does not trigger updates.

❌ Incorrect:

struct ExampleView: View {
    @State private var items = ["Apple", "Banana"]

    var body: some View {
        Button("Add Item") {
            items.append("Cherry")  // ❌ Won't update UI
        }
    }
}

✅ Fix: Reassign the array:

Button("Add Item") {
    items = items + ["Cherry"]  // ✅ Triggers update
}

✅ Key Takeaway:

  • Modify @State by reassigning collections, not mutating them.

8. Can @ObservedObject be used in a ViewModel for MVVM?

Answer:
Yes, SwiftUI works well with MVVM.

✅ Example:

class ArticleViewModel: ObservableObject {
    @Published var articles: [String] = []

    func fetchArticles() {
        self.articles = ["SwiftUI", "Combine", "Async/Await"]
    }
}

struct ContentView: View {
    @StateObject var viewModel = ArticleViewModel()

    var body: some View {
        List(viewModel.articles, id: \.self) { article in
            Text(article)
        }
        .onAppear {
            viewModel.fetchArticles()
        }
    }
}

✅ Key Takeaway:

  • Use @StateObject for ViewModel creation in MVVM architecture.

9. What happens if a @State property is accessed from another thread?

Answer:
SwiftUI requires @State updates on the main thread, otherwise it triggers runtime warnings.

❌ Incorrect:

Button("Fetch Data") {
    DispatchQueue.global().async {
        self.data = "New Data"  // ❌ Warning: Modifying state from background thread
    }
}

✅ Fix:

DispatchQueue.global().async {
    let newData = "New Data"
    DispatchQueue.main.async {
        self.data = newData  // ✅ Update on main thread
    }
}

✅ Key Takeaway:

  • Always update @State on the main thread to avoid UI inconsistencies.

Table of Contents

→ Index