SwiftUI Property Wrappers

Knowing when to use @State, @Binding, @StateObject, @ObservedObject, and @EnvironmentObject

Published in

Geek Culture

3 min readFeb 3, 2022

Diagram by **Chris Eidho**f from **objc.io**

I will separate this blog into two sections, one for value types and the other for objects . Please follow along the examples as you read along.

Value Types

As seen above, property wrappers can be broadly divided into two sections. In this section, I will be talking about value types. Value types are any swift types that already exist such as Integers, Strings, Booleans, Arrays of Integer types, and etc.

@State variables

@State variables are the most basic property wrappers used SwiftUI. These variables respond to any changes , meaning that they are capable of reading and writing to the view. In the example below, the view reads the state variable and it also changes the value to any random integer ranging from 0 to 100 every time the button is pressed.

When to use State variables

When the view owns the variable
When you need to respond to changes to the variable

@Binding variables

@Binding variables are value types(Integers, Strings, Arrays.. and etc) that are passed in by another view. Unlike @State variables, the views in which they are called in, do not have ownership to the variables. Using Binding variables are used when you need to access @State variables from other views. They read and update these variables so you can manipulate the them and change their values.

In order to connect the two State and Binding variables. Create a binding variable and pass it in as a parameter when calling it from the main view. Use $ and pass in the @State variable that you want to bind.

binding(value: self.$number)

When to use Binding variables

You need to read and write to a variable that is owned by another view
The view does not own the variable.

Objects Types

The property wrappers that will be discussed from now on are objects that you define .Before we dig in, let’s talk about ObservableObjects and @Published variables. ObservableObject are protocols that are part of the Combine framework. Any object that is conforms to the ObservableObject protocol keeps track of any changes made to the @Published variables.

Let’s define an object called myObject.

myObject(name: "Elizabeth", value: 10)

@StateObject variables

State objects are like @State variables but used to objects made by the ObservableObject protocol.

@StateObject var object1 = myObject(name: "Elizabeth", value: 10)

Since“ name” is not published, it is a read only property so we cannot change it once it is initialized. However, we can change values for “value” since it is declared as a @Published variable.

When to use @StateObject variables

You want to respond to changes to objects made by the ObservableObject protocol.
The view owns the object(object is initialized in view)

@ObservedObject variables

@ObservedObjects are ObservableObjects that have been passed in from other views as @StateObjects. The views do not have ownership to the variables and can change any published variables from the ObservableObject.

In the example below, notice how the view containing the @ObservedObject does not need to be passed with $. @ObservedObjects act like @Binding variables but are connected differently.

observedObject(object2: self.object1)

When to use @ObservedObject variables

You want to respond to changes made by objects made through ObservableObject protocols
The view does not own the variable

@EnvironmentObject Variables

@EnvironmentObjects are like @ObservedObjects but are used when a particular object is shared between many views. These variables do not need to be passed with a $ sign.

One difference is that you must add your parameters like the following

viewContainingEnvironmentObject.environmnetObject(parameter)