NavigationStack destination closure invoked with path item that is being dismissed

[ghost]

Hi. I'm using TCA 1.14.0 in a visionOS application and I am observing that when navigating back (e.g. dismissing the top-most view on the stack) the destination closure of the NavigationStack is invoked with a store.case value for the current view that is being dismissed, causing the view that is being dismissed to be instantiated again. Is this expected behaviour? I understand that SwiftUI Views get (re)created at various times when the view is recomputed, but I am surprised that the NavigationStack would create a new instance of the view that is in the process of being dismissed.

This also repros for iOS. Here's a minimal repro:

import ComposableArchitecture
import SwiftUI

@Reducer
struct RootFeature {
    @Reducer
    enum Path {
        case detailItem(DetailFeature)
    }

    @ObservableState
    struct State {
        var path = StackState<Path.State>()
    }

    enum Action {
        case path(StackActionOf<Path>)
    }

    var body: some ReducerOf<Self> {
        Reduce { state, action in
            return .none
        }
        .forEach(\.path, action: \.path)
    }
}

struct ContentView: View {
    @Bindable var store: StoreOf<RootFeature>

    var body: some View {
        NavigationStack(
            path: $store.scope(state: \.path, action: \.path)
        ) {
            Form {
                Section("Hello world") {
                    NavigationLink(state: RootFeature.Path.State.detailItem(DetailFeature.State())) {
                        Text("Detail")
                    }
                }
            }
            .padding()
        } destination: { store in
            switch store.case {
            case .detailItem(let detailStore):
                _ = print("Creating a new DetailView")
                return DetailView(store: detailStore)
            }
        }
    }
}

The implementation of DetailView is unimportant, but in this case it is simply:

import ComposableArchitecture
import SwiftUI

@Reducer
struct DetailFeature {
}

struct DetailView: View {
    let store: StoreOf<DetailFeature>

    var body: some View {
        Text("Detail View")
    }
}

If you watch the console log, or put a breakpoint on return DetailView(store: detailStore) you will see that not only is this invoked when navigating to the detail view, but it is invoked again when the user taps on the back button in the nav bar,

[sandesh-gauss]

Im seeing this issue as well 🙂

[ghost]

It seems like I can rewrite the destination closure to workaround this, but this seems unsafe...?

destination: { destinationStore in
  if store.path.last == destinationStore.state {
    switch destinationStore {
    case .detailItem(let detailStore):
      print("Creating a new DetailView")
      return DetailView(store: detailStore)
    }
  }
}

And, for whatever it is worth, I can't find an equivalent repro with vanilla SwiftUI. This behaves as expected, only invoking the VanillaDetailView init when navigating to, and not when navigating back/from.

struct VanillaContentView: View {
    @State var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            Form {
                Section("Hello world") {
                    NavigationLink("Detail", value: 1)
                }
            }
            .padding()
            .navigationDestination(for: Int.self) { value in
                if value == 1 {
                    VanillaDetailView()
                }
            }
        }
    }
}

struct VanillaDetailView: View {
    var body: some View {
        Text("Detail View")
    }
}

[mbrandonw]

Hi @peterbohac, I'm not entirely sure why SwiftUI is invoking the destination closure again. We are just using navigationDestination(for:) under the hood, and so this would seem like a SwiftUI bug.

Also, unfortunately your vanilla version isn't really faithful to the TCA version. There are a lot of things that behave better with @State and the type erased NavigationPath in SwiftUI, and the moment you use @Observable models things get wonky. Do we would need to iteratively add on more layers to this vanilla version to make it more similar to the TCA version to see where things break down.

[ghost]

Thanks for the reply, @mbrandonw. I agree that the vanilla SwiftUI version isn't really a faithful recreation; I'll try some other iterations to see if I can find a better vanilla SwiftUI comparison.

I also agree that it seems very possible that this is a SwiftUI bug, but while trying to step thru the library code in the debugger late last night it seemed possible to me that there is some sort of stale captured scoped store that the destination closure is using. This is best exemplified by the fact that in my second post in this thread I shared a potential (unsafe) workaround where I can check if the view's store.path contains the value that is being handed to the destination closure. This suggests to me that the view's store has the (correct) empty path, but the destination's store is stale.

[mbrandonw]

Hi @peterbohac, we spent a little bit of time looking into this but didn't really uncover much. It's also hard for us to prioritize it very high right now because it doesn't seem to cause any obvious problems in the app other than a view being initialized an extra time. So we may just leave it here for now. If you uncover anything in the future please do let us know. We'd be happy to get a fix in if there's a clear path.

[ghost]

Okay, thanks for taking a look, @mbrandonw

[ghost]

Is this a more faithful vanilla SwiftUI version? If so, it still does not repro the issue (neither with the Dismiss button nor with the back button in the nav bar).

@MainActor @Observable
final class ViewModel {
    enum Destination {
        case detail
    }
    var path: [Destination] = []

    func navigate(to destination: Destination) {
        path.append(destination)
    }
    func popLast() {
        guard path.isEmpty == false else { return }
        _ = path.popLast()
    }
}

struct VanillaContentView: View {
    let vm = ViewModel()

    var body: some View {
        @Bindable var vm = vm
        NavigationStack(path: $vm.path) {
            Form {
                Section("Hello world") {
//                    NavigationLink("Detail", value: ViewModel.Destination.detail)
                    Button("Detail") {
                        vm.navigate(to: .detail)
                    }
                }
            }
            .padding()
            .navigationDestination(for: ViewModel.Destination.self) { destination in
                let _ = print("Destination: \(destination)")
                switch destination {
                case .detail:
                    VanillaDetailView(vm: vm)
                }
            }
        }
    }
}

struct VanillaDetailView: View {
    let vm: ViewModel

    var body: some View {
        VStack {
            Text("Detail View")
            Button("Dismiss") {
                vm.popLast()
            }
        }
    }
}

#Preview {
    VanillaContentView()
}