What does the SwiftUI `@State` keyword do?

Question

The SwiftUI tutorial uses the @State keyword to indicate mutable UI state:

@State var showFavoritesOnly = false

It offers this summary:

State is a value, or a set of values, that can change over time, and that affects a view’s behavior, content, or layout. You use a property with the @State attribute to add state to a view.

What does the keyword mean, exactly?
How does mutating a @State variable cause the view to be recomputed?
How are other variables immutable within the body getter?

@JoakimDanielson you can't expect nobody asks questions about new technology — J. Doe, Jun 04 '19 at 07:15

fredpi · Accepted Answer · 2019-06-15T19:29:19.407

The @State keyword is a @propertyWrapper, a feature just recently introduced in Swift 5.1. As explained in the corresponding proposal, it's sort of a value wrapper avoiding boilerplate code.

Sidenote: @propertyWrapper has previously been called @propertyDelegate, but that has changed since. See this post for more information.

The official @State documentation has the following to say:

SwiftUI manages the storage of any property you declare as a state. When the state value changes, the view invalidates its appearance and recomputes the body. Use the state as the single source of truth for a given view.

A State instance isn’t the value itself; it’s a means of reading and mutating the value. To access a state’s underlying value, use its value property.

So when you initialize a property that's marked @State, you're not actually creating your own variable, but rather prompting SwiftUI to create "something" in the background that stores what you set and monitors it from now on! Your @State var just acts as a delegate to access this wrapper.

Every time your @State variable is written, SwiftUI will know as it is monitoring it. It will also know whether the @State variable was read from the View's body. Using this information, it will be able to recompute any View having referenced a @State variable in its body after a change to this variable.

Are they still called property delegates or is it property wrapper now? Maybe both :( — 23inhouse, Jun 08 '19 at 14:05
This is good info, but how does this actually work: "When the state value changes, the view invalidates its appearance and recomputes the body"? In the Integrating video the Italian guy says that SwiftUI knows that the state property is used in the body, and that it also knows which view it is in. I don't see how this is possible, do you? — Gusutafu, Jun 11 '19 at 20:04
@23inhouse I've added clarification about this to my post. TLDR: They mean the same, but `@propertyWrapper` is preferred. — fredpi, Jun 15 '19 at 19:21
@Gusutafu As a `@propertyWrapper` is a wrapper, it does not only know when it's written, but also when it's read – this way, it can figure out from which views it is read. I've added clarification about this to my answer. — fredpi, Jun 15 '19 at 19:23

score 8 · Answer 2 · answered Jun 06 '19 at 08:01

8

Let me add something else if you know React Native.

The @State property is very like the this.state object in React Native.

For example:

struct Foobar: some View {
    @State var username = ""
}

class Foobar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
    };
  }
}

When you modify the username variable, they will have the same effect, that re-render the current page.

answered Jun 06 '19 at 08:01

s1ro6

161
8

Does SwiftUi have props? – Lee Irvine Aug 02 '22 at 06:41
[@Lee Irvine] Yea, but not the same, the constructor parameters are equivalent to the `props` object. Because they all come from their parent control/component. – s1ro6 Aug 02 '22 at 09:15

Maciek Czarnik · Answer 3 · 2019-06-12T12:39:39.347

6

Its explained nicely with an example in the WWDC video - Session 204 (starts at 16:00, quotation starts at 20:15)

One of the special properties of @State variables is that SwiftUI can observe when they're read and written. Because SwiftUI knows that zoomed was read in body, it knows that the view's rendering depends on it. Which means - when a variable changes the framework is going to ask for body again using the new @State value.

The @State as a Property Wrapper is also elaborated and justified in Data Flow Through Swift UI (5:38) WWDC vid as well. It's shown how it solves the problem when we need a mutable value in an immutable (struct) View.

edited Jun 12 '19 at 12:39

answered Jun 05 '19 at 14:20

Maciek Czarnik

5,950
2
37
50

3

"Because SwiftUI knows that zoomed was read in body" - What mechanism in Swift makes this possible? – Gusutafu Jun 11 '19 at 20:04
2

@Gusutafu The Combine framework (publish and subscribe). SwiftUI provides the subscriber, so it hears every time the publisher sends out a message that the variable has changed. In response, it calls `body` to get the interface generate afresh. – matt Jun 12 '19 at 16:58
1

Thanks, but the thing I was struggling with was more _how_ SwiftUI or the State itself could possibly know that the State is used in a _particular_ body! – Gusutafu Jun 12 '19 at 19:20

score 3 · Answer 4 · answered Jun 16 '19 at 04:23

If you click into @State you can see that it has several getters. One with Value another with Binding<Value>. SwiftUI seems to rely heavily on reactive programming (and their new Combine framework, and since we cannot see the full implementation of these wrappers, I would expect that the values that are stored through @State property wrappers are being managed by a CurrentValueSubject from Combine. Like the name implies, this essentially stores the current value, which can then be used as a bindable property by using the $ syntax.

score 3 · Answer 5 · edited May 04 '23 at 03:37

3

I like how profesor Paul Hegarty from Stanford explains it. He said that @State basically converts that variable into a pointer to some boolean somewhere else in memory and that's where the value changes. But your variable - now a pointer with @State- does not change, it is always pointing to that place in memory.

edited May 04 '23 at 03:37

answered May 19 '21 at 04:37

Josue Gisber

356
2
5

score 1 · Answer 6 · answered Oct 09 '21 at 19:30

Note:- The accepted answer is correct but incase you are trying to look for a easier explanation I tried below

@State property wrapper allow us to change values inside a struct.

Note:- You cannot change a property within a struct as its a values types, so its not allowed.

struct ExampleTextView: View {

    // Declare a variable with state property wrapper
    @State private var shouldChangeText: Bool = false
    
    var body: some View {
        Text("Just an example")
            .foregroundColor(Color.white)
    }
}

Incase you are wondering should we add a private access specifier?

Yes, as a rule of thumb apple recommends @State propertise shouldn't be shared with other views as there are more specific property wrappers for that @ObservedObject and @EnvironmentObject.
But if it's value type how it can be mutated where is it stored then?

So whenever we are marking a property with @State we move its storage out from the struct into the shared storage managed by SwiftUI.

In case in your mind if you are comparing with Swift, this is how its done there,

struct Example {
    var exampleType: String
    
    mutating func changeType() {
        exampleType = "Are we allowed to do this?"
    }
}

Credit: Please note this answer is inspired by this post https://www.hackingwithswift.com/quick-start/swiftui/what-is-the-state-property-wrapper

score 0 · Answer 7 · answered Jun 04 '19 at 14:06

If you know about C# and windows development. @State is similar if not the same as x:Bind or Binding.. On a collection it is similar if not the same as ObservableCollection.

As fredpi said, SwiftUI is listing for updates on vars with the @State property delegate.

What does the SwiftUI `@State` keyword do?

7 Answers7

Linked