Why is this SwiftUI state not updated when passed as a non-binding parameter?

Here's what I want to do:

1. Have a SwiftUI view which changes a local State variable
2. On a button tap, pass that variable to some other part of my application

However, for some reason, even though I update the state variable, it doesn't get updated when it's passed to the next view.

Here's some sample code which shows the problem:

struct NumberView: View {
    @State var number: Int = 1

    @State private var showNumber = false

    var body: some View {
        NavigationStack {
            VStack(spacing: 40) {
//              Text("\(number)")

                Button {
                    number = 99
                    print(number)
                } label: {
                    Text("Change Number")
                }

                Button {
                    showNumber = true
                } label: {
                    Text("Show Number")
                }
            }
            .fullScreenCover(isPresented: $showNumber) {
                SomeView(number: number)
            }
        }
    }
}

struct SomeView: View {
    let number: Int

    var body: some View {
        Text("\(number)")
    }
}

If you tap on "Change Number", it updates the local state to 99. But when I create another view and pass this as a parameter, it shows 1 instead of 99. What's going on?

Some things to note:

• If you uncomment Text("\(number)"), it works. But this shouldn't be necessary IMO.
• It also works if you make SomeView use a binding. But for my app, this won't work. My actual use case is a 'select game options' view. Then, I will create a non-SwiftUI game view and I want to pass in these options as parameters. So, I can't have bindings all the way down my gaming code just because of this bug. I want to just capture what the user enters and create a Parameters object with that data.
• It also works if you make it a navigationDestination instead of a fullScreenCover. ¯\(ツ)/¯ no idea on that one...

A View is a struct, therefore its properties are immutable, so the view can not change its own properties. This is why changing the property named number from inside the body of the view needs this property to be annotated with a @State property wrapper. Thanks to Swift and SwiftUI, transparent read and write callbacks let the value being seen changed. So you must not pass number as a parameter of SomeView() when calling fullScreenCover(), but pass a reference to number, for the callbacks to be systematically called: $number. Since you are not passing an integer anymore to construct struct SomeView, the type of the property named number in this struct can not any longer be an integer, but must be a reference to an integer (namely a binding): use the @Binding annotation for this.

So, replace SomeView(number: number) by SomeView(number: $number) and let number: Int by @Binding var number: Int to do the job.

Here is the correct source code:

import SwiftUI

struct NumberView: View {
    @State var number: Int = 1

    @State private var showNumber = false

    var body: some View {
        NavigationStack {
            VStack(spacing: 40) {
//              Text("\(number)")

                Button {
                    number = 99
                    print(number)
                } label: {
                    Text("Change Number")
                }

                Button {
                    showNumber = true
                } label: {
                    Text("Show Number")
                }
            }
            .fullScreenCover(isPresented: $showNumber) {
                SomeView(number: $number)
            }
        }
    }
}

struct SomeView: View {
    @Binding var number: Int

    var body: some View {
        Text("\(number)")
    }
}

After all that said to obtain a valid source code, their is a little trick that has not been explained up to now: if you simply replace in your source code Text("Change Number") by Text("Change Number \(number)"), without using $ reference nor @Binding keywords anywhere, you will see that the problem is also automatically solved! No need to use @binding in SomeView! This is because SwiftUI makes optimizations when building a tree of views. If it knows that the displayed view changed (not only its properties), it will compute the view with updated @State values. Adding number to the button label makes SwiftUI track changes of the number state property and it now updates its cached value to display the Text button label, therefore this new value will be correctly used to create SomeView. All of that may be considered as strange things, but is simply due to optimizations in SwiftUI. Apple does not fully explain how it implements optimizations building a tree of views, there are some informations given during WWDC events but the source code is not open. Therefore, you need to strictly follow the design pattern based on @State and @Binding to be sure that the whole thing works like it should.

All of that said again, one could argue that Apple says that you do not have to use @Binding to pass a value to a child view if this child view only wants to access the value: share the state with any child views that also need access, either directly for read-only access, or as a binding for read-write access (https://developer.apple.com/documentation/swiftui/state). This is right, but Apple says in the same article that you need to place [state] in the highest view in the view hierarchy that needs access to the value. With Apple, needing to access a value means that you need it to display the view, not only to do other computations that have no impact on the screen. This is this interpretation that lets Apple optimize the computation of the state property when it needs to update NumberView, for instance when computing the content of the Text("Change Number \(number)") line. You could find it really tricky. But there is a way to understand that: take the initial code you wrote, remove the @State in front of var number: Int = 1. To compile it, you need to move this line from inside the struct to outside, for instance at the very first line of your source file, just after the import declaration. And you will see that it works! This is because you do not need this value to display NumberView. And thus, it is perfectly legal to put the value higher, to build the view named SomeView. Be careful, here you do not want to update SomeView, so there is no border effects. But it would not work if you had to update SomeView.

Here is the code for this last trick:

import SwiftUI

// number is declared outside the views!
var number: Int = 1

struct NumberView: View {
    // no more state variable named number!
    // No more modification: the following code is exactly yours!

    @State private var showNumber = false
    
    var body: some View {
        NavigationStack {
            VStack(spacing: 40) {
//              Text("\(number)")

                Button {
                    number = 99
                    print(number)
                } label: {
                    Text("Change Number")
                }

                Button {
                    showNumber = true
                } label: {
                    Text("Show Number")
                }
            }
            .fullScreenCover(isPresented: $showNumber) {
                SomeView(number: number)
            }
        }
    }
}

struct SomeView: View {
    let number: Int
    var body: some View {
        Text("\(number)")
    }
}

This is why you should definitely follow the @State and @Binding design pattern, taking into account that if you declare a state in a view that does not use it to display its content, you should declare this state as a @Binding in child views even if those children do not need to make changes to this state. The best way to use @State is to declare it in the highest view that needs it to display something: never forget that @State must be declared in the view that owns this variable; creating a view that owns a variable but that does not have to use it to display its content is an anti-pattern.

Since number isn't read in body, SwiftUI's dependency tracking detect it. You can give it a nudge like this:

.fullScreenCover(isPresented: $showNumber) { [number] in

Now a new closure will be created with the updated number value whenever number changes. Fyi the [number] in syntax is called a "capture list", read about it here.

Nathan Tannar gave me this explanation via another channel which I think gets to the crux of my problem. It does seem that this is a SwiftUI weirdness caused by knowing when and how it updates views based on state. Thanks Nathan!

It’s because the number isn’t “read” in the body of the view. SwiftUI is smart in that it only triggers view updates when a dependency of the view changes. Why this causes issues with the fullScreenCover modifier is because it captures an @escaping closure for the body. Which means it’s not read until the cover is presented. Since its not read the view body will not be re-evaluated when the @State changes, you can validate this by setting a breakpoint in the view body. Because the view body is not re-evaluated, the @escaping closure is never re-captured and thus it will hold a copy of the original value.

As a side note, you’ll find that once you present the cover for the first time and then dismiss, subsequent presentations will update correctly.
Arguably this seems like a SwiftUI bug, the fullScreenCover probably shouldn’t be @escaping. You can workaround by reading the number within the body, or wrapping the modifier with something like this, since here destination is not @escaping captured so the number will be read in the views body evaluation.

struct FullScreenModifier<Destination: View>: ViewModifier {
    @Binding var isPresented: Bool
    @ViewBuilder var destination: Destination
    func body(content: Content) -> some View {
        content
            .fullScreenCover(isPresented: $isPresented) {
                destination
            }
    }
}