WithViewStore Causes Subview to Re-render on Parent State Update

[WHuangz88]

Hi guys, I just wanted to ask for your opinion—are there any best practices for using WithViewStore to prevent unnecessary re-renders in other split components?

given my code below:

struct ParentStore: ReducerProtocol {
    
    struct State: Equatable {
        @BindingState var text: String = ""
        var childState = SubViewStore.State()
    }
    
    enum Action: BindableAction {
        case binding(BindingAction<State>)
        case childAction(SubViewStore.Action)
    }
    
    var body: some ReducerProtocolOf<Self> {
        BindingReducer()
        Reduce { state, action in
            switch action {
            default:
                return .none
            }
        }
        Scope(state: \.childState, action: /Action.childAction) {
            SubViewStore()
        }
        
    }
    
}

struct SubViewStore: ReducerProtocol {
    
    struct State: Equatable {
        var count = 0
    }
    
    enum Action {
        case increment
    }
    
    var body: some ReducerProtocolOf<Self> {
        Reduce { state, action in
            switch action {
            case .increment:
                state.count += 1
                return .none
            }
        }
    }
    
}
struct TextFieldView: View {
    let store: StoreOf<ParentStore>
    
    var body: some View {
        WithViewStore(store) { viewStore in
            TextField("Text", text: viewStore.$text)
        }
    }
}


struct ParentView: View {
    let store: StoreOf<ParentStore>
    
    var body: some View {
        VStack {
            TextFieldView(store: store)
            SubView(store: self.store.scope(
                state: \.childState,
                action: ParentStore.Action.childAction
            ))
        }
    }
}

struct SubView: View {
    let store: StoreOf<SubViewStore>
    
    var body: some View {
        WithViewStore(self.store) { viewStore in
            VStack {
                Button("Increment") {
                    viewStore.send(.increment)
                }
                Text("\(viewStore.count)")
            }
        }
    }
}

[WHuangz88]

"My alternative approach is to split into another view by not observing the parent view with WithViewStore. However, I'm not sure if this is the best approach. Could there be a better way?"

struct TextFieldView: View {
    let store: StoreOf<ParentStore>
    
    var body: some View {
        WithViewStore(store) { viewStore in
            TextField("Text", text: viewStore.$text)
        }
    }
}


struct ParentView: View {
    let store: StoreOf<ParentStore>
    
    var body: some View {
        VStack {
            TextFieldView(store: store)
            SubView(store: self.store.scope(
                state: \.childState,
                action: ParentStore.Action.childAction
            ))
        }
    }
}

[stephencelis]

@WHuangz88 ViewStore and WithViewStore were deprecated 2 years ago with the introduction of back-ported observation tools, and will be removed in TCA 2.0. Can you use @ObservableState, instead? This should automatically minimize the number of re-renders based on what state is accessed.

[WHuangz88]

Hi @stephencelis is there by any chance, we could minimize the re-render process even still using old implementation?
I am aware regarding the latest implementation, but to support my legacy codebases, is there any proper approach first while porting it to latest implementation step by step

[mbrandonw]

@WHuangz88 Please read the documentation. It repeatedly says to not use WithViewStore as you are and instead provide an observe closure which allows you to determine exactly which state is observed by SwiftUI:

https://pointfreeco.github.io/swift-composable-architecture/0.59.0/documentation/composablearchitecture/performance#View-stores