TabViews and ViewStore.binding issue

[GreatApe]

In a recent discussion the situation where you have a tabview was brought up, because it seemingly makes the use of WithViewStore andobserve: unavoidable, at least if you want to be efficient.

But it seems that even following all the recommendations, we still won't be able to avoid re-rendering all the child views whenever the tab item changes, which seems like a shame. For vanilla SwiftUI the tabs are created once and for all, and not re-rendered when changing tabs. (We might wish for a lazy tabview but apparently that's not what it is).

In the scenario below, the enclosing view, and all the child views, are re-rendered every time you change tabs:

WithViewStore(store, observe: \.viewState) { viewStore in
  TabView(selection: viewStore.binding(get: \.tab, send: Parent.Action.setTab)) {
    ChildView(store: store.scope(state: \.child0, action: Parent.Action.child))
      .tag(0)
    ChildView(store: store.scope(state: \.child1, action: Parent.Action.child))
      .tag(1)
    ChildView(store: store.scope(state: \.child2, action: Parent.Action.child))
      .tag2)
    }
    .tabViewStyle(.page)
  }
}

This seems to be due to using viewStore.binding, because if that is removed and we instead use a local @State var page: Int and $page at the use site, then we get back to standard SwiftUI behaviour.

I wonder if there is another way to avoid the re-rendering, since I'm relying on knowing what tab the user is on.

Here's a full example, ready to run

import SwiftUI
import ComposableArchitecture
import IdentifiedCollections

@main
struct TestingTCAApp: App {
    let store = StoreOf<Parent>(initialState: .init(), reducer: Parent())
    
    var body: some Scene {
        WindowGroup {
            ContentView(store: store)
        }
    }
}

struct Parent: ReducerProtocol {
    struct State: Equatable {
        var tapCount = 0
        var tab: UUID = .init()
        var child0: Child.State = .init(id: .init(), name: "Child 1")
        var child1: Child.State = .init(id: .init(), name: "Child 2")
        var child2: Child.State = .init(id: .init(), name: "Child 3")


        var viewState: ViewState {
            .init(tab: tab, tapCount: tapCount)
        }
    }

    struct ViewState: Equatable {
        let tab: UUID
        let tapCount: Int
    }

    enum Action: Equatable {
        case setTab(UUID)
        case child(Child.Action)
    }

    var body: some ReducerProtocol<State, Action> {
        Reduce { state, action in
            switch action {
                case .child(let childAction):
                    state.tapCount += 1
                    print("PARENT: child action \(childAction), taps: \(state.tapCount)")
                case .setTab(let tab):
                    print("PARENT: tab changed to \(tab)")
                    state.tab = tab
            }

            return .none
        }
    }
}

struct ContentView: View {
    let store: StoreOf<Parent>

//    @State var page: Int = 0

    var body: some View {
        WithViewStore(store, observe: \.viewState) { viewStore in
            let _ = print("Render: Parent")
            VStack {
                Text("Taps: \(viewStore.tapCount)")
                //                let pageBinding = $page
                let pageBinding = viewStore.binding(get: \.tab, send: Parent.Action.setTab)
                TabView(selection: pageBinding) {
                    ChildView(store: store.scope(state: \.child0, action: Parent.Action.child))
                        .tag(0)
                    ChildView(store: store.scope(state: \.child1, action: Parent.Action.child))
                        .tag(1)
                    ChildView(store: store.scope(state: \.child2, action: Parent.Action.child))
                        .tag(2)
                }
                .tabViewStyle(.page)
            }
            .background(.gray)
        }
    }
}

struct Child {
    struct State: Equatable, Identifiable {
        var id: UUID
        var name: String
    }

    enum Action: Equatable {
        case tapped
    }
}

struct ChildView: View {
    let store: Store<Child.State, Child.Action>

    init(store: Store<Child.State, Child.Action>) {
        self.store = store
        print("  Init child")
    }

    var body: some View {
        WithViewStore(store) { viewStore in
            let _ = print("  Render: \(viewStore.name)")
            Button {
                viewStore.send(.tapped)
            } label: {
                Text(viewStore.name)
                    .font(.largeTitle)
            }
            .frame(width: 300, height: 300)
            .border(.black)
            .tag(viewStore.id)
        }
    }
}

[mbrandonw]

@GreatApe It is true that the tabs are re-computed when changing the selected tab, but in practice have you found that to be a performance problem? Changing tabs is a very infrequent action in an application, so I would not expect it to matter.

The main thing that the performance article is trying to explain is that if the root tab observes all state, then any action inside each child feature will cause the tabs to be re-computed. It is not saying that if you properly observe the essentials of state that tabs will not be recomputed when the selected tab changes.

[GreatApe]

Yes, it works perfectly, thanks a lot. Now I can observe the tab selection outside of the view with the tabview, just like i wanted. Even animation works. Fantastic!

[GreatApe]

The only thing is that when I programmatically change the tab from the outside, using animation, only the outside thing that depends on state.selectedTab will animate, not the swipe to the tab. For me that happens to be an advantage, and I suppose it's because we are partly separating the tab that actually controls the binding from state.selectedTab.

[fabstu]

Thanks for trying it out! Good that the re-evaluation of the TabView is avoided.

About the animation.. I don't have much experience with it. Does wrapping the assignment inside the init of CopyValue with withAnimation help? Maybe inside .onChange(of:) as well. It is not the same animation, but who knows :P Just a shot in the dark though.

[GreatApe]

I mean I don't want it to animate the actual tab change, so it's good as it is. But I can try that out just to see.

[GreatApe]

OK, so putting on onChange doesn't do anything, but that one goes in the other direction, right, so it's not expected.
wrapping targetBinding.wrappedValue = sourceBinding.wrappedValue in withAnimation does work though, which is cool, so that is good to know.

Putting .animation on the the content call does also lead to animated swipes, but then it re-renders all the pages again.

[fabstu]

Own opinion:

When adding Text("Page: \(page) to the content view, the whole view gets redrawn. I assume @State is smart in that it knows that it should not re-render the view body, just because a binding is used. It seems to have a mechanism inside the $bindings it emits that allows certain Apple views to listen to changes, be it through a private publisher or through using @Binding inside a sub-view of TabView, that then emits the state change to change the page. When the state variable page is accessed directly the @State knows that it cannot track what was accessed, and so rerenders the body completely.

I think this tracking of "accessed directly at all" is a step between tracking what sub-value was accessed (#1451 (reply in thread)) and the current TCA state of afairs (always re-rerender). We can't implement it directly with our dumb ViewStore binding because we have no way to signal the same way @State can do, so we can only signal a full re-render.

One way to fix it with a hack: use @State as well as viewStore.binding and copy between them so TabView sources its value from the smart Binding from @State.

struct CopyValue<T: Equatable>: View {
  @Binding var sourceBinding: T
  @Binding var targetBinding: T
  
  // Runs every time TCA updates.
  init(sourceBinding: Binding<T>, targetBinding: Binding<T>) {
    self._sourceBinding = sourceBinding
    self._targetBinding = targetBinding
    DispatchQueue.main.async {
      targetBinding.wrappedValue = sourceBinding.wrappedValue
    }
  }
  
  var body: some View {
    let _ = print("Rerendering copy")
    return EmptyView()
      .onChange(of: targetBinding, perform: { newValue in
        sourceBinding = newValue
      })
  }
}

struct ContentView: View {
  let store: StoreOf<Parent>
  
  @State var page: UUID = .init()
  
  var body: some View {
    let _ = print("Render: Parent")
    VStack {
      WithViewStore(store, observe: \.viewState) { viewStore in
        CopyValue(sourceBinding: viewStore.binding(get: \.tab, send: Parent.Action.setTab), targetBinding: $page)
        Text("Taps: \(viewStore.tapCount)")
      }
      let pageBinding = $page
//    Text("page: \(pageBinding.wrappedValue)")
      TabView(selection: pageBinding) {
        ChildView(store: store.scope(state: \.child0, action: Parent.Action.child))
          .tag(0)
        ChildView(store: store.scope(state: \.child1, action: Parent.Action.child))
          .tag(1)
        ChildView(store: store.scope(state: \.child2, action: Parent.Action.child))
          .tag(2)
      }
    }
    .background(.gray)
  }
}

Update 1:

If we could only create smart bindings ourselves.. maybe ask Apple to provide their mechanism to signal to TabView and similar that the binding changed, without having to re-evaluate the view body. Then we can create smarter bindings.

I assume they use .transaction, .update() and similar, but I was not able to make it work.

Crazy idea: Use @State instead of @ObservedObject inside WithViewStore and emit from that semi-intelligent bindings for views like TabView from the dynamic lookup from ViewStore. Could also check, whether @ObservedObject emits semi-intelligent bindings..

Update2:

We can create a custom binding property wrapper using DynamicProperty, that we can pass to other views, but I do not know of a way to create an intelligent binding yet without resorting to @State to be detected by TabView.

Update 3:

We can create bindings that can update a TabView without rerendering. in fact, any Binding can. We just have to set the value on the Binding that is passed into TabView. Nah, just an artifact of testing..

[GreatApe]

Interesting workaround, thank you for the input. In my case I think I will only really need to observe the page from my root reducer, I probably won't need to control it. And when I do, it's not for an animation anyway, so reloading everything could be fine. So it seems I could probably get away with one-way copying, and avoid the nasty DispatchQueue.main.async!

The worst part of this tabview issue is that for some unrelated reason my app breaks if i use LazyVStack in the individual pages, so in effect I need to reload every cell on every page whenever the user swipes to another page!

[GreatApe]

If tabview was lazy this also wouldn't be such a big issue.

[GreatApe]

The paged tabview is so central to my ui, so I will have to find a solution for this. Perhaps i can make it work by implementing a wrapper view to the TabView and put a @State there or something.

[fabstu]

Yeah, makes sense.

Try the following wrapper. I wonder, whether we could wrap more ViewStore access through a @State...

  WithIntelligentBinding(store: store, get: \.tab, send: Parent.Action.setTab) {
    TabView(selection: $0) {
      ChildView(store: store.scope(state: \.child0, action: Parent.Action.child))
        .tag(0)
      ChildView(store: store.scope(state: \.child1, action: Parent.Action.child))
        .tag(1)
      ChildView(store: store.scope(state: \.child2, action: Parent.Action.child))
        .tag(2)
    }
  }

struct WithIntelligentBinding<Value: Equatable, ViewState: Equatable, ViewAction, Content: View>: View {
  @State var value: Value
  
  let store: Store<ViewState, ViewAction>
  var get: (ViewState) -> Value
  var send: (Value) -> ViewAction
  var content: (Binding<Value>) -> Content
  
  init(
    store: Store<ViewState, ViewAction>,
    get: @escaping (ViewState) -> Value,
    send: @escaping (Value) -> ViewAction,
    content: @escaping (Binding<Value>) -> Content
  ) {
    self.store = store
    self.get = get
    self.send = send
    self.content = content
    
    // Initial value.
    self._value = .init(initialValue: get(ViewStore(store).state))
  }
  
  var body: some View {
    WithViewStore(store.scope(state: get)) { viewStore in
      CopyValue(sourceBinding: viewStore.binding(get: { $0 }, send: send), targetBinding: self.$value)
    }
    self.content($value)
  }
}

struct CopyValue<T: Equatable>: View {
  @Binding var sourceBinding: T
  @Binding var targetBinding: T
  
  // Runs every time TCA updates.
  init(sourceBinding: Binding<T>, targetBinding: Binding<T>) {
    self._sourceBinding = sourceBinding
    self._targetBinding = targetBinding
    DispatchQueue.main.async {
      targetBinding.wrappedValue = sourceBinding.wrappedValue
    }
  }
  
  var body: some View {
    return EmptyView()
      .onChange(of: targetBinding, perform: { newValue in
        sourceBinding = newValue
      })
  }
}