Performance issue when using ForEachStore & TabView

[Alex0Klain]

I'm currently rewriting the movie container into an app. And I ran into the problem that when changing the index in TabView, all the child elements are called again and so every time. With a large array of child modules, this is very critical for performance. Can you tell me what can be done in such a situation?

Console example:
I would like to see in the console this:

/// Change tab to 2 element
Movie.withIndex(2).init
Movie.withIndex(2).onAppear
/// Change tab to 3 element
Movie.withIndex(3).init
Movie.withIndex(3).onAppear

But now:

/// Change tab to 2 element
Movie.withIndex(1).init
Movie.withIndex(2).init
Movie.withIndex(3).init
Movie.withIndex(4).init
Movie.withIndex(2).onAppear
/// Change tab to 3 element
Movie.withIndex(1).init
Movie.withIndex(2).init
Movie.withIndex(3).init
Movie.withIndex(4).init
Movie.withIndex(3).onAppear

Code:

// Parent View

struct PagerView: View {
  init(
    _ store: Store<PagerState, PagerActions>
  ) {
    self.store = store
  }

  // MARK: Internal

  var body: some View {
    WithViewStore(
      self.store,
      observe: { $0 }
    ) { viewStore in
      TabView(selection: viewStore.binding(\.$currentIndex)) {
        ForEachStore(
          self.store.scope(
            state: \.moviePages,
            action: PagerActions.moviePage(id:action:)
          )
        ) { movieStore in
          MovieView(movieStore)
            .onAppear {
              viewStore.send(.movieDidAppear)
            }
        }
      }.tabViewStyle(.page(indexDisplayMode: .never))
    }
  }

  private var store: Store<PagerState, PagerActions>
}

// Parent State

struct PagerState: Equatable {
  @BindingState
  var currentIndex: Int
  
  /// Some alert fields
  
  var moviePages: IdentifiedArrayOf<MovieState> = []
}

// Parent Actions

enum PagerActions: BindableAction, Equatable {
  case onAppear
  case onDisappear

  /// Some actions for bool fields
  
  case moviePage(id: Int, action: MovieActions)
  
  case binding(BindingAction<PagerState>)
}

// Child View

struct MovieView: View {
  init(
    _ store: Store<MovieState, MovieActions>
  ) {
    self.store = store
    self.viewStore = ViewStore(store)
    viewStore.send(.onLoad)
  }
  
  var body: some View {
    content
      .tag(viewStore.id)
  }
  
  private let store: Store<MovieState, MovieActions>

  @ObservedObject
  private var viewStore: ViewStore<MovieState, MovieActions>
}

[mbrandonw]

Hi @Alex0Klain, the problem is in the lines where you are constructing the view store, such as this:

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

…and this:

self.viewStore = ViewStore(store)

You are observing all of state in both cases, even though you only need a small amount of state. The PagerView only needs currentIndex and MovieView only needs id. You should be using the observe argument to chisel away at the bare minimum of state that the view needs to do its job. There is an entire article devoted to this subject.

Also, this bit of code is very problematic:

struct MovieView: View {
  init(
    _ store: Store<MovieState, MovieActions>
  ) {
    self.store = store
    self.viewStore = ViewStore(store)
    viewStore.send(.onLoad)
  }

You should not be sending actions in a view's initializer. You shouldn't really be doing any heavy work whatsoever (this goes for vanilla SwiftUI too) since views can be constructed many times. A view struct being initialized does not represent the view "loading" in the normal sense.

[Alex0Klain]

Thanks, this partially reduced the performance issue 🤝