How to best isolate spinning pickers from view updates

[ryanbooker]

I'm working on a view that uses picker wheels to select some values and uses those values in a calculation (assume it has to be picker wheels, and not any other picker variety).

If I build this the naive way using SwiftUI, any spinning picker wheels will reset to their last selection value, if the view updates. e.g. if both wheels are spinning, when one picker stops the answer is calculated and any other spinning pickers snap back.

I have a demo solution, but I'd like to know if there is a better way, as it seems awful. Am I missing a nicer way to achieve the same outcome?

e.g.

struct ContentState: Equatable {
    @BindableState var a = 0
    @BindableState var b = 0

    var answer = 0
}

enum ContentAction: BindableAction {
    case binding(BindingAction<ContentState>)
}

let contentReducer = Reducer<ContentState, ContentAction, Void> { state, action, _ in
    switch action {
    case .binding:
        state.answer = state.a + state.b
        return .none
    }
}
.binding()

struct ContentView: View {
    let store: Store<ContentState, ContentAction>

    var body: some View {
        VStack {
            WithViewStore(store.scope(state:\.answer)) { viewStore in
                Text(viewStore.state, format: .number)
            }

            WithViewStore(
                store.scope(
                    state: \.$a,
                    action: ContentAction.binding
                )
            ) { viewStore in
                Picker(
                    "A",
                    selection: viewStore.binding(
                        get: \.wrappedValue,
                        send: { .set(\.$a, $0) }
                    )
                ) {
                    ForEach(0...1000, id: \.self) {
                        Text($0, format: .number)
                    }
                }
            }

            WithViewStore(
                store.scope(
                    state: \.$b,
                    action: ContentAction.binding
                )
            ) { viewStore in
                Picker(
                    "B",
                    selection: viewStore.binding(
                        get: \.wrappedValue,
                        send: { .set(\.$b, $0) }
                    )
                ) {
                    ForEach(0...1000, id: \.self) {
                        Text($0, format: .number)
                    }
                }
            }
        }
        .pickerStyle(.wheel)
    }
}

Any pointers greatly appreciated. :)

[lukeredpath]

Why do you think this is awful?

The correct way to isolate state changes from unrelated parts of the view is to divide your view up and scope down the observed view state which is exactly what you're doing here.

You could clean this up by extracting child views for each picker and initialise them with a scoped store and move the WithViewStores to the body of the new child view.

Don't be afraid to break your views and state up into smaller components - there isn't usually a performance penalty for doing so (it can often help with performance) and decomposing your views in this way is an encouraged design pattern with SwiftUI and TCA gives you the tools to support this approach.

[ryanbooker]

The ugliness of the scopes is all I was not happy with. So I wanted to know if there was a better way/already abstracted way of scoping the individual bindable state values. The structure of the view would almost certainly have been broken up in the real version. My query was really just about the scoping. I could have been clearer. Thanks. :)

[iampatbrown]

Hey Ryan,

This is a cool example showing how scoping can be used to better control view updates :)

but I'd like to know if there is a better way

Depending on your needs, one option could be to extract the Picker to a helper function

func picker<Content: View>(
  _ title: String, store: Store<Int, Int>, @ViewBuilder content: @escaping () -> Content
) -> some View {
  WithViewStore(store) { viewStore in
    Picker(title, selection: viewStore.binding(send: { $0 }), content: content)
  }
}

Then instead of scoping to \.$a and .binding you could scope directly to state: \.a, action: { .set(\.$a, $0) }. Resulting in the following:

picker("A", store: store.scope(state: \.a, action: { .set(\.$a, $0) })) {
  ForEach(0...1000, id: \.self) {
    Text($0, format: .number)
  }
}

If you intended to do this frequently, you could add some extensions to Store and ViewStore to make it easier to create scopes and bindings, eg:

extension Store where Action: BindableAction, Action.State == State {
  func scope<Value: Equatable>(
    binding keyPath: WritableKeyPath<State, BindableState<Value>>
  ) -> Store<Value, Value> {
    self.scope(state: { $0[keyPath: keyPath].wrappedValue }, action: { .set(keyPath, $0) })
  }
}

extension ViewStore where State == Action {
  func binding() -> Binding<State> { self.binding(send: { $0 }) }
}

Which would let you do this:

WithViewStore(store.scope(binding: \.$a)) { viewStore in
  Picker("A", selection: viewStore.binding()) {
    ForEach(0...1000, id: \.self) {
      Text($0, format: .number)
    }
  }
}

Hope that helps a little bit.

[ryanbooker]

This is great, thanks. I especially like the extensions approach. Hiding the scoping was essentially what I was after. Thanks! :)

[iampatbrown]

No worries :) You could hide it all inside WithViewStore if you wanted to as well:

extension WithViewStore where Content: View {
  init<GlobalState, GlobalAction: BindableAction>(
    _ store: Store<GlobalState, GlobalAction>,
    binding keyPath: WritableKeyPath<GlobalState, BindableState<State>>,
    @ViewBuilder content: @escaping (Binding<State>) -> Content
  ) where GlobalAction.State == GlobalState, State == Action, State: Equatable {
    let store = store.scope(
      state: { $0[keyPath: keyPath].wrappedValue },
      action: { .set(keyPath, $0) }
    )
    self.init(store) { content($0.binding(send: { $0 })) }
  }
}

WithViewStore(store, binding: \.$a) { $selection in
  Picker("A", selection: $selection) {
    ForEach(0...1000, id: \.self) {
      Text($0, format: .number)
    }
  }
}

[briank2-95]

Apparently you don't have to do any low-level coding ... you can solve the issue of multiple wheel Pickers by placing each individual Picker in its own top-level View. Here's a code snippet that illustrates the difference (if you spin multiple Pickers simultaneously in the top grouping, then run the same test with the bottom grouping).

import SwiftUI

struct FiftySpinner: View {
    @State var value: Int = 0
    
    var body: some View {
        Picker("", selection: $value) {
            ForEach (0..<51) {
                Text("\($0)")
            }
        }
    }
}

struct ContentView: View {
    @State var value1: Int = 0
    @State var value2: Int = 0
    @State var value3: Int = 0
    
    var body: some View {
        VStack {
            HStack {
                Picker("", selection: $value1) {
                    ForEach (0..<51) {
                        Text("\($0)")
                    }
                }
                .pickerStyle(.wheel)
                
                Picker("", selection: $value2) {
                    ForEach (0..<51) {
                        Text("\($0)")
                    }
                }
                .pickerStyle(.wheel)
                
                Picker("", selection: $value3) {
                    ForEach (0..<51) {
                        Text("\($0)")
                    }
                }
                .pickerStyle(.wheel)
            }
            Text("Within Same View")
            Divider().background(.black).padding(EdgeInsets(top: 20, leading: 0, bottom: 20, trailing: 0))
            Text("Within Different Views")
            HStack {
                FiftySpinner()
                    .pickerStyle(.wheel)
                FiftySpinner()
                    .pickerStyle(.wheel)
                FiftySpinner()
                    .pickerStyle(.wheel)
            }
        }
    }
}

#Preview {
    ContentView()
}