SwiftUI @State and @Binding
Tags: ios, swift, swiftui
Published: 2019-10-03 10:46:19

---
title: SwiftUI @State and @Binding
published: true
description: data flow tools for swiftui
tags: #iOS #swift #beginners #swiftui
cover_image: https://thepracticaldev.s3.amazonaws.com/i/4xxtef6ejeg6zxz2fae9.png
---

The drop of SwiftUI this summer 2019 shook the iOS/Swift dev game. The way views are created and how data flows through apps have become declarative. BindableObject, Environment, State, Binding are new tools to cut through the waves and make it to the other side.

---- 
<h1>Property Wrappers</h1>
New in Swift 5.1, property wrappers. Property wrappers wrap property access with additional behavior. State and Binding are property wrappers. 

<h1>Source of Truth</h1>
Source of truth is the biggest change with SwiftUI. Pre-SwiftUI, view controllers were in charge of their own data and if developers wanted a “syncing” effect, they would need to create it themselves. *begins reminiscing pre-swiftui data syncing* bugs bugs bugs.

Apple said fuck that, use @State

<h2>State</h2>
With SwiftUI, the emphasis is on your app having one source of truth, which is defined using @State. State lives in this magically bubble outside of your view. Views are volatile. State is persistent storage created by SwiftUI on your view’s behalf.

```
@State var isPickle: Bool = true
```

The @State property wrapper tells system, the property is a value that changes over time and the views depends on the value. Any runtime changes to a State wrapped property are recognized and triggers a re-rendering of only the portions of the views which utilize the property’s value #efficient. Since changes flow down to all of the view's children, State wrapped properties should be owned by one view which is the top-most view of the application.

Speaking of children, how the heck does State get passed through to other views if State should be defined in only one view??? Binding 😉

<h2>Binding</h2>
The @Binding property wrapper tells the system the property has read/write access to the value without ownership. Binding properties have their values passed in from a parent view as a binding, for this reason, providing a default value is not needed. 

Creating a binding occurs by passing in a State property with the $ prefix and provides the child view with a reference to the State property.


```
@State var isPickle: Bool = true

var body : some View {
   ChildView(showPickleEmoji: $isPickle )
}
```

In the ChildView

```
@Binding showPickleEmoji: Bool
```
Binding wrapped properties are provided a reference to the app’s State so any changes to values on Binding wrapped properties trigger changes across the application to whatever view portions are dependent on that State’s value.

<h1>Ownership</h1>
The biggest difference between State and Binding is ownership. Views with property's marked with State have ownership. The system created storage on that specific views behalf. With property's marked with Binding, the view has read and write access, but not ownership.

Like living with someone and having a pet. The pet is in both individuals lives. Both individuals take care of the pet, give the pet affection, take the pet out. They both have access. BUT, on the day one decides to move, the pet ultimately stays with the owner.

<b>@thetealpickle on the internet. Namaste.</b>

<I>This article was brought to you by JESSICA JEAN JOSEPH © THETEALPICKLE</I>