SwiftUI Navigation with complex View Model (Defer creation until actually needed)

Question

this SwiftUI app uses a NavigationView with one dedicated view model for each of the two involved views.

What bothers me is the creation of the second view model (DetailsViewModel) for each of the shown links regardless of whether that link is ever going to be pressed or not. You can see this in console log.

This is a minimal example, imagine the data for the second view model coming from different entities, even different data stores and the func makeDetailsViewModel(id:) to be expensive in its execution.

I would like to defer the creation of the DetailsViewModel until the user has clicked one of the links so that only that one needs to be created instead of the potential dozens or or hundreds more others. It seams reasonable to me and straight forward in UIKit by injecting the view model in prepare(for segue:) but I don’t know how to achieve something like this using SwiftUI.

Apple’s tutorial Building Lists and Navigation and other tutorials I found use the same view model or none at all (e. g. Text("Second view")) for the second view.

How can this be done or is there a completely different way in SwiftUI to go about this? I may be mentally stuck in UIKit.

Thank you.

import SwiftUI

var people: [Person] = [
    Person(id: 1, name: "Alice",     age: 13, country: "USA"),
    Person(id: 2, name: "Brad",      age: 29, country: "Canada"),
    Person(id: 3, name: "Chad",      age: 29, country: "Canada"),
    Person(id: 4, name: "Dorothy",   age: 62, country: "Ireland"),
    Person(id: 5, name: "Elizabeth", age: 40, country: "Sweden"),
    Person(id: 6, name: "Francois",  age: 21, country: "France"),
    Person(id: 7, name: "Gary",      age: 36, country: "Singapore"),
    Person(id: 8, name: "Hans",      age: 28, country: "Germany"),
    Person(id: 9, name: "Ivan",      age: 70, country: "Russia"),
    Person(id: 10, name: "Jaime",    age: 45, country: "Spain"),
]

var nameList: [ListEntryViewModel] = {
    people.map { person in
        return ListEntryViewModel(id: person.id, name: person.name)
    }
}()

func makeDetailsViewModel(id: Int) -> DetailsViewModel {
    print("Creating view model for DetailView")
    
    let person = people.first(where: { $0.id == id})!
    return DetailsViewModel(name: person.name, age: person.age, country: person.country)
}

// MARK: - Model

struct Person {
    var id: Int
    var name: String
    var age: Int
    var country: String
}

// MARK: - View Models

struct ListEntryViewModel: Identifiable {
    var id: Int
    var name: String
}

struct DetailsViewModel {
    var name: String
    var age: Int
    var country: String
}

// MARK: - Views

struct DetailView: View {
    var detailsViewModel: DetailsViewModel
    
    var body: some View {
        VStack {
            Text(detailsViewModel.name)
            Text("\(detailsViewModel.age) years")
            Text("from \(detailsViewModel.country)")
        }
    }
}

struct ContentView: View {
    var people: [ListEntryViewModel] = nameList
    
    var body: some View {
        NavigationView {
            List(people) { person in
                NavigationLink(destination: DetailView(detailsViewModel: makeDetailsViewModel(id: person.id))) {
                    Text(person.name)
                }
            }
            .navigationTitle("People")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

I assume you wanted DeferView (from https://stackoverflow.com/a/61242931/12299030), like

List(people) { person in
    NavigationLink(destination: DeferView {
        DetailView(detailsViewModel: makeDetailsViewModel(id: person.id))
    }) {
        Text(person.name)
    }
}