SwiftUI refresh view multiple times

[artemkrachulov]

Hi everyone. After reading the performance article I decided to add some flavors of optimization to our application.
I've added ViewStore with an observing feature. Example:

struct SomeView: View {

 typealias ObservationScope = (propertyA: Bool, propertyB: Bool, propertyC: SomeStruct)

  private let store: StoreOf<SomeReducer>
  @ObservedObject private var viewStore: ViewStore<ObservationScope, SomeReducer.Action>

  init(store: StoreOf<SomeReducer>) {
    self.store = store
    self.viewStore = ViewStore(store, observe: { ($0.propertyA, $0.propertyB, $0.propertyC ) }, removeDuplicates: ==)
  }

  var body: some View {

    let _ = Self._printChanges()

    ... do something ...
  }
}

As a result, I have multiple view refresh issues. 3-4 times
Then I went to the Equitable way

struct SomeView: View, Equatable {

  private let store: StoreOf<SomeReducer>
  @ObservedObject private var viewStore: ViewStoreOf<SomeReducer>

  init(store: StoreOf<SomeReducer>) {
    self.store = store
    self.viewStore = ViewStore(store, observe: { $0 })
  }

  var body: some View {

    let _ = Self._printChanges()

    ... do something ...
  }

 static func == (lhs: Self, rhs: Self) -> Bool {
    lhs.viewStore.propertyA == rhs.viewStore.propertyA &&
    lhs.viewStore.propertyB == rhs.viewStore.propertyB &&
    lhs.viewStore.propertyC == rhs.viewStore.propertyC
  }
}

As a result, I have a refreshing view only when the required option has changed.

What, I'm doing wrong here? As I understood observed features should do the same as equal.

The TCA version I use, 0.57.0

[kamcma]

I think something is wrong about your comparison. You implemented equatable on your view, which TCA would not use and does not buy you anything, I don't think. For the purposes of reducing unnecessary view renders, what matters is equatability or a remove duplications function on state or view state.

[kamcma]

The comparison should look more like this. (I'm using > 1.0 TCA, but the parts about the equatability of state and the view constructs used apply to < 1.0 as well).

import ComposableArchitecture
import SwiftUI

struct FooFeature: Reducer {
  struct State {
    var count: Int
  }
  typealias Action = Never
  var body: some ReducerOf<Self> {
    EmptyReducer()
  }
}

struct FooViewWithoutEquatableState: View {
  @Binding var store: StoreOf<FooFeature>

  var body: some View {
    WithViewStore(self.store, observe: { $0 }, removeDuplicates: { $0.count == $1.count }) { viewStore in
      Text("\(viewStore.count)")
    }
  }
}

// versus

extension FooFeature.State: Equatable { }

struct FooViewWithEquatableState: View {
  @Binding var store: StoreOf<FooFeature>

  var body: some View {
    WithViewStore(self.store, observe: { $0 }) { viewStore in
      Text("\(viewStore.count)")
    }
  }
}

[artemkrachulov]

@kamcma Thank you for your response. You're right I have to equate properties in removeDuplicates closure. When I made changes I had results close to Equatable view, but still not the same. How I've changed:

struct SomeView: View {

  private let store: StoreOf<SomeReducer>
  @ObservedObject private var viewStore: ViewStoreOf<SomeReducer >

  init(store: StoreOf<SomeReducer>) {
    self.store = store
    self.viewStore = ViewStore(store, observe: { $0 }, removeDuplicates: {
      $0.propertyA == $1.propertyA &&
      $0.propertyB == $1.propertyB &&
      $0.propertyC == $1.propertyC
    })
  }

  var body: some View {

    let _ = Self._printChanges()

    ... do something ...
  }
}

Debug area prints:

SomeView: @self changed.
SomeView: _viewStore changed.

Comparing to

struct SomeView: View, Equatable {

  private let store: StoreOf<SomeReducer>
  @ObservedObject private var viewStore: ViewStoreOf<SomeReducer>

  init(store: StoreOf<SomeReducer>) {
    self.store = store
    self.viewStore = ViewStore(store, observe: { $0 })
  }

  var body: some View {

    let _ = Self._printChanges()

    ... do something ...
  }

 static func == (lhs: Self, rhs: Self) -> Bool {
    lhs.viewStore.propertyA == rhs.viewStore.propertyA &&
    lhs.viewStore.propertyB == rhs.viewStore.propertyB &&
    lhs.viewStore.propertyC == rhs.viewStore.propertyC
  }
}

Debug area prints:

MembersList: _viewStore changed.

2 times versus 1 time

[Alex293]

IIRC making your view equatable helps for the parent to avoid redrawing the child. In you example I think you see a single print because your parent avoided a redraw though I don't think you implementation is a proper implementation of equatable, two of your view could easily have differing stores that happens to have the same state at some point. I think you really should have a look at the new observation tools in more recent versions of TCA, those fix the over observation problems for you basically.