NavigationLink hides the Destination View, or causes infinite view updates

Question

Let us consider the situation when you have ContentView and DestinationView. Both of them depend on some shared data, that typically lies inside the @ObservedObject var viewModel, that you pass from parent to child either via @EnvironmentObject or directly inside init(). The DestinationView in this case wants to enrich the viewModel by fetching some additional content inside .onAppear.

In this case, when using NavigationLink you might encounter the situation when the DestinationView gets into an update loop when you fetching content, as it also updates the parent view and the whole structure is redrawn.

When using the List you explicitly set the row's ids and thus view is not changed, but if the NavigationLink is not in the list, it would update the whole view, resetting its state, and hiding the DestinationView.

The question is: how to make NavigationLink update/redraw only when needed?

Beverleybeverlie

Answer 1

In SwiftUI the update mechanism compares View structs to find out whether they need to be updated, or not. I've tried many options, like making ViewModel Hashable, Equatable, and Identifiable, forcing it to only update when needed, but neither worked.

The only working solution, in this case, is making a NavigationLink wrapper, providing it with id for equality checks and using it instead.

struct NavigationLinkWrapper<DestinationView: View, LabelView: View>: View, Identifiable, Equatable {
    static func == (lhs: NavigationLinkWrapper, rhs: NavigationLinkWrapper) -> Bool {
        lhs.id == rhs.id
    }
    
    let id: Int
    let label: LabelView
    let destination: DestinationView // or LazyView<DestinationView>
    
    var body: some View {
        NavigationLink(destination: destination) {
            label
        }
    }
}

Then in ContentView use it with .equatable()

NavigationLinkWrapper(id: self.viewModel.hashValue,
                   label: myOrdersLabel,
             destination: DestinationView(viewModel: self.viewModel)
).equatable()

Helpful tip:

If your ContentView also does some updates that would impact the DestinationView it's suitable to use LazyView to prevent Destination from re-initializing before it's even on the screen.

struct LazyView<Content: View>: View {
    let build: () -> Content
    init(_ build: @autoclosure @escaping () -> Content) {
        self.build = build
    }
    var body: Content {
        build()
    }
}

P.S: Apple seems to have fixed this issue in iOS14, so this is only iOS13 related issue.

Beverleybeverlie

Instead of using AnyView you can make your NavigationLinkWrapper generic (like you did with LazyView). – Hapsburg

thanks, @pawello2222, I got so used to AnyView when writing UI, that forgot about my favorite generics which is totally a must in a standalone component. – Beverleybeverlie

Answer 2

The answer given by Vivienne has worked for me, and is certainly worthy of consideration.

At other times, I have experienced similar situations and found that if I could remove the dependence of the detail view on environment objects, I could fix the infinite refreshing.

So a simple answer may be to remove those environment objects, perhaps passing them in via the init of the view instead. It's a relatively simple change that often works.

Vocable