Introduction:

State management is a crucial aspect of building responsive user interfaces in SwiftUI. It allows us to track and handle changes in the application’s state while ensuring that views automatically update when the state changes. This article will introduce several commonly used state management techniques in SwiftUI and provide instructions and code examples for each technique.

 @State, @Binding, @Environment, @StateObject, @ObservableObject, @EnvironmentObject, @Published

State

@State is one of the fundamental state management tools in SwiftUI. It is used to declare a state by applying the @State property wrapper to a property within the view hierarchy. The @State property wrapper is special because it stores the state within the context of the view and automatically updates the view when the state changes.

1
2
3
4
5
6
7
8
9
struct ContentView: View {
    @State private var counter = 0
    var body: some View {
        Text("Counter: \(counter)")
        Button("Increment") {
            counter += 1
        }
    }
}

Binding

@Binding is used to share and synchronize data between a parent view and its child view. By applying the @Binding property wrapper to a state property, we can pass that state to a child view and modify it within the child view. Changes to the state in either the parent or child view will remain synchronized.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
struct ChildView: View {
    @Binding var isOn: Bool

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

struct ParentView: View {
    @State private var isToggleOn = false

    var body: some View {
        ChildView(isOn: $isToggleOn)
    }
}

Environment

@Environment is used to access specific values from the environment. For example, @Environment(.colorScheme) can be used to retrieve the current color scheme to adjust the appearance of views as needed.

1
2
3
4
5
6
7
8
9
10
11
struct ContentView: View {
    @Environment(\.colorScheme) var colorScheme

    var body: some View {
        if colorScheme == .dark {
            Text("Dark Mode")
        } else {
            Text("Light Mode")
        }
    }
}

StateObject

@StateObject is used to create and manage an observable object within a view. Unlike @State, which is used for value types, @StateObject is applicable to reference types (classes). It ensures the consistency of the object throughout the view’s lifecycle and automatically refreshes the view when the object changes.

1
2
3
4
5
6
7
8
9
10
11
class UserData: ObservableObject {
    @Published var name = ""
}

struct ContentView: View {
    @StateObject private var user = UserData()

    var body: some View {
        TextField("Name", text: $user.name)
    }
}

ObservableObject and @Published

@ObservableObject is used to declare an object as observable. The object must conform to the ObservableObject protocol and include one or more properties marked with @Published. @Published automatically emits notifications when the properties change, allowing the view to refresh.

1
2
3
4
5
6
7
8
9
10
11
class UserData: ObservableObject {
    @Published var name = ""
}

struct ContentView: View {
    @ObservedObject private var user = UserData()

    var body: some View {
        Text("Hello, \(user.name)!")
    }
}

EnvironmentObject

@EnvironmentObject is used to share and access a data model throughout the entire application. It is similar to @StateObject, but you can set the environment object in the top-level view and access it in any child view without explicitly passing it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class UserData: ObservableObject {
    @Published var name = ""
}

struct ContentView: View {
    @EnvironmentObject private var user: UserData

    var body: some View {
        Text("Hello, \(user.name)!")
    }
}

// Setting the environment object in the top-level view
ContentView()
    .environmentObject(UserData())

By utilizing these state management techniques effectively, we can build complex SwiftUI applications and ensure that the state is correctly passed, updated, and synchronized between views. Whether you are a beginner or an experienced developer, you can benefit from these techniques. Hopefully, this article helps you better understand and apply state management in SwiftUI.