Performance issue for List with SwitchStore

[takehilo]

Our project uses List and ForEachStore.
Each row of the List consists of various types of views, which are implemented using SwitchStore.

However, this implementation causes scrolling to become choppy/laggy as the number of rows increases due to paging.
Are we implementing it the wrong way?

// List view
import SwiftUI
import ComposableArchitecture

struct ListView: View {
    let store: Store<ListCore.State, ListCore.Action>
    @ObservedObject private var viewStore: ViewStore<ListViewState, ListCore.Action>

    init(store: Store<ListCore.State, ListCore.Action>) {
        self.store = store
        self.viewStore = ViewStore(store.scope(state: \.viewState))
    }

    var body: some View {
        List {
            ForEachStore(
                store.scope(
                    state: \.items,
                    action: ListCore.Action.item(id:action:))) {
                ItemView(store: $0)
            }
        }
        .onAppear {
            viewStore.send(.onAppear)
        }
    }
}

// Item view
import SwiftUI
import ComposableArchitecture

struct ItemView: View {
    let store: Store<ItemCore.State, temCore.Action>
    @ObservedObject private var viewStore: ViewStore<ItemCore.State, ItemCore.Action>

    init(store: Store<ItemCore.State, ItemCore.Action>) {
        self.store = store
        self.viewStore = ViewStore(store)
    }

    var body: some View {
        SwitchStore(store) {
            CaseLet(
                state: /ItemCore.State.type1,
                action: ItemCore.Action.type1
            ) {
                Type1View(store: $0)
            }
            CaseLet(
                state: /ItemCore.State.type2,
                action: ItemCore.Action.type2
            ) {
                Type2View(store: $0)
            }
            ...
            Default {
                EmptyView()
            }
        }
        .onAppear {
            viewStore.send(.onAppear)
        }

        SwitchStore(store) {
            CaseLet(
                state: /ItemCore.State.type10,
                action: ItemCore.Action.type10
            ) {
                Type10View(store: $0)
            }
            CaseLet(
                state: /ItemCore.State.type11,
                action: ItemCore.Action.type11
            ) {
                Type11View(store: $0)
            }
            ...
            Default {
                EmptyView()
            }
        }
        .onAppear {
            viewStore.send(.onAppear)
        }
    }
}

enum ItemCore {
    enum State: Equatable, Identifiable {
        case type1(Type1Core.State)
        case type2(Type2Core.State)
        ...
        case type10(Type10Core.State)
        case type11(Type11Core.State)

        var id: ItemId {
            switch self {
            case .type1(let state):
                return state.id
            case .type2(let state):
                return state.id
            ...
            }
        }
    }

    enum Action: Equatable {
        case onAppear
        case type1(Type1Core.Action)
        case type2(Type2Core.Action)
        ...
    }
}

import ComposableArchitecture

enum ListCore {
    struct State: Equatable {
        var items: IdentifiedArrayOf<temCore.State> = []
        let viewState = ListViewState()
        var nextCursor: String?
    }

    enum Action {
        case onAppear
        case item(id: ItemId, action: ItemCore.Action)
        case fetchItemsResponse(Result<ItemsEntity, APIError>)
    }

    struct Environment {
        let itemRepository: ItemRepository
    }

    static let reducer = Reducer<State, Action, Environment>.combine(
        .init { state, action, environment in
            func fetchItems() -> Effect<Action, Never> {
                environment.itemRepository
                    .fetchItems(cursor: state.nextCursor)
                    .catchToEffect(Action.fetchItemsResponse)
            }

            switch action {
            case .onAppear:
                return fetchItems()
            case .fetchItemsResponse(.success(let entity)):
                state.nextCursor = entity.nextCursor
                let newItems = IdentifiedArrayOf<ItemCore.State>(entities: entity.items)
                newItems.forEach {
                    state.items.append($0)
                }
                return .none
            case let .item(id, .onAppear):
                if id == state.items.last?.id {
                    // loads next page
                    return fetchItems()
                }
                return .none
            default:
                return .none
            }
        }
    )
}

[natemann]

Why do you have two switchStores in you view?

[stephencelis]

It looks like they're switching over an enum with many cases and SwitchStore currently maxes out at an arity of 9.

[stephencelis]

@takehilo This could be an issue with observing too much state. In this initializer:

init(store: Store<ListCore.State, ListCore.Action>) {
    self.store = store
    self.viewStore = ViewStore(store.scope(state: \.viewState))
}

It's not clear what is contained in \.viewState, but whenever that changes the entire List will be recomputed.

Another place where more state appears to be observed than necessary is at the item level:

let store: Store<ItemCore.State, temCore.Action>
@ObservedObject private var viewStore: ViewStore<ItemCore.State, ItemCore.Action>

init(store: Store<ItemCore.State, ItemCore.Action>) {
    self.store = store
    self.viewStore = ViewStore(store)
}

In the body of this view the view store only appears to be sent actions and does not access state at all. If this is the case, you should then be able to use a stateless view store instead:

-@ObservedObject private var viewStore: ViewStore<ItemCore.State, ItemCore.Action>
+@ObservedObject private var viewStore: ViewStore<Void, ItemCore.Action>
 ...
-self.viewStore = ViewStore(store)
+self.viewStore = ViewStore(store.stateless)

[takehilo]

Thanks @stephencelis .
I tried the code you suggested but the issue still remains.
ListView and ItemView are not recomputed when scrolling but TypeXView is.
The issue is related to List's reusable cells, I guess.

I'll continue to resolve this issue. Any help would be greatly appreciated.