Navigation is rendered twice

[dadixon]

I'm trying to create a small example app the has 3 views. Each view has a list of navigation links the goes to the next view when a row is selected.

WithViewStore(self.store) { viewStore in
            List {
                ForEach(viewStore.childStates) { childState in
                    NavigationLink(
                        destination: IfLetStore(
                            self.store.scope(
                                state: \.selectedChild,
                                action: SecondAction.selectedChild
                            )
                        ) {
                            SecondView(store: $0)
                        },
                        tag: secondState.emotion.id,
                        selection: viewStore.binding(
                            get: \.selectedChild?.id,
                            send: {
                                FirstAction.setNavigation(childID: $0)
                            }
                        )) {
                            Text(secondState.emotion.title)
                        }
                }
            }
            .navigationTitle("First View")
        }

The transition between the first and second view works great but from the second to third transition loads the third view twice. Not sure if it's a SwiftUI bug or not. I'm thinking it's something in my state because I've done this with just vanilla SwiftUI and it works fine.

[stephencelis]

@dadixon Whenever you encounter a WithViewStore like this:

WithViewStore(self.store) { … }

Everything in the braces will be re-evaluated whenever any piece of state in self.store changes, even if it only needs to observe much less state. In the case of complex flows like navigation, SwiftUI has bugs that can cause problems when a parent view is recomputed while you're drilled down to some other view.

In your case above, your WithViewStore only needs to observe the binding's id:

-WithViewStore(self.store) { viewStore in
+WithViewStore(self.store, observe: \.selectedChild?.id) { viewStore in
     List {
         ForEach(viewStore.childStates) { childState in
             NavigationLink(
                 destination: IfLetStore(
                     self.store.scope(
                         state: \.selectedChild,
                         action: SecondAction.selectedChild
                     )
                 ) {
                     SecondView(store: $0)
                 },
                 tag: secondState.emotion.id,
                 selection: viewStore.binding(
-                    get: \.selectedChild?.id,
                     send: {
                         FirstAction.setNavigation(childID: $0)
                     }
                 )) {
                     Text(secondState.emotion.title)
                 }
         }
     }
     .navigationTitle("First View")
 }

See the documentation on WithViewStore performance for more info: https://pointfreeco.github.io/swift-composable-architecture/main/documentation/composablearchitecture/performance#View-stores

[stephencelis]

Not sure if it's a SwiftUI bug or not. I'm thinking it's something in my state because I've done this with just vanilla SwiftUI and it works fine.

It's technically a SwiftUI bug, but you're more likely to encounter it with TCA since it holds onto state in a single store, while in vanilla SwiftUI you're more likely to hold onto a screen's state as an island.

[dadixon]

When I try that, my viewStore.childStates doesn't work. Should I set this up a different way?

[stephencelis]

@dadixon Ah I missed that second property. Check the "performance" article above that describes how to introduce a ViewState struct that has both selectedChildId and childStates properties.

Without seeing your actual data model it's tough to tell if this is exactly how you need to configure your ViewState, though. Be careful that childStates does not include selectedChild (i.e., selectedChild should not be computed state from childStates).

[dadixon]

Right now my childStates array does include the selectedChild state. Here's my FirstState data model

struct FirstState: Equatable {
    var emotions: [Emotion]
    var selectedChild: SecondState?
    var childStates: [SecondState]
    
    init() {
        self.emotions = [
            Emotion(title: "Angry", color: .red, emotions: [
                Emotion(title: "Aggresive", color: .red, emotions: [
                    Emotion(title: "Hostile", color: .red, emotions: []),
                    Emotion(title: "Provoked", color: .red, emotions: [])
                ]),
                Emotion(title: "Bitter", color: .red, emotions: []),
                Emotion(title: "Critical", color: .red, emotions: []),
                Emotion(title: "Distant", color: .red, emotions: []),
                Emotion(title: "Frustrated", color: .red, emotions: []),
                Emotion(title: "Humiliated", color: .red, emotions: []),
                Emotion(title: "Let down", color: .red, emotions: []),
                Emotion(title: "Mad", color: .red, emotions: [])
            ]),
            Emotion(title: "Bad", color: .green, emotions: [
                Emotion(title: "Bored", color: .green, emotions: [])
            ]),
            Emotion(title: "Disgusted", color: .gray, emotions: []),
            Emotion(title: "Fearful", color: .orange, emotions: []),
            Emotion(title: "Happy", color: .yellow, emotions: []),
            Emotion(title: "Sad", color: .blue, emotions: []),
            Emotion(title: "Surprised", color: .purple, emotions: [])
        ]
        
        self.childStates = self
            .emotions.map(SecondState.init(emotion:))
    }
}

enum FirstAction: Equatable {
    case onAppear
    case setNavigation(childID: UUID?)
    case selectedChild(SecondAction)
}

struct FirstEnvironment {}

extension FirstState {
    static let reducer = Reducer<FirstState, FirstAction, FirstEnvironment>.combine(
        SecondState.reducer.optional().pullback(
            state: \.selectedChild,
            action: /FirstAction.selectedChild,
            environment: { _ in
                SecondEnvironment()
            }
        ),
        Reducer { state, action, environment in
            switch action {
            case .onAppear:
                return .none
                
            case let .setNavigation(childID: .some(childID)):
                state.selectedChild = state.childStates.first(where: { $0.id == childID })
                state.selectedChild?.selectedChild = nil
                return .none
                
            case .setNavigation(childID: .none):
                state.selectedChild = nil
                return .none

            case let .selectedChild(subaction):
                switch subaction {
                    
                case let .setNavigation(childID: .some(childID)):
                    return .none
                case .selectedChild(_):
                    // integrate possible chnages to the state.selectedChild
                    // with the state.childStates
//                    if var child = state.selectedChild,
//                       let index = state.childStates.firstIndex(where: { $0.id == child.id })
//                    {
////                        child.selectedChild = nil
//                        state.childStates[index] = child
//                    }
                    return .none
                case .setNavigation(childID: .none):
                    return .none
                }
            }
        }
    ).debug()
}

[dadixon]

struct FirstView: View {
    let store: Store<FirstState, FirstAction>
    
    struct ViewState: Equatable {
        let selectedChild: SecondState?
//        let childStates: [SecondState]
        let emotions: [Emotion]
        
        init(state: FirstState) {
            self.selectedChild = state.selectedChild
//            self.childStates = state.childStates
            self.emotions = state.emotions
        }
    }
    
    var body: some View {
        WithViewStore(self.store, observe: ViewState.init) { viewStore in
            List {
                ForEach(viewStore.emotions) { emotion in
                    NavigationLink(
                        destination: IfLetStore(
                            self.store.scope(
                                state: \.selectedChild,
                                action: FirstAction.selectedChild
                            )
                        ) {
                            SecondView(store: $0)
                        },
                        tag: emotion.id,
                        selection: viewStore.binding(
                            get: \.selectedChild?.id,
                            send: {
                                FirstAction.setNavigation(childID: $0)
                            }
                        )) {
                            Text(emotion.title)
                        }
                }
            }
            .navigationTitle("The Feelings Circle")
            .onAppear {
                viewStore.send(.onAppear)
            }
        }
    }
}

[dadixon]

This makes a lot of sense. Thank you. I didn’t know the WithViewStore had that feature.