Not sure if this a bug or a problem with how I've done things

[grangej]

I am going around in circles and not sure if this is behaving the way it should be:

• I have a fairly complex app and some but lets simplify as the following:

[AppReducer]
[tab1Reducer, tab2Reducer , tab3Reducer, tab4Reducer]
[tab1Presented]
[tab1PresentedPresented]

On tab1PresentedPresented I have a search field that is to filter some results. the problem is that it seems to trigger a complete refresh of the entire app structure. All tabs are refreshed. This causes tab1PresentedPresented to be reconstructed and is dismissing the keyboard / causing crash when embedded in a NavigationView.

The only state that was manipulated was tab1PresentedPresented, no other states were changed.

If I don't have tab1Presented combine tab1PresnetedPresented reducer the problem goes away but of course state for tab1PresentedPresented doesn't update since the reducer is not actually created / held onto.

---

• Some other notes, tab4 also has a navigationLink to a similar search / filter view. This works without issue :(
• I attempted to re-create this with native swiftui code (observableObject / stateObject) but was not able to reproduce the problem. The search works the updates still happen based on the search.

[siejkowski]

If possible, provide the source code (or at least a subset of it) so we could help with spotting the problem :)

Without the source code, my best guess is that if the entire app structure is recreated, the most probable explanation is that you're observing the whole app state everywhere.

In other words, you are using either WithViewStore or @ObservedObject var viewStore created from the whole AppStore. However, you most probably do not need to have all your app refreshed on any change.

You can control what views are refreshed by scoping the AppStore to only a subset of state and actions that the particular view needs. Then this view is refreshed only when the subset of state changes.

Please consult the https://github.com/pointfreeco/swift-composable-architecture/blob/main/Examples/CaseStudies/SwiftUICaseStudies/01-GettingStarted-Composition-TwoCounters.swift to see the basics of how to scope the app store to smaller stores so that the views are refreshed independently.

[grangej]

First, thank you for your response :D

I will try to provide the relevant source here, and if needed perhaps offline?

I have included the views, all reducers are combined all the way up to the main app reducer (as I thought was expected?) All sub views are scoped I believe correctly.

Main App

....
    let appStore: Store<AppState, AppAction> = Store(initialState: AppState(), reducer: appReducer, environment: AppEnvironment.live)

    var body: some Scene {
        WindowGroup {
            WithViewStore(self.appStore) { viewStore in
                if viewStore.signInStatus.isSignedIn {
                    MainAppView(store: appStore).environmentObject(sheetManager)
                } else {
                    LandingView(store: appStore).environmentObject(sheetManager)
                }
            }
        }
    }

struct MainAppView: View {

    let store: Store<AppState, AppAction>

    var body: some View {
        WithViewStore(self.store) { viewStore in
            TabView {
                NavigationView {
                    CompetitionsListView(store: self.store.scope(state: { $0._competitionsListViewState }, action: AppAction.competitionsListAction))
                }.tabItem { Image(systemName: "house.fill") }
                NavigationView {
                    Tab2View(store: self.store.scope(
                        state: { $0._tab2State },
                        action: AppAction.tab2ViewAction
                      ))
                }.tabItem { Image(systemName: "arrow.clockwise") }
                NavigationView {
                    Text("Notifications")
                }.tabItem { Image(systemName: "bell.fill") }
                NavigationView {
                    IfLetStore(self.store.scope(state: { $0._profileState}, action: AppAction.profileAction), then: ProfileView.init(store:))
                }.tabItem { Image(systemName: "gearshape") }
            }.addPartialSheet()
        }
    }
}

/// CompetionListView
                   WithViewStore(store) { viewStore in ...
                    ....
                    case .create:
                        NavigationView {
                            IfLetStore(
                                self.store.scope( state: { $0.createCompetitionState}, action: CompetitionsListAction.createCompetitionAction ),
                                then: CreateCompetitionView.init(store:)
                            )
                        }.addPartialSheet(style: .minimalStyle()).environmentObject(partialSheetManager)
                    }
```

```
      /// CompetitionCreateView
               WithViewStore(store) { viewStore in ...
                case .inviteFriends:
                    NavigationView {
                        IfLetStore(self.store.scope(state: { $0.inviteFriendsState}, action: CreateCompetitionAction.inviteFriendsAction), then: InviteFriendsView.init(store:))
                    }
```

```
/// This is where the problem happens, when tapping a key in the search view it will cause everything to refresh even though only the InviteFriendsState is changed (no other state in the app is changed per the debug output.
struct InviteFriendsView: View {
    let store: Store<InviteFriendsState, InviteFriendsAction>

    public init(store: Store<InviteFriendsState, InviteFriendsAction>) {
        self.store = store
    }

    public var body: some View {
        WithViewStore(store) { viewStore in

            ScrollView {
                LazyVStack(alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/, spacing: 20, pinnedViews:
                            [
                                .sectionHeaders
                            ],
                           content: {
                            Section(header: SearchView(text: viewStore.binding(get: { $0.searchText }, send: InviteFriendsAction.searchTextDidChange))) {
                                ForEachStore(self.store.scope(state: { $0.results },
                                                              action: InviteFriendsAction.friendItemAction(id:action:)),
                                             content: InviteFriendsItemView.init(store:))
                            }

                           }).padding()
            }.navigationBarItems(trailing:
                Button(action: {
                    viewStore.send(.savePressed)
                }, label: {
                    Text("Save")
                })
            )

            .navigationTitle(viewStore.title).onAppear(perform: {
                viewStore.send(.onAppear)
            })
        }
    }
}
```

[grangej]

To be clear , or perhaps I don't understand something , if AppState is not changed it should not cause a refresh of anything ? body of withViewStore should only be refreshed when the appropriate state for that view store is changed yes?

[mbrandonw]

As @siejkowski pointed out, this is an issue with observing more state than you actually need, and it's a problem that plagues vanilla SwiftUI applications as much as TCA applications.

Any time you use WithViewStore you are observing the entirety of the state that the store holds onto. You can use this as an opportunity to chisel away at the unneeded state and only leave behind what you actually use. For example, you first WithViewStore usage could be simplified to this:

            WithViewStore(self.appStore.scope(state: \.signInStatus)) { viewStore in
                if viewStore.isSignedIn {
                    MainAppView(store: appStore).environmentObject(sheetManager)
                } else {
                    LandingView(store: appStore).environmentObject(sheetManager)
                }
            }

That would guarantee that this view code is re-evaluated only when the signInStatus changes.

Further, the usage of WithViewStore in InviteFriendsView can also be simplified by introducing a ViewState that holds onto only the data needed for the view:

struct InviteFriendsView: View {
  ...
  struct ViewState: Equatable {
    let searchText: String
    let title: String
    init(state: InviteFriendsState) {
      self.searchText = state.searchText
      self.title = state.title
    }
  }

  public var body: some View {
    WithViewStore(store.scope(state: ViewState.init)) { viewStore in
    }
  }
}

This will prevent the view from being re-evaluated until either searchText or title mutate.

It's also worth mentioning that this problem definitely does affect vanilla SwiftUI views, including using @ObservedObject and @StateObject. Just paste the code below into a fresh project and see that the ContentView's body property is recomputed after every little state mutation, even if it is just happening in a single tab:

class VM: ObservableObject {
  @Published var searchText: String = ""
  @Published var tabIndex = 0
}

struct ContentView: View {
  @ObservedObject var vm: VM

  var body: some View {
    let _ = print("ContentView")
    TabView.init(selection: self.$vm.tabIndex) {
      NavigationView {
        let _ = print("Tab 0")
        Tab0View(text: self.$vm.searchText)
      }
      .tabItem { Text("One") }
      .tag(0)

      NavigationView {
        let _ = print("Tab 1")
        Text("Tab 1")
      }
      .tabItem { Text("Two") }
      .tag(1)

      NavigationView {
        let _ = print("Tab 2")
        Text("Tab 2")
      }
      .tabItem { Text("Three") }
      .tag(2)
    }
  }
}

struct Tab0View: View {
  @Binding var text: String

  var body: some View {
    Form {
      Text("Tab 0")
      TextField("Test", text: self.$text)
    }
  }
}

[grangej]

I tried the change in app state but this didn't seem to help.

As for the InviteFriendsView, isn't this already scoped by the parent store.scope? The issue is that when textfield is modified it does indeed mutate the state, which then in this cases the keyboard to dismiss on every keystroke, and also causes a crash somewhere in the swiftui code. Again this doesn't happen in the similar case where the search / filter view is pushed onto the stack under the profile tab. I'm kinda grasping at straws at this point cause I for the life of me can not see what might be different. What I know is:

• it works in the case of profile
• it doesn't work in this case where it is presented.
• creating a somewhat simplistic version of the same flow using strictly vanilla swift doesn't exhibit this behavior.
• replacing the viewStore.bindable with a @State object doesn't exhibit this behavior
• replacing the viewStore.bindable with a vanilla @ObservedObject doesn't exhibit this behavior.
• replacing the withViewStore with a copy of the viewStore held by the view still has the same issue.

More or less any mutation of the InviteFriendsViewState causes this problem.

[mbrandonw]

As for the InviteFriendsView, isn't this already scoped by the parent store.scope?

It is, and it may not be completely necessary to introduce ViewState for it. I think I actually confused myself when reading your code. Leaving InviteFriendsView as-is is probably innocent enough, but there is definitely a potential issue with this:

/// CompetitionCreateView
WithViewStore(store) { viewStore in ...
  case .inviteFriends:
    NavigationView {
      IfLetStore(
        self.store.scope(
          state: { $0.inviteFriendsState},
          action: CreateCompetitionAction.inviteFriendsAction
        ),
        then: InviteFriendsView.init(store:)
      )
    }

This is observing the store but then never actually using anything from the observation. You could just delete the entire WithViewStore wrapper and it should continue working the same, and that could help alleviate some SwiftUI glitchy-ness of over-rendering the NavigationView.

• replacing the viewStore.bindable with a @State object doesn't exhibit this behavior
• replacing the viewStore.bindable with a vanilla @ObservedObject doesn't exhibit this behavior.

These comparisons are only fair if you replace the root state of the entire application with @State or @ObservedObject and pass along projections into sub-state all the way through to the child. The crux of the problem is that small child mutations are causing the entirety of the application to re-render, causing SwiftUI to glitch-out.

I am almost certain the advice I gave above will solve these problems, but it's hard to go into detail without seeing a standalone project that reproduces the issue. Can you share enough code that demonstrates the problem and such that I can run it locally?

I missed this comment from before:

To be clear , or perhaps I don't understand something , if AppState is not changed it should not cause a refresh of anything ? body of withViewStore should only be refreshed when the appropriate state for that view store is changed yes?

Yes, that is correct. However, as I mentioned before, your WithViewStore's are observing a lot more state than is necessary, and so the body for those views is going to be called more than you expect.

[grangej]

Ah sorry didn't mean to confuse with my snips, there is actually a lot more to the create view that does indeed use the view store. I will see about creating a something tomorrow as standalone app that reproduces the problem and post here.

[mbrandonw]

Also I’m going to transfer this issue to the discussions tab of the repo because I think it’ll be more appropriate there.

[wes-nz]

Hi @mbrandonw,

First, thank you for taking the time to help everyone around TcA, much appreciated.

I am posting on this thread as I am hitting the same problem. Changing one property of the state reloads every single view. Your suggestion WithViewStore(self.appStore.scope(state: \.signInStatus)) helped until the view has been displayed once.

To make the discussion easier I've created 2 example projects. Both are based on the episode 147 with a CounterView and a ProfileView. One using TcA where the profile view reloads every time the counter is increased or decreased. The second one based on wrapping the store inside a CurrentValueSubject where each view only subscribes to specific properties of the state. The latter fixes the reload issue.

You can download the projects here

I experience the same issue with vanilla SwiftUI with @ObservedObject hence I moved towards CurrentValueSubject . It is unlikely an issue with most apps, unfortunately I see a major drop in performance in my case where reloading a SceneKit view is very expensive. I will refactor my code and mimic isowords example and see if it helps.

I am very curious to hear your thoughts on this.

Thanks!

[grangej]

@wes-nz I was actually able to resolve this after looking at some of the more advanced examples, I re-factored the code using a struct inside the views called "ViewState" this would contain only items needed for exactly this view. I would then scope to the ViewState loading from the the main state in all cases. This helped make things a bit more logical and easier to maintain. Hope this helps!

[wes-nz]

@grangej thanks for the update. The example I linked is using scoped view state, it does make things easier to manage but doesn't prevent the reloads unfortunately.

[grangej]

Not sure without looking at the code , the reloads definitely stopped after all my refactor work 🤷‍♂️

[grangej]

To be clear what I did was this, in every instance of store being used:

`
extension SomeState {
var someView: SomeView.ViewState {
return SomeView.ViewState(someStateVar: self.someStateVar)
}
}
struct SomeView: View {

struct ViewState: Equatable {

         var someStateVar: String
}

let store: Store<SomeState, SomeAction>

var body: some View {
    WithViewStore(store.scope(\.someView)) { viewStore in
          // viewStore.someStateVar....
    }
}

`

[wes-nz]

Right, that's not what I've done. I will try that and report back. Thanks a lot!

[grangej]

A key is that I had to make sure I did this all the way back to the root view / store. Since a change in a child state held by the root store would of course cause the root view to reload and all nested views, so even if you fix the child view it would still reload. John

…

On May 30, 2021, 1:32 PM -0700, Wes ***@***.***>, wrote: I see, it's not what I've done. I will try that and report back. Thanks a lot! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[mbrandonw]

@wes-nz I've been able to reproduce the behavior you are seeing, and even with a ViewState struct for TcaContentView I see the profile's body being computed even when that profile isn't selected. This also happens with vanilla SwiftUI, so it really seems like bug with TabView. It would probably be best to file a feedback with Apple.

However, even with that bug there are ways to work around. Rather than wrapping the entire view in a WithViewStore that holds onto the two pieces of state you need, you could wrap each tab in a view store that holds onto state important for just that tab:

struct TcaContentView: View {
  let store: Store<AppState, AppAction>

  var body: some View {
    TabView {
      WithViewStore(self.store.scope(state: \.count)) { viewStore in
        TcaCounterView(
          ...
        )
        .tabItem { Text("Counter \(viewStore.state)") }
      }

      WithViewStore(self.store.scope(state: \.favorites.count)) { viewStore in
        TcaProfileView(
          ...
        )
        .tabItem { Text("Profile \(viewStore.state)") }
      }
    }
  }
}

That fixes the problem you are seeing in the toy TCA app and may help you with your real app.

[wes-nz]

@grangej @mbrandonw Thanks to both of you for your help, it's sorted.

Both methods work, either multiple WithViewStore or custom ViewState with @ObservedObject.

If anyone stumble on this thread, here is an example.

struct TcaProfileView: View {

    let store: Store<ProfileState, ProfileAction>
    @ObservedObject var viewStore: ViewStore<ViewState, ProfileAction>

    // only list the properties the view should listen to
    struct ViewState: Equatable {
        var favorites: Set<Int> = []
        init(state: ProfileState) {
            self.favorites = state.favorites
        }
    }

    init(store: Store<ProfileState, ProfileAction>) {
        self.store = store
        self.viewStore = ViewStore(store.scope(state: ViewState.init))
    }

    var body: some View {
        List {
            ForEach(viewStore.favorites.sorted(), id: \.self) { number in
                HStack {
                    Text("\(number)")
                    Spacer()
                    Button("Remove") {
                        viewStore.send(.removeButtonTapped(number))
                    }
                }
            }
        }
    }
}

or

struct TcaProfileView: View {

    let store: Store<ProfileState, ProfileAction>

    struct ViewState: Equatable {
        var favorites: Set<Int> = []
        init(state: ProfileState) {
            self.favorites = state.favorites
        }
    }

    var body: some View {
        WithViewStore(self.store.scope(state: ViewState.init)) { viewStore in
            List {
                ForEach(viewStore.favorites.sorted(), id: \.self) { number in
                    HStack {
                        Text("\(number)")
                        Spacer()
                        Button("Remove") {
                            viewStore.send(.removeButtonTapped(number))
                        }
                    }
                }
            }
        }
    }
}

I would probably rename the discussion in case someone has the same issue.
Thanks!