View re-rendering with TabBar

[kashinios]

Hi, I am trying to resolve an issue with view re-rendering.

I expect that ALL my views inside TabView will be re-rendered for each state change. For example, if HomeFeature makes some changes in its state, ProfileView and HistoryView are re-rendering too. It's happened because my State in RootFeature contains all states for creating a TabView, but all views re-rendering affects the performance in my app and I don't need this extra load.
Is there any different way to deal with TabView to avoid re-rendering screens unrelated to state updating? Maybe it's another implementation, etc.

Code looks like this:

`
@Reducer
struct RootFeature {
struct State: Equatable {
var homeTab = HomeFeature.State()
var historyTab = HistoryFeature.State()
var profileTab = ProfileFeature.State()

    var currentTab: Tab = .homeTab
}

enum Action {
    case homeTabSelected(HomeFeature.Action)
    case historyTabSelected(HistoryFeature.Action)
    case profileTabSelected(ProfileFeature.Action)
    case tabChanged(Tab)
}

enum Tab {
    case homeTab
    case historyTab
    case profileTab
}

var body: some ReducerOf<Self> {
    Reduce { state, action in
        switch action {
        case .homeTabSelected:
            return .none
        case .historyTabSelected:
            return .none
        case .profileTabSelected:
            return .none
        case .tabChanged(let selectedTab):
            state.currentTab = selectedTab
            return .none
        }
    }
    Scope(state: \.homeTab, action: \.homeTabSelected) {
        HomeFeature()
    }
    Scope(state: \.historyTab, action: \.historyTabSelected) {
        HistoryFeature()
    }
    Scope(state: \.profileTab, action: \.profileTabSelected) {
        ProfileFeature()
    }
}

}

struct RootView: View {
@Perception.Bindable var store: StoreOf

var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
        TabView(
            selection: viewStore.binding(
                get: \.currentTab,
                send: RootFeature.Action.tabChanged
            )
        ) {
            HomeView(
                store: store.scope(
                    state: \.homeTab,
                    action: \.homeTabSelected
                )
            )
            
            .tabItem {
                Label(
                    RootFeature.Tab.homeTab.title,
                    systemImage: RootFeature.Tab.homeTab.systemImage
                )
            }
            .tag(RootFeature.Tab.homeTab)
            
            HistoryView(
                store: store.scope(
                    state: \.historyTab,
                    action: \.historyTabSelected
                )
            )
            .tabItem {
                Label(
                    RootFeature.Tab.historyTab.title,
                    systemImage: RootFeature.Tab.historyTab.systemImage
                )
            }
            .tag(RootFeature.Tab.historyTab)
            
            ProfileView(
                store: store.scope(
                    state: \.profileTab,
                    action: \.profileTabSelected
                )
            )
            .tabItem {
                Label(
                    RootFeature.Tab.profileTab.title,
                    systemImage: RootFeature.Tab.profileTab.systemImage
                )
            }
            .tag(RootFeature.Tab.profileTab)
        }
        .accentColor(.newMain)
        
        .onAppear() {
            UITabBar.appearance().backgroundColor = .black
        }
    }
}

}
`

[mbrandonw]

Hi @kashinios, you are observing state here:

WithViewStore(self.store, observe: { $0 }) { viewStore in

And that line says to observe all state changes. So even though all you need is currentTab, you are actually observing all the state changes in the tabs too.

Luckily the view store stuff has been deprecated for nearly a full year, ever since we released 1.7. Is there a reason you are using the view store?

[kashinios]

Due to security rules, I can't share my code, so this example was created with gpt, and I missed this line of code - @Perception.Bindable var store: StoreOf. It's actually for the newest TCA versions.
In my case, the app is in production over the year and due to our team priorities, we don't have time to create a migration. So we use version 1.1.0, and WithViewStore is actual.
I would appreciate if you could point out the best improvements in newer versions to help me decide on migration.

Thanks for your point about observability only selectedTab. It completely covers my problem.

[mbrandonw]

I would appreciate if you could point out the best improvements in newer versions to help me decide on migration.

You can read the migration guide for 1.7 to see what it offers. As well as all of the other migration guides.

Thanks for your point about observability only selectedTab. It completely covers my problem.

You can always read the docs for version 1.1 here. That has all the information you need to correctly wield the ViewStore tool.