Binding in swiftUI

In this blog, we will explore the usage of the binding in SwiftUI. When I first encountered this, I found it confusing, but by delving deeper into its functionality, I gained a better understanding of its purpose. Therefore, I decided to write a blog to share my knowledge about this topic.

In SwiftUI, the $ symbol is used to access a binding to a variable instead of the variable itself. A binding is a reference to the value of the variable, and allows us to read and write to the variable from within a view.

A binding provides a two-way connection between a @State variable and a view, so that changes to one that are automatically reflected in the other.

For example, if we have a @State variable called name:

@State var name = ""

Now, we can create a binding to that variable by using the $ symbol:

TextField("Enter your name:", text: $name)

In this example, we are passing the binding to the name variable to the TextField view. This means that when the user types in the TextField, the value of the name variable will be updated automatically.

For two-way communication between views and their parent views we can use @Binding property wrapper.

struct SubView: View {
    @Binding var isOn: Bool

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

struct MainView: View {
    @State var isToggleOn = false

    var body: some View {
        VStack {
            SubView(isOn: $isToggleOn)
            Text("Toggle is \(isToggleOn ? "on" : "off")")
        }
    }
}

In this example, the SubView contains a toggle that controls the isOn variable using the @Binding property wrapper. The MainView contains the isToggleOn property, which is passed as a binding into the SubView. When the toggle value changes, the isToggleOn property is updated, and the text view in the ParentView reflects the current state of the toggle.

Now, lets come to the tricky part :

struct TestView:View{
    @State var stepper: Int = 0
    var body: some View {
        VStack {
            Text("Value: \(stepper)")
            Button("Increment") {
                stepper += 1
            }
            Button("Decrement") {
                stepper -= 1
            }
            Text("Value using Binding: \($stepper.wrappedValue)")
        }
    }
}

when you run the above code, the view will update in both the ‘Text’ views given, even if the first ‘Text’ view’s variable is not prefixed with ‘$’.

So what is happening here? When you pass a value directly to Text, SwiftUI creates a copy of the value and uses it to render the view.

On the other hand, when you pass a binding to a view like Toggle, SwiftUI creates a reference to the current value. When the user interacts with the Toggle, SwiftUI updates the value, and the changes are automatically reflected in the view.

Almost all the views in swiftUI asks for binding because it can help in improving the performance of your views. By using a binding instead of a separate @State variable in each child view, you can reduce the number of times your view hierarchy needs to be updated, which can help improve performance and reduce unnecessary rendering.

That being said, there are certainly cases where you might not need to use a binding, especially if you’re not passing values between views or handling user interactions. However, in most cases, using bindings can help simplify your code and make your views more responsive.

Hope this article was helpful 😄.

Follow me on twitter : https://twitter.com/iamafsana_

Sayonara!! 😃