SwiftUI introduces the property wrappers like @State and @Binding that can sometimes be confusing for newcomers. In this article, we'll explore the differences between @State and @Binding in SwiftUI and when to use each of them.

@State

@State is a property wrapper that allows you to create mutable state within a SwiftUI view. When you mark a property with @State ,SwiftUI manages its value and ensures that any changes to it trigger a view update. @State is commonly used for values that are specific to a single view and don't need to be shared between multiple views or view hierarchies.

Here's a basic example:

struct ContentView: View {
    @State private var isToggled = false
    var body: some View {
        Toggle("Toggle me", isOn: $isToggled)
            .padding()
    }
}

In this example, we use @State to create a boolean property isToggled ,which tracks the state of a toggle switch. When the user interacts with the toggle switch, SwiftUI automatically updates the view to reflect the changes in isToggled .

@Binding

@Binding ,on the other hand, is used to share a value between multiple views. It is typically employed when you want to pass data from a parent view to a child view and allow the child view to modify that data. It establishes a connection between the two views, ensuring that changes in one view are reflected in the other.

Here's an example that illustrates the use of @Binding :

struct ParentView: View {
    @State private var isToggled = false
    var body: some View {
        ChildView(isToggled: $isToggled)
    }
}
struct ChildView: View {
    @Binding var isToggled: Bool
    var body: some View {
        Toggle("Toggle me", isOn: $isToggled)
            .padding()
    }
}

In this example, the ParentView owns the isToggled property marked with @State ,and it passes it to ChildView .ChildView uses @Binding to create a binding to the isToggled property. Now, when the user interacts with the toggle in ChildView ,it directly modifies the isToggled property in ParentView ,and the changes are reflected in both views.

When to Use Each

• Use @State when you need to manage the state of a property within a single view and don't need to share it with other views.
• Use @Binding when you want to share a property between multiple views and allow child views to modify it. It's particularly useful for passing data down the view hierarchy.

In summary, @State and @Binding are essential property wrappers in SwiftUI that help you manage state and data flow in your app's user interface. Understanding when and how to use them is crucial for building responsive and interactive SwiftUI applications. With practice, you'll become adept at harnessing the power of these property wrappers to create dynamic and engaging user interfaces.