Subview is unnecessarily refreshed

[leiyutinghua]

Description

A change in the State of the superview causes a refresh of the subview

Checklist

• I have determined whether this bug is also reproducible in a vanilla SwiftUI project.
• If possible, I've reproduced the issue using the main branch of this package.
• This issue hasn't been addressed in an existing GitHub issue or discussion.

Expected behavior

Reducer code

struct APPReducer: ReducerProtocol {
    struct State: Equatable {
        var s: Int = 0
        var state1 = APPReducer1.State()
    }
    enum Action: Equatable {
        case action1(APPReducer1.Action)
        case tap
    }
    var body: some ReducerProtocol<State, Action> {
        Reduce { state, action in
            switch action {
            case .tap:
                state.s = Int.random(in: 0..<100)
                return .none
            default:
                return .none
            }
        }
        Scope(state: \.state1, action: /Action.action1) {
            APPReducer1()
        }
    }
}
struct APPReducer1: ReducerProtocol {
    struct State: Equatable {
        var p: Int = 0
    }
    enum Action: Equatable {
        case tap
    }
    var body: some ReducerProtocol<State, Action> {
        Reduce { state, action in
            switch action {
            case .tap:
                state.p = Int.random(in: 0..<100)
                return .none
            }
        }
    }
}

View code

struct ContentView: View {
    let store: StoreOf<APPReducer>
    var body: some View {
        WithViewStore(store, observe: \.s) { viewStore in
            let _ = print("contentView")
            ZStack {
                Color.red
                VStack {
                    View1(store: self.store.scope(state: \.state1, action: APPReducer.Action.action1))
                    Text("ContentView-----\(viewStore.state)")
                }
                
            }
            .onTapGesture {
                viewStore.send(.tap)
            }
        }
    }
}

struct View1: View {
    let store: StoreOf<APPReducer1>
    var body: some View {
        WithViewStore(store, observe: { $0 }) { viewStore in
            let _ = print("View1")
            Text("11  --- \(viewStore.p)")
                .onTapGesture {
                    viewStore.send(.tap)
                }
        }
    }
}

I hope that clicking on ContentView shouldn't cause View1 to refresh, but it does

Actual behavior

I hope that clicking on ContentView shouldn't cause View1 to refresh, but it does

Steps to reproduce

No response

The Composable Architecture version information

No response

Destination operating system

iOS 15

Xcode version information

Xcode 14.2

Swift Compiler version information

No response

[leiyutinghua]

The Composable Architecture version information: 0.48.0 and 0.46.0

[tgrapperon]

Hey @leiyutinghua!
Indeed, it does recompute View1 because store scoping does not produce stable instances yet. So when your ViewStore invalidates, it reruns WithViewStore's body which in turn reruns store.scope…. The instance being new, SwiftUI sees this as a change of View1's dependencies, and reruns its body.

There are a few things you can do to work around the issue right now (if it's problematic in terms of performance). I presented one solution here, so maybe it could help in your case. The quick and dirty solution would be to put your store in View1 in a @State, as this will not invalidate the dependencies on subsequent calls (this is exploiting a specific behavior of @State's assignation in inits).

This side-effect is usually not an issue, but I concur that, ideally, Store.scope should produce stable instances. There are a few edge-case though, and also alternative solutions to the problem, so I can't really say when, nor if, it will come to the library, but in the meantime, using a @State should do the trick.

[mbrandonw]

Hi @leiyutinghua, it is a bummer, but in practice it may not actually lead to problems. We have plans to look into over-renders soon, especially once we can drop iOS 13 support, and we are hopefully that the new Observable stuff being pitched will allow us to dramatically transform how we deal with view stores.

In the meantime you can automate @tgrapperon's suggestion with a little helper view:

struct ScopeStore<ParentState, ParentAction, ChildState, ChildAction, Content: View>: View {
  @State var scopedStore: Store<ChildState, ChildAction>
  let content: (Store<ChildState, ChildAction>) -> Content

  init(
    _ store: Store<ParentState, ParentAction>,
    state: @escaping (ParentState) -> ChildState,
    action: @escaping (ChildAction) -> ParentAction,
    @ViewBuilder content: @escaping (Store<ChildState, ChildAction>) -> Content
  ) {
    self._scopedStore = State(wrappedValue: store.scope(state: state, action: action))
    self.content = content
  }

  var body: some View {
    self.content(self.scopedStore)
  }
}

…which can be used like this:

// View1(store: self.store.scope(state: \.state1, action: APPReducer.Action.action1))
ScopeStore(self.store, action: \.state1, action: APPReducer.Action.action1) { store in 
  View1(store: store)
}

Honestly it's not that different from the current style so it might be worth shipping this tool in TCA.

I'm going to convert this issue to a discussion because I don't think there's anything to immediately solve, but it is something on our minds.

[leiyutinghua]

Thanks, It works